@atlaskit/react-select 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @atlaskit/react-select
 
+## 4.1.0
+
+### Minor Changes
+
+- [`642a4ddbce9f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/642a4ddbce9f4) -
+  [ux] The Select menu is being migrated to the browser top layer. The new behaviour is gated behind
+  the `platform-dst-top-layer` feature flag and ships dark; there are no public API changes for
+  `@atlaskit/react-select` or `@atlaskit/select`.
+
+  Internal-only improvements to support consumer migrations:
+  - Polyfilled the `:popover-open` CSS pseudo-class in the jsdom test polyfill so consumers can
+    assert on popover open state in unit tests without a browser.
+  - Removed a defensive `try/catch` around `element.matches()` in `Popover` that was only needed to
+    work around the missing pseudo-class.
+  - Clarified, via an inline comment in `use-initial-focus`, why the combobox carve-out is kept
+    role-specific (menu / listbox) rather than hoisted above all role checks.
+  - Fixed a unit test for `PopupSelect` top-layer trigger click that incorrectly called `failGate`
+    in `afterEach`, which conflicted with the auto-reset behaviour of
+    `@atlassian/feature-flags-test-utils/mock-gates` and caused the suite to fail.
+
+  No public API or runtime behaviour changes for existing consumers.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.0.2
+
+### Patch Changes
+
+- [`61f82ad80594c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/61f82ad80594c) -
+  Removed OKLCH / `color-mix()` runtime colour transformations from the tag-like multi-value
+  rendering (behind the `platform-dst-lozenge-tag-badge-visual-uplifts` feature gate). The
+  decorative border colour now comes directly from the `color.border.accent.*.subtle` tokens
+  (introduced in `@atlaskit/tokens@13.2.0`) instead of being derived at runtime, matching the new
+  Tag component's border logic.
+
 ## 4.0.1
 
 ### Patch Changes

package/dist/cjs/components/menu-placer.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portalPlacementContext = require("../internal/portal-placement-context");
 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; }
@@ -269,6 +270,12 @@ var MenuPlacer = function MenuPlacer(props) {
   // The minimum height of the control
   var controlHeight = 38;
   (0, _react.useLayoutEffect)(function () {
+    // When the menu is hosted in the browser top layer, positioning, flipping
+    // and viewport-fit are all handled by `@atlaskit/top-layer`. The placer
+    // becomes a pass-through that only forwards `maxMenuHeight` as a cap.
+    if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+      return;
+    }
     var menuEl = ref.current;
     if (!menuEl) {
       return;

package/dist/cjs/components/menu-portal-top-layer.compiled.css

@@ -0,0 +1 @@
+._ofie1496{max-block-size:100dvh}

package/dist/cjs/components/menu-portal-top-layer.js

@@ -0,0 +1,151 @@
+/* menu-portal-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuPortalTopLayer = MenuPortalTopLayer;
+require("./menu-portal-top-layer.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react2 = require("@compiled/react");
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _popover = require("@atlaskit/top-layer/popover");
+var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
+var _getStyleProps2 = require("../get-style-props");
+var _menuPortalCloseContext = require("../internal/menu-portal-close-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// `'auto'` falls through to `'end'`; top-layer's `position-try-fallbacks` flips it if needed.
+function reactSelectEdgeToTopLayerEdge(menuPlacement) {
+  return menuPlacement === 'top' ? 'start' : 'end';
+}
+var menuPortalStyles = {
+  root: "_ofie1496"
+};
+
+/**
+ * Top-layer host for react-select's menu. Hands positioning, flip, and width
+ * to `@atlaskit/top-layer`; ignores `appendTo` / `menuPortalTarget` /
+ * `menuPosition`. The browser-dismiss handler is supplied internally by
+ * `Select` via `MenuPortalCloseContext`.
+ *
+ * @example
+ * ```tsx
+ * <MenuPortalTopLayer controlElement={el} menuPlacement="bottom">
+ *   <Menu />
+ * </MenuPortalTopLayer>
+ * ```
+ */
+function MenuPortalTopLayer(props) {
+  var children = props.children,
+    controlElement = props.controlElement,
+    innerProps = props.innerProps,
+    menuPlacement = props.menuPlacement,
+    menuPosition = props.menuPosition,
+    xcss = props.xcss;
+  // Select's "close the menu" callback, distinct from `Popover.onClose`.
+  var closeSelect = (0, _react.useContext)(_menuPortalCloseContext.MenuPortalCloseContext);
+  var popoverRef = (0, _react.useRef)(null);
+
+  // Top-layer hooks need a RefObject; in-render mutation keeps it in sync
+  // with the prop without an effect. The hooks re-read `.current` from
+  // `isOpen`-keyed layout effects, so a stable ref identity is fine.
+  var anchorRef = (0, _react.useRef)(null);
+  anchorRef.current = controlElement;
+
+  // `controlElement` is null on initial mount / SSR until `Select` mirrors
+  // its ref into state. While null, every hook below no-ops to avoid DOM
+  // reads or registering an unpositioned popover.
+  var isAnchored = controlElement !== null;
+
+  // `gap: 0` matches the legacy MenuPortal (no trigger-to-menu gap; the
+  // menu root already declares its own `marginBlockStart`). Without this
+  // override `useAnchorPosition`'s default 8px gap would diverge visually
+  // from the legacy path.
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: anchorRef,
+    popoverRef: popoverRef,
+    placement: {
+      axis: 'block',
+      edge: reactSelectEdgeToTopLayerEdge(menuPlacement),
+      offset: {
+        gap: 0
+      }
+    },
+    isOpen: isAnchored
+  });
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    anchorRef: anchorRef,
+    popoverRef: popoverRef,
+    mode: 'match-anchor',
+    isOpen: isAnchored
+  });
+  var handlePopoverClose = (0, _react.useCallback)(function () {
+    if (closeSelect) {
+      closeSelect();
+    }
+  }, [closeSelect]);
+
+  // Explicit observer registration: the outer Popover is intentionally
+  // roleless (see Popover comment below), so Popover cannot auto-register
+  // from its role. This lets `closeLayers()` (Modal / Drawer) dismiss us.
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    type: 'popup',
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  });
+
+  // Top-layer owns positioning; zero offset/rect preserves the consumer
+  // styles call shape.
+  var _getStyleProps = (0, _getStyleProps2.getStyleProps)(_objectSpread(_objectSpread({}, props), {}, {
+      offset: 0,
+      position: menuPosition,
+      rect: {
+        left: 0,
+        width: 0
+      }
+    }), 'menuPortal', {
+      'menu-portal': true
+    }),
+    className = _getStyleProps.className;
+
+  // Popover stays mounted and is driven by `isOpen` so its layout-effect
+  // teardown (`hidePopover`, observer cleanup, position-hook style reset)
+  // runs against a live element. Conditional render would skip that path.
+  //
+  // `mode="manual"` opts out of native light-dismiss: react-select already
+  // owns outside-click and Escape via its own handlers, and the combobox
+  // trigger lives in a separate DOM subtree that the spec algorithm cannot
+  // see. Matches the pattern in `@atlaskit/datetime-picker`'s MenuTopLayer.
+  //
+  // The Popover host is intentionally roleless: the inner `MenuList`
+  // keeps `role="listbox"` and the id referenced by `aria-controls`.
+  // Putting the role on the outer host caused Playwright `toBeVisible`
+  // and some SR hit-testing to treat it as hidden (zero bounding rect
+  // while `styles.root` opts out of UA `[popover]` positioning).
+  //
+  // TODO: add open / close animation. Select unmounts MenuPortalTopLayer
+  // the moment `menuIsOpen` flips false, so Popover's `animate` exit
+  // transition never gets a frame. Needs keeping the portal mounted
+  // through the exit (`onExitFinish`) on the Select side.
+  return /*#__PURE__*/React.createElement(_popover.Popover, {
+    ref: popoverRef,
+    mode: "manual",
+    isOpen: isAnchored,
+    onClose: handlePopoverClose
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // `className` carries consumer `styles.menuPortal({...})` output,
+    // `xcss` carries caller compiled atomic classes, and `-MenuPortal`
+    // is a legacy selector hook kept for parity with MenuPortalLegacy.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss, @typescript-eslint/no-explicit-any
+    className: (0, _runtime.ax)([menuPortalStyles.root, (0, _react2.cx)(className, xcss, '-MenuPortal')])
+  }, innerProps), children));
+}

package/dist/cjs/components/menu-portal.js

@@ -17,8 +17,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react2 = require("@compiled/react");
 var _dom = require("@floating-ui/dom");
 var _reactDom = require("react-dom");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _getStyleProps2 = require("../get-style-props");
 var _portalPlacementContext = require("../internal/portal-placement-context");
+var _menuPortalTopLayer = require("./menu-portal-top-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -40,7 +42,7 @@ var menuPortalStyles = {
   root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
+function MenuPortalLegacy(props) {
   var appendTo = props.appendTo,
     children = props.children,
     controlElement = props.controlElement,
@@ -99,7 +101,10 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
     runAutoUpdate();
   }, [runAutoUpdate]);
 
-  // bail early if required elements aren't present
+  // Legacy quirk: `computedPosition` is null until the layout effect runs,
+  // so the first render returns null even with `defaultMenuIsOpen` set.
+  // Synchronous observers (VR snapshots) see a one-frame "closed" state.
+  // Left as-is; the top-layer path supersedes this and positions declaratively.
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) {
     return null;
   }
@@ -129,4 +134,19 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   return /*#__PURE__*/React.createElement(_portalPlacementContext.PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /*#__PURE__*/(0, _reactDom.createPortal)(menuWrapper, appendTo) : menuWrapper);
+}
+
+/**
+ * Public-facing `MenuPortal` component. Routes between the legacy
+ * `createPortal`-based implementation and the top-layer-based
+ * `MenuPortalTopLayer` based on the `platform-dst-top-layer` feature flag.
+ */
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    return /*#__PURE__*/React.createElement(_menuPortalTopLayer.MenuPortalTopLayer, props);
+  }
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return /*#__PURE__*/React.createElement(MenuPortalLegacy, props);
 };

package/dist/cjs/components/multi-value.compiled.css

@@ -5,26 +5,24 @@
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
-._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
-._1mouze3t{margin-block:var(--ds-space-0,0)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
-._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
-._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
-._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
-._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
-._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
-._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
-._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
-._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
-._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
+._1h6dip4g{border-color:var(--tag-border-token)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}._119b131p{--tag-border-token:var(--ds-border-accent-teal-subtle,#9dd9ee)}
+._119b132u{--tag-border-token:var(--ds-border-accent-magenta-subtle,#f797d2)}
+._119b18hp{--tag-border-token:var(--ds-border-accent-blue-subtle,#8fb8f6)}
+._119b1ip5{--tag-border-token:var(--ds-border-accent-orange-subtle,#fbc828)}
+._119b1m7d{--tag-border-token:var(--ds-border-accent-lime-subtle,#b3df72)}
+._119b1s7j{--tag-border-token:var(--ds-border-accent-yellow-subtle,#eed12b)}
+._119b5d2u{--tag-border-token:var(--ds-border-accent-green-subtle,#7ee2b8)}
+._119bluwt{--tag-border-token:var(--ds-border-accent-purple-subtle,#d8a0f7)}
+._119bmsup{--tag-border-token:var(--ds-border-accent-gray-subtle,#b7b9be)}
+._119bn9dc{--tag-border-token:var(--ds-border-accent-red-subtle,#fd9891)}
 ._13lsf1ug>*{flex-basis:0%}
-._13muu67f{--cm-border-color:#fff}
 ._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
-._1k671038{--border-l-factor:1.33}
 ._1o9zkb7n{flex-shrink:1}
 ._1ouwze3t>*{min-width:var(--ds-space-0,0)}
 ._1reo15vq{overflow-x:hidden}
@@ -42,7 +40,6 @@
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
 ._kqswh2mm{position:relative}
-._oe6mmko7{--cm-border-value:45%}
 ._p12ff6dh{max-width:11.25rem}
 ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
@@ -50,7 +47,4 @@
 ._v5ynkb7n>*{flex-shrink:1}
 ._vchhusvi{box-sizing:border-box}
 ._zdxokb7n>*{flex-grow:1}
-[data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
-[data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
-@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
-@supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}
+@media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}

package/dist/cjs/components/multi-value.js

@@ -28,19 +28,17 @@ var multiValueTagWrapperStyles = {
 
 // Tag-like color styles
 var tagLikeColorStyles = {
-  gray: "_119b8yml",
-  blue: "_119b1w55",
-  green: "_119b1crs",
-  red: "_119b16y8",
-  yellow: "_119bfeiv",
-  purple: "_119b1hqq",
-  lime: "_119bnf89",
-  magenta: "_119buwd0",
-  orange: "_119b1b2s",
-  teal: "_119b1h3o"
+  gray: "_119bmsup",
+  blue: "_119b18hp",
+  green: "_119b5d2u",
+  red: "_119bn9dc",
+  yellow: "_119b1s7j",
+  purple: "_119bluwt",
+  lime: "_119b1m7d",
+  magenta: "_119b132u",
+  orange: "_119b1ip5",
+  teal: "_119b131p"
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- match TagNew border color logic
 var tagLikeBorderFilterStyles = null;
 
 // Tag-like styles for custom content values (not plain text) when FF is on.
@@ -137,7 +135,7 @@ var MultiValue = function MultiValue(props) {
       style: containerCss
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
       ,
-      className: (0, _runtime.ax)([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dpryq _1k671038 _13muu67f _oe6mmko7 _u8p61h4e _hg5mr3uz _1easrqqc", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
+      className: (0, _runtime.ax)([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dip4g", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
     }), /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)([multiValueTagLikeStyles.labelWrapper])
     }, /*#__PURE__*/React.createElement(Label, {

package/dist/cjs/internal/menu-portal-close-context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuPortalCloseContext = void 0;
+var _react = require("react");
+/**
+ * Internal handoff from `Select` to `MenuPortalTopLayer` for the top-layer
+ * dismiss signal. Kept off `MenuPortalProps` to avoid widening the public
+ * subpath export at `@atlaskit/react-select/menu-portal`.
+ */
+var MenuPortalCloseContext = exports.MenuPortalCloseContext = /*#__PURE__*/(0, _react.createContext)(undefined);