@atlaskit/react-select 3.5.4 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/react-select
 
+## 3.6.0
+
+### Minor Changes
+
+- [`153fad932190f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/153fad932190f) -
+  [ux] Added a new prop shouldKeepInputOnSelect to the select component to prevent clearing the
+  input when isMulti is true
+
 ## 3.5.4
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/containers.js

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/control.js

@@ -1,4 +1,4 @@
-/* control.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* control.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/group.js

@@ -1,4 +1,4 @@
-/* group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* group.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/indicators.js

@@ -1,4 +1,4 @@
-/* indicators.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* indicators.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/input.js

@@ -1,4 +1,4 @@
-/* input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* input.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/internal/a11y-text.js

@@ -1,4 +1,4 @@
-/* a11y-text.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* a11y-text.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/internal/dummy-input.js

@@ -1,4 +1,4 @@
-/* dummy-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/internal/required-input.js

@@ -1,4 +1,4 @@
-/* required-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* required-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* multi-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* multi-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/option.js

@@ -1,4 +1,4 @@
-/* option.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* option.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/placeholder.js

@@ -1,4 +1,4 @@
-/* placeholder.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* placeholder.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* single-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* single-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/select.js

@@ -79,7 +79,8 @@ var defaultProps = exports.defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldKeepInputOnSelect: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -291,9 +292,10 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
-        inputValue = _this$props2.inputValue;
+        inputValue = _this$props2.inputValue,
+        shouldKeepInputOnSelect = _this$props2.shouldKeepInputOnSelect;
       // for multiple selection options, do not clear the search input value
-      if (isMulti && (0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
+      if (isMulti && shouldKeepInputOnSelect && (0, _platformFeatureFlags.fg)('platform_do_not_clear_input_for_multiselect')) {
         _this.onInputChange(inputValue, {
           action: 'set-value',
           prevInputValue: inputValue

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

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/containers.js

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/control.js

@@ -1,4 +1,4 @@
-/* control.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* control.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./control.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/group.js

@@ -1,4 +1,4 @@
-/* group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./group.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/indicators.js

@@ -1,4 +1,4 @@
-/* indicators.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* indicators.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./indicators.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/input.js

@@ -1,4 +1,4 @@
-/* input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./input.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/internal/a11y-text.js

@@ -1,4 +1,4 @@
-/* a11y-text.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* a11y-text.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./a11y-text.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/internal/dummy-input.js

@@ -1,4 +1,4 @@
-/* dummy-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./dummy-input.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/internal/required-input.js

@@ -1,4 +1,4 @@
-/* required-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* required-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./required-input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./menu.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* multi-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* multi-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./multi-value.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/option.js

@@ -1,4 +1,4 @@
-/* option.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* option.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./option.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/placeholder.js

@@ -1,4 +1,4 @@
-/* placeholder.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* placeholder.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./placeholder.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/single-value.js

@@ -1,4 +1,4 @@
-/* single-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* single-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./single-value.compiled.css";
 import * as React from 'react';

package/dist/es2019/select.js

@@ -53,7 +53,8 @@ export const defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldKeepInputOnSelect: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   const isDisabled = isOptionDisabled(props, option, selectValue);
@@ -261,10 +262,11 @@ export default class Select extends Component {
       const {
         closeMenuOnSelect,
         isMulti,
-        inputValue
+        inputValue,
+        shouldKeepInputOnSelect
       } = this.props;
       // for multiple selection options, do not clear the search input value
-      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+      if (isMulti && shouldKeepInputOnSelect && fg('platform_do_not_clear_input_for_multiselect')) {
         this.onInputChange(inputValue, {
           action: 'set-value',
           prevInputValue: inputValue

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

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';

package/dist/esm/components/containers.js

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* containers.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containers.compiled.css";
 import * as React from 'react';

package/dist/esm/components/control.js

@@ -1,4 +1,4 @@
-/* control.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* control.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./control.compiled.css";
 import * as React from 'react';

package/dist/esm/components/group.js

@@ -1,4 +1,4 @@
-/* group.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* group.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["data"];

package/dist/esm/components/indicators.js

@@ -1,4 +1,4 @@
-/* indicators.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* indicators.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";

package/dist/esm/components/input.js

@@ -1,4 +1,4 @@
-/* input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName", "testId"];

package/dist/esm/components/internal/a11y-text.js

@@ -1,4 +1,4 @@
-/* a11y-text.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* a11y-text.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./a11y-text.compiled.css";
 import * as React from 'react';

package/dist/esm/components/internal/dummy-input.js

@@ -1,4 +1,4 @@
-/* dummy-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* dummy-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["innerRef"];

package/dist/esm/components/internal/required-input.js

@@ -1,4 +1,4 @@
-/* required-input.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* required-input.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./required-input.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/menu.js

@@ -1,4 +1,4 @@
-/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";

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

@@ -1,4 +1,4 @@
-/* multi-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* multi-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import "./multi-value.compiled.css";

package/dist/esm/components/option.js

@@ -1,4 +1,4 @@
-/* option.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* option.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./option.compiled.css";
 import * as React from 'react';

package/dist/esm/components/placeholder.js

@@ -1,4 +1,4 @@
-/* placeholder.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* placeholder.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./placeholder.compiled.css";
 import * as React from 'react';

package/dist/esm/components/single-value.js

@@ -1,4 +1,4 @@
-/* single-value.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* single-value.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./single-value.compiled.css";
 import * as React from 'react';

package/dist/esm/select.js

@@ -70,7 +70,8 @@ export var defaultProps = {
   styles: {},
   tabIndex: 0,
   tabSelectsValue: true,
-  UNSAFE_is_experimental_generic: false
+  UNSAFE_is_experimental_generic: false,
+  shouldKeepInputOnSelect: false
 };
 function toCategorizedOption(props, option, selectValue, index) {
   var isDisabled = _isOptionDisabled(props, option, selectValue);
@@ -282,9 +283,10 @@ var Select = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
         closeMenuOnSelect = _this$props2.closeMenuOnSelect,
         isMulti = _this$props2.isMulti,
-        inputValue = _this$props2.inputValue;
+        inputValue = _this$props2.inputValue,
+        shouldKeepInputOnSelect = _this$props2.shouldKeepInputOnSelect;
       // for multiple selection options, do not clear the search input value
-      if (isMulti && fg('platform_do_not_clear_input_for_multiselect')) {
+      if (isMulti && shouldKeepInputOnSelect && fg('platform_do_not_clear_input_for_multiselect')) {
         _this.onInputChange(inputValue, {
           action: 'set-value',
           prevInputValue: inputValue

package/dist/types/select.d.ts

@@ -433,6 +433,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
     UNSAFE_is_experimental_generic?: boolean;
+    /**
+     * If `true`, the input value will be kept when an option is selected and isMulti is `true`. The default is `false`.
+     */
+    shouldKeepInputOnSelect?: boolean;
 }
 export declare const defaultProps: {
     backspaceRemovesValue: boolean;
@@ -476,6 +480,7 @@ export declare const defaultProps: {
     tabIndex: number;
     tabSelectsValue: boolean;
     UNSAFE_is_experimental_generic: boolean;
+    shouldKeepInputOnSelect: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -556,6 +561,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         tabIndex: number;
         tabSelectsValue: boolean;
         UNSAFE_is_experimental_generic: boolean;
+        shouldKeepInputOnSelect: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

package/dist/types-ts4.5/select.d.ts

@@ -433,6 +433,10 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     appearance: 'default' | 'subtle' | 'none';
     [key: string]: any;
     UNSAFE_is_experimental_generic?: boolean;
+    /**
+     * If `true`, the input value will be kept when an option is selected and isMulti is `true`. The default is `false`.
+     */
+    shouldKeepInputOnSelect?: boolean;
 }
 export declare const defaultProps: {
     backspaceRemovesValue: boolean;
@@ -476,6 +480,7 @@ export declare const defaultProps: {
     tabIndex: number;
     tabSelectsValue: boolean;
     UNSAFE_is_experimental_generic: boolean;
+    shouldKeepInputOnSelect: boolean;
 };
 interface State<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     ariaSelection: AriaSelection<Option, IsMulti> | null;
@@ -556,6 +561,7 @@ export default class Select<Option = unknown, IsMulti extends boolean = false, G
         tabIndex: number;
         tabSelectsValue: boolean;
         UNSAFE_is_experimental_generic: boolean;
+        shouldKeepInputOnSelect: boolean;
     };
     state: State<Option, IsMulti, Group>;
     blockOptionHover: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.5.4",
+	"version": "3.6.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,7 +21,7 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.14.0",
@@ -39,7 +39,7 @@
 	},
 	"devDependencies": {
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/form": "^12.5.0",
+		"@atlaskit/form": "^12.6.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",