@atlaskit/react-select 2.7.4 → 2.7.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/react-select
 
+## 2.7.6
+
+### Patch Changes
+
+- [#175058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175058)
+  [`cfb3a1596d972`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfb3a1596d972) -
+  Add same class names in emotion compoent as compiled select for GA
+- Updated dependencies
+
+## 2.7.5
+
+### Patch Changes
+
+- [#173706](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173706)
+  [`a37d69dbb048b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a37d69dbb048b) -
+  Remove onMenuClose call when input is blur
+
 ## 2.7.4
 
 ### Patch Changes

package/dist/cjs/emotion/components/containers.js

@@ -43,10 +43,14 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'container', {
+  var styles = (0, _utils.getStyleProps)(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
-  }), innerProps), children);
+  });
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-container'
+  }, innerProps), children);
 };
 
 // ==============================
@@ -85,7 +89,7 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     css: styles.css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: styles.className || 'value-container'
+    className: styles.className || '-ValueContainer'
   }, innerProps), children);
 };
 

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

@@ -264,9 +264,12 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(props, 'menu', {
+  var styles = (0, _utils.getStyleProps)(props, 'menu', {
     menu: true
-  }), {
+  });
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-menu',
     ref: innerRef
   }, innerProps), children);
 };

package/dist/cjs/select.js

@@ -636,7 +636,12 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         action: 'input-blur',
         prevInputValue: prevInputValue
       });
-      _this.onMenuClose();
+      if ((0, _platformFeatureFlags.fg)('platform_dst_select_menu_close_on_blur')) {
+        // when fg is enabled, we only call onMenuClose when this.props.menuIsOpen is true.
+        _this.props.menuIsOpen && _this.onMenuClose();
+      } else {
+        _this.onMenuClose();
+      }
       _this.setState({
         focusedValue: null,
         isFocused: false

package/dist/es2019/emotion/components/containers.js

@@ -37,10 +37,14 @@ export const SelectContainer = props => {
     isDisabled,
     isRtl
   } = props;
-  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+  const styles = getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
-  }), innerProps), children);
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-container'
+  }, innerProps), children);
 };
 
 // ==============================
@@ -82,7 +86,7 @@ export const ValueContainer = props => {
     css: styles.css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: styles.className || 'value-container'
+    className: styles.className || '-ValueContainer'
   }, innerProps), children);
 };
 

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

@@ -263,9 +263,12 @@ const Menu = props => {
     innerRef,
     innerProps
   } = props;
-  return jsx("div", _extends({}, getStyleProps(props, 'menu', {
+  const styles = getStyleProps(props, 'menu', {
     menu: true
-  }), {
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-menu',
     ref: innerRef
   }, innerProps), children);
 };

package/dist/es2019/select.js

@@ -609,7 +609,12 @@ export default class Select extends Component {
         action: 'input-blur',
         prevInputValue
       });
-      this.onMenuClose();
+      if (fg('platform_dst_select_menu_close_on_blur')) {
+        // when fg is enabled, we only call onMenuClose when this.props.menuIsOpen is true.
+        this.props.menuIsOpen && this.onMenuClose();
+      } else {
+        this.onMenuClose();
+      }
       this.setState({
         focusedValue: null,
         isFocused: false

package/dist/esm/emotion/components/containers.js

@@ -36,10 +36,14 @@ export var SelectContainer = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+  var styles = getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
-  }), innerProps), children);
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-container'
+  }, innerProps), children);
 };
 
 // ==============================
@@ -78,7 +82,7 @@ export var ValueContainer = function ValueContainer(props) {
     css: styles.css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: styles.className || 'value-container'
+    className: styles.className || '-ValueContainer'
   }, innerProps), children);
 };
 

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

@@ -261,9 +261,12 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'menu', {
+  var styles = getStyleProps(props, 'menu', {
     menu: true
-  }), {
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-menu',
     ref: innerRef
   }, innerProps), children);
 };

package/dist/esm/select.js

@@ -627,7 +627,12 @@ var Select = /*#__PURE__*/function (_Component) {
         action: 'input-blur',
         prevInputValue: prevInputValue
       });
-      _this.onMenuClose();
+      if (fg('platform_dst_select_menu_close_on_blur')) {
+        // when fg is enabled, we only call onMenuClose when this.props.menuIsOpen is true.
+        _this.props.menuIsOpen && _this.onMenuClose();
+      } else {
+        _this.onMenuClose();
+      }
       _this.setState({
         focusedValue: null,
         isFocused: false

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.7.4",
+	"version": "2.7.6",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,12 +30,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.1.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/primitives": "^14.9.0",
 		"@atlaskit/spinner": "^18.0.0",
-		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/tokens": "^5.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"@emotion/react": "^11.7.1",
@@ -68,6 +68,9 @@
 		},
 		"compiled-react-select": {
 			"type": "boolean"
+		},
+		"platform_dst_select_menu_close_on_blur": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {