@atlaskit/react-select 3.5.4 → 3.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 3.6.1
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 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/components/option.compiled.css

@@ -19,4 +19,4 @@
 ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
 ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
 ._1di61j28:active{background-color:transparent}
-@media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
+@media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}

package/dist/cjs/components/option.js

@@ -19,9 +19,9 @@ var optionCSS = exports.optionCSS = function optionCSS() {
 };
 var optionStyles = {
   root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
-  focused: "_bfhk166n _16qsu4to _1pkn1vrj",
-  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
+  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
+  focused: "_bfhk166n _16qsu4to _112e5u6v",
+  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
   focusedSelected: "_bfhki1yw"
 };
 var Option = function Option(props) {

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/components/option.compiled.css

@@ -19,4 +19,4 @@
 ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
 ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
 ._1di61j28:active{background-color:transparent}
-@media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
+@media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}

package/dist/es2019/components/option.js

@@ -8,9 +8,9 @@ import { getStyleProps } from '../utils';
 export const optionCSS = () => ({});
 const optionStyles = {
   root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
-  focused: "_bfhk166n _16qsu4to _1pkn1vrj",
-  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
+  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
+  focused: "_bfhk166n _16qsu4to _112e5u6v",
+  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
   focusedSelected: "_bfhki1yw"
 };
 const Option = props => {

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/components/option.compiled.css

@@ -19,4 +19,4 @@
 ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
 ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
 ._1di61j28:active{background-color:transparent}
-@media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
+@media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}

package/dist/esm/components/option.js

@@ -10,9 +10,9 @@ export var optionCSS = function optionCSS() {
 };
 var optionStyles = {
   root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
-  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
-  focused: "_bfhk166n _16qsu4to _1pkn1vrj",
-  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
+  disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
+  focused: "_bfhk166n _16qsu4to _112e5u6v",
+  selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
   focusedSelected: "_bfhki1yw"
 };
 var Option = function Option(props) {

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.1",
 	"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.7.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",