@atlaskit/react-select 2.4.9 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/react-select
 
+## 2.5.0
+
+### Minor Changes
+
+- [#155681](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155681)
+  [`679a437d9a866`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/679a437d9a866) -
+  The feature flag for registering `Select` and `PopupSelect` with the experimental open layer
+  observer has now been cleaned up.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.10
+
+### Patch Changes
+
+- [#157159](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157159)
+  [`8da004db78761`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8da004db78761) -
+  Migrate menuPortal inline styles to compiled styles
+
 ## 2.4.9
 
 ### Patch Changes

package/dist/cjs/compiled/components/menu.compiled.css

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/cjs/compiled/components/menu.js

@@ -397,6 +397,9 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref4) {
 var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS() {
   return {};
 };
+var menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   var appendTo = props.appendTo,
@@ -474,15 +477,14 @@ var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _react2.cx)(className, xcss, '-MenuPortal'),
+    className: (0, _runtime.ax)([menuPortalStyles.root, (0, _react2.cx)(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width
+      '--menu-left': "".concat(computedPosition.rect.left, "px"),
+      '--menu-position': menuPosition,
+      '--menu-top': "".concat(computedPosition.offset, "px"),
+      '--menu-width': "".concat(computedPosition.rect.width, "px")
     }, css)
   }, innerProps), children);
   return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {

package/dist/cjs/select.js

@@ -833,9 +833,6 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       event.preventDefault();
     });
     (0, _defineProperty2.default)(_this, "handleOpenLayerObserverCloseSignal", function () {
-      if (!(0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select')) {
-        return;
-      }
       _this.onMenuClose();
     });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
@@ -1852,7 +1849,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
-        isOpen: (0, _platformFeatureFlags.fg)('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
       }));
     }

package/dist/es2019/compiled/components/menu.compiled.css

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/es2019/compiled/components/menu.js

@@ -386,6 +386,9 @@ export const LoadingMessage = ({
 // ==============================
 
 export const menuPortalCSS = () => ({});
+const menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const MenuPortal = props => {
   const {
@@ -459,15 +462,14 @@ export const MenuPortal = props => {
   // same wrapper element whether fixed or portalled
   const menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss, '-MenuPortal'),
+    className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width,
+      '--menu-left': `${computedPosition.rect.left}px`,
+      '--menu-position': menuPosition,
+      '--menu-top': `${computedPosition.offset}px`,
+      '--menu-width': `${computedPosition.rect.width}px`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ...css
     }

package/dist/es2019/select.js

@@ -809,9 +809,6 @@ export default class Select extends Component {
       event.preventDefault();
     });
     _defineProperty(this, "handleOpenLayerObserverCloseSignal", () => {
-      if (!fg('platform_dst_layer_observer_select')) {
-        return;
-      }
       this.onMenuClose();
     });
     this.state.instancePrefix = 'react-select-' + (this.props.instanceId || ++instanceId);
@@ -1889,7 +1886,7 @@ export default class Select extends Component {
         })
       }
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
-      isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+      isOpen: this.props.menuIsOpen,
       onClose: this.handleOpenLayerObserverCloseSignal
     }));
   }

package/dist/esm/compiled/components/menu.compiled.css

@@ -1,9 +1,13 @@
 
-._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1osq{top:100%}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._154i1nmo{top:var(--menu-top)}
+._154i1osq{top:100%}
 ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
 ._18m91wug{overflow-y:auto}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
+._1bsb1qxj{width:var(--menu-width)}
+._1ltva1vk{left:var(--menu-left)}
+._1pbydx66{z-index:9999}
 ._1pbykb7n{z-index:1}
 ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
@@ -11,6 +15,7 @@
 ._94n51osq{bottom:100%}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._kqswcp1v{position:var(--menu-position)}
 ._kqswh2mm{position:relative}
 ._kqswstnw{position:absolute}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}

package/dist/esm/compiled/components/menu.js

@@ -391,6 +391,9 @@ export var LoadingMessage = function LoadingMessage(_ref4) {
 export var menuPortalCSS = function menuPortalCSS() {
   return {};
 };
+var menuPortalStyles = {
+  root: "_1pbydx66 _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
+};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var MenuPortal = function MenuPortal(props) {
   var appendTo = props.appendTo,
@@ -468,15 +471,14 @@ export var MenuPortal = function MenuPortal(props) {
   // same wrapper element whether fixed or portalled
   var menuWrapper = /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: cx(className, xcss, '-MenuPortal'),
+    className: ax([menuPortalStyles.root, cx(className, xcss, '-MenuPortal')]),
     ref: setMenuPortalElement,
     style: _objectSpread({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      zIndex: 9999,
-      left: computedPosition.rect.left,
-      position: menuPosition,
-      top: computedPosition.offset,
-      width: computedPosition.rect.width
+      '--menu-left': "".concat(computedPosition.rect.left, "px"),
+      '--menu-position': menuPosition,
+      '--menu-top': "".concat(computedPosition.offset, "px"),
+      '--menu-width': "".concat(computedPosition.rect.width, "px")
     }, css)
   }, innerProps), children);
   return /*#__PURE__*/React.createElement(PortalPlacementContext.Provider, {

package/dist/esm/select.js

@@ -824,9 +824,6 @@ var Select = /*#__PURE__*/function (_Component) {
       event.preventDefault();
     });
     _defineProperty(_this, "handleOpenLayerObserverCloseSignal", function () {
-      if (!fg('platform_dst_layer_observer_select')) {
-        return;
-      }
       _this.onMenuClose();
     });
     _this.state.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);
@@ -1843,7 +1840,7 @@ var Select = /*#__PURE__*/function (_Component) {
           'data-testid': "".concat(testId, "-select--indicators-container")
         })
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
-        isOpen: fg('platform_dst_layer_observer_select') && this.props.menuIsOpen,
+        isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
       }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.4.9",
+	"version": "2.5.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -72,9 +72,6 @@
 		"design-system-select-fix-placement": {
 			"type": "boolean"
 		},
-		"platform_dst_layer_observer_select": {
-			"type": "boolean"
-		},
 		"compiled-react-select": {
 			"type": "boolean"
 		}