@atlaskit/react-select 3.4.2 → 3.4.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/react-select
 
+## 3.4.3
+
+### Patch Changes
+
+- [#200709](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/200709)
+  [`4e4c55892eecf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e4c55892eecf) -
+  [ux] Prevent input from being cleared from selecting an option with multi-select enabled and fix
+  cursor in search field
+- Updated dependencies
+
 ## 3.4.2
 
 ### Patch Changes

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

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/cjs/components/input.js

@@ -13,17 +13,23 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react2 = require("@compiled/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];
 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); }
 var inputCSS = exports.inputCSS = function inputCSS() {
   return {};
 };
-var inputStyles = {
+var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-var nativeInnputStyles = null;
+var inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+var nativeInputStylesOld = null;
+var nativeInputStyles = null;
 var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
@@ -42,12 +48,31 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  if ((0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // 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)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && "".concat(dataId, "-container")
+    }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // 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)([inputStyles.root, isDisabled && inputStyles.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
+    className: (0, _runtime.ax)([inputStylesOld.root, isDisabled && inputStylesOld.disabled, (0, _react2.cx)(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({

package/dist/cjs/select.js

@@ -293,10 +293,18 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
         inputValue = _this$props2.inputValue;
-      _this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && (0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
+        _this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        _this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         _this.setState({
           inputIsHiddenAfterUpdate: !isMulti

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

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/es2019/components/input.js

@@ -4,13 +4,19 @@ import "./input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export const inputCSS = () => ({});
-const inputStyles = {
+const inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-const nativeInnputStyles = null;
+const inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+const nativeInputStylesOld = null;
+const nativeInputStyles = null;
 const hidden = null;
 const Input = props => {
   const {
@@ -33,12 +39,31 @@ const Input = props => {
   } = getStyleProps(props, 'input', {
     'input-container': true
   });
+  if (fg('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+      ,
+      className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && `${dataId}-container`
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && `${dataId}-container`
   }, /*#__PURE__*/React.createElement("input", _extends({

package/dist/es2019/select.js

@@ -264,10 +264,18 @@ export default class Select extends Component {
         isMulti,
         inputValue
       } = this.props;
-      this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+        this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         this.setState({
           inputIsHiddenAfterUpdate: !isMulti

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

@@ -2,6 +2,7 @@
 ._11q7idpf{background:0}
 ._19itidpf{border:0}
 ._1h9u1kw7:after{font:inherit}
+._1r04idpf{inset:0}
 ._ckog1yjy:after{grid-area:1/2}
 ._eq43idpf:after{border:0}
 ._nd5l1sux{grid-area:1/1/2/3}
@@ -19,6 +20,7 @@
 ._1bsb1osq{width:100%}
 ._1doyidpf:after{margin-bottom:0}
 ._1e0c1n7u{display:inline-grid}
+._1e0c1txw{display:flex}
 ._1k96idpf:after{padding-left:0}
 ._1nn4glyw:after{outline-style:none}
 ._1o9zkb7n{flex-shrink:1}
@@ -36,6 +38,8 @@
 ._ca0qidpf{padding-top:0}
 ._i0dl1wug{flex-basis:auto}
 ._j8d6idpf:after{margin-top:0}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3tdidpf{padding-bottom:0}
 ._otyridpf{margin-bottom:0}
 ._pfztidpf:after{margin-left:0}

package/dist/esm/components/input.js

@@ -6,15 +6,21 @@ import "./input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export var inputCSS = function inputCSS() {
   return {};
 };
-var inputStyles = {
+var inputStylesOld = {
   root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _1e0c1n7u _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
   disabled: "_3um015vq"
 };
-var nativeInnputStyles = null;
+var inputStyles = {
+  root: "_16jlkb7n _1o9zkb7n _i0dl1wug _nd5l1sux _1mouv77o _195gv77o _1rjcv77o _kqswh2mm _1e0c1txw _yv0e12qd _syaz1fxt _j8d6idpf _1av2idpf _1doyidpf _pfztidpf _uoe3idpf _1recidpf _70xridpf _1k96idpf _eq43idpf _1h9u1kw7 _ckog1yjy _1x651r31 _1nn4glyw _1rzeidpf _1yd8yh40 _aetr11ps _uy7x15vq _1qjlqvpr",
+  disabled: "_3um015vq"
+};
+var nativeInputStylesOld = null;
+var nativeInputStyles = null;
 var hidden = null;
 var Input = function Input(props) {
   var builtinCX = props.cx,
@@ -33,12 +39,31 @@ var Input = function Input(props) {
     }),
     css = _getStyleProps.css,
     className = _getStyleProps.className;
+  if (fg('platform_do_not_clear_input_for_multiselect')) {
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      style: css
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+      ,
+      className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+      "data-value": value || '',
+      "data-testid": dataId && "".concat(dataId, "-container")
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1r04idpf _11q7idpf _19itidpf _11c81kw7 _nd5l1yjy _12ji1r31 _1qu2glyw _12y3idpf _1bsb1osq _1ul9yh40 _kqswstnw _syaz1kw7 _tzy4kb7n", isHidden && "_tzy4idpf", builtinCX({
+        input: true
+      }, inputClassName, '-input')]),
+      ref: innerRef,
+      disabled: isDisabled,
+      "data-testid": dataId
+    }, innerProps)));
+  }
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
     ,
-    className: ax([inputStyles.root, isDisabled && inputStyles.disabled, cx(className, xcss, '-Input')]),
+    className: ax([inputStylesOld.root, isDisabled && inputStylesOld.disabled, cx(className, xcss, '-Input')]),
     "data-value": value || '',
     "data-testid": dataId && "".concat(dataId, "-container")
   }, /*#__PURE__*/React.createElement("input", _extends({

package/dist/esm/select.js

@@ -284,10 +284,18 @@ var Select = /*#__PURE__*/function (_Component) {
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
         inputValue = _this$props2.inputValue;
-      _this.onInputChange('', {
-        action: 'set-value',
-        prevInputValue: inputValue
-      });
+      // for multiple selection options, do not clear the search input value
+      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+        _this.onInputChange(inputValue, {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      } else {
+        _this.onInputChange('', {
+          action: 'set-value',
+          prevInputValue: inputValue
+        });
+      }
       if (closeMenuOnSelect) {
         _this.setState({
           inputIsHiddenAfterUpdate: !isMulti

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.4.2",
+	"version": "3.4.3",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
@@ -65,6 +65,9 @@
 		},
 		"platform_dst_select_menu_close_on_blur": {
 			"type": "boolean"
+		},
+		"platform_do_not_clear_input_for_multiselect": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {