@atlaskit/select 17.13.2 → 17.15.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/select
 
+## 17.15.0
+
+### Minor Changes
+
+- [`0d3bdaf1e3d68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d3bdaf1e3d68) -
+  [ux] Set the color.text.subtle token for 'No options' text to meet a 4.5:1 color contrast.
+
+## 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

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.2";
+var packageVersion = "17.15.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/no-options.js

@@ -7,9 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.NoOptionsMessage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
+var _primitives = require("@atlaskit/primitives");
+/**
+ * __No options message__
+ */
 var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(props) {
   return /*#__PURE__*/_react.default.createElement(_reactSelect.components.NoOptionsMessage, props, /*#__PURE__*/_react.default.createElement("span", {
     id: "no-options",
     role: "alert"
-  }, props.children || "No options"));
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    color: "color.text.subtle"
+  }, props.children || "No options")));
 };

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

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { components } from 'react-select';
+import { Text } from '@atlaskit/primitives';
+/**
+ * __No options message__
+ */
 export const NoOptionsMessage = props => {
   return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement("span", {
     id: "no-options",
     role: "alert"
-  }, props.children || `No options`));
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, props.children || `No options`)));
 };

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

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { components } from 'react-select';
+import { Text } from '@atlaskit/primitives';
+/**
+ * __No options message__
+ */
 export var NoOptionsMessage = function NoOptionsMessage(props) {
   return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement("span", {
     id: "no-options",
     role: "alert"
-  }, props.children || "No options"));
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, props.children || "No options")));
 };

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/components/no-options.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-import { type OptionType, type NoticeProps } from '../types';
+import { type NoticeProps, type OptionType } from '../types';
+/**
+ * __No options message__
+ */
 export declare const NoOptionsMessage: (props: NoticeProps<OptionType>) => JSX.Element;

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/dist/types-ts4.5/components/no-options.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-import { type OptionType, type NoticeProps } from '../types';
+import { type NoticeProps, type OptionType } from '../types';
+/**
+ * __No options message__
+ */
 export declare const NoOptionsMessage: (props: NoticeProps<OptionType>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "17.13.2",
+	"version": "17.15.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",
@@ -106,6 +106,9 @@
 	"platform-feature-flags": {
 		"platform.design-system-team.use-default-select-in-popup-select_46rmj": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-19701-no-node-resolver": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"