@atlaskit/user-picker 9.2.2 → 9.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 9.3.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 9.3.1
+
+### Patch Changes
+
+- [`fd025cbb820`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd025cbb820) - [ux] Fix input cursor position relative to the placeholder
+
+## 9.3.0
+
+### Minor Changes
+
+- [`bc0b47732f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc0b47732f8) - [ux] Fix bug where user picker input is not being unfocused when disableInput is set. The new behavior will enable you to still focus on the input but not interact with it, unless it is to delete selected users.
+
 ## 9.2.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -152,7 +152,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -366,8 +367,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -582,6 +582,10 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/cjs/components/ExternalUserSourcesContainer.js

@@ -29,10 +29,14 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
   }
 
   return _react.default.Children.map(children, function (child) {
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      sources: sources,
-      sourcesLoading: sourcesLoading
-    });
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error
+      _react.default.cloneElement(child, {
+        sources: sources,
+        sourcesLoading: sourcesLoading
+      })
+    );
   });
 };
 

package/dist/cjs/components/Input.js

@@ -47,9 +47,15 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
     return _this;
   }
@@ -57,10 +63,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/_react.default.createElement(_select.components.Input, (0, _extends2.default)({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

package/dist/cjs/components/styles.js

@@ -39,7 +39,6 @@ var INDICATOR_WIDTH = 39;
 exports.INDICATOR_WIDTH = INDICATOR_WIDTH;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
-var PLACEHOLDER_MARGIN = 2;
 var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
@@ -172,7 +171,6 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         /* Necessary to make input height and tag height the same. */
         marginBottom: TAG_MARGIN_WIDTH,
         marginTop: TAG_MARGIN_WIDTH,
-        marginLeft: PLACEHOLDER_MARGIN,
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.2",
 	"sideEffects": false
 }

package/dist/es2019/components/BaseUserPicker.js

@@ -18,6 +18,10 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
 
+    if (nextProps.isDisabled || nextProps.disableInput) {
+      derivedState.menuIsOpen = false;
+    }
+
     if (nextProps.open !== undefined) {
       derivedState.menuIsOpen = nextProps.open;
     }
@@ -119,7 +123,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       if (removedValue && this.state.value && Array.isArray(this.state.value)) {
         const remainingValues = this.state.value.filter(val => val.data.id !== removedValue.data.id);
         this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -324,7 +329,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
 
       if (event.keyCode === 32 && !this.state.inputValue) {
         event.preventDefault();
-        this.setState({
+        !this.props.disableInput && this.setState({
           inputValue: ' '
         });
       }

package/dist/es2019/components/ExternalUserSourcesContainer.js

@@ -18,7 +18,10 @@ export const ExternalUserSourcesContainer = ({
     });
   }
 
-  return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+  return React.Children.map(children, child =>
+  /*#__PURE__*/
+  // @ts-expect-error
+  React.cloneElement(child, {
     sources,
     sourcesLoading
   }));

package/dist/es2019/components/Input.js

@@ -7,19 +7,21 @@ export class Input extends React.Component {
     super(...args);
 
     _defineProperty(this, "handleKeyPress", e => {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
   }
 
   render() {
-    const {
-      selectProps
-    } = this.props;
     return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
       innerRef: this.props.innerRef,
-      isDisabled: selectProps && selectProps.disableInput,
       onKeyPress: this.handleKeyPress
     }));
   }

package/dist/es2019/components/styles.js

@@ -9,7 +9,6 @@ export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
 const TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 const TAG_MARGIN_WIDTH = 4;
-const PLACEHOLDER_MARGIN = 2;
 export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
   let styles = {
     menu: (css, state) => ({ ...css,
@@ -130,7 +129,6 @@ export const getStyles = memoizeOne((width, isMulti, overrideStyles) => {
       /* Necessary to make input height and tag height the same. */
       marginBottom: TAG_MARGIN_WIDTH,
       marginTop: TAG_MARGIN_WIDTH,
-      marginLeft: PLACEHOLDER_MARGIN,
 
       /* Padding top and bottom of 2 is set by default. */
       paddingTop: 0,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.2",
 	"sideEffects": false
 }

package/dist/esm/components/BaseUserPicker.js

@@ -135,7 +135,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         });
 
         _this.setState({
-          value: remainingValues ? remainingValues : []
+          value: remainingValues ? remainingValues : [],
+          menuIsOpen: true
         });
       }
 
@@ -364,8 +365,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
 
       if (event.keyCode === 32 && !_this.state.inputValue) {
         event.preventDefault();
-
-        _this.setState({
+        !_this.props.disableInput && _this.setState({
           inputValue: ' '
         });
       }
@@ -584,6 +584,10 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     value: function getDerivedStateFromProps(nextProps, prevState) {
       var derivedState = {};
 
+      if (nextProps.isDisabled || nextProps.disableInput) {
+        derivedState.menuIsOpen = false;
+      }
+
       if (nextProps.open !== undefined) {
         derivedState.menuIsOpen = nextProps.open;
       }

package/dist/esm/components/ExternalUserSourcesContainer.js

@@ -18,9 +18,13 @@ export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(
   }
 
   return React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      sources: sources,
-      sourcesLoading: sourcesLoading
-    });
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error
+      React.cloneElement(child, {
+        sources: sources,
+        sourcesLoading: sourcesLoading
+      })
+    );
   });
 };

package/dist/esm/components/Input.js

@@ -30,9 +30,15 @@ export var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (e) {
+      var _this$props$selectPro;
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
+
+      if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
+        e.preventDefault();
+      }
     });
 
     return _this;
@@ -41,10 +47,8 @@ export var Input = /*#__PURE__*/function (_React$Component) {
   _createClass(Input, [{
     key: "render",
     value: function render() {
-      var selectProps = this.props.selectProps;
       return /*#__PURE__*/React.createElement(components.Input, _extends({}, this.props, {
         innerRef: this.props.innerRef,
-        isDisabled: selectProps && selectProps.disableInput,
         onKeyPress: this.handleKeyPress
       }));
     }

package/dist/esm/components/styles.js

@@ -19,7 +19,6 @@ export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
 var TOTAL_PADDING_TAG_TO_CONTAINER = 10;
 var TAG_MARGIN_WIDTH = 4;
-var PLACEHOLDER_MARGIN = 2;
 export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
   var styles = {
     menu: function menu(css, state) {
@@ -155,7 +154,6 @@ export var getStyles = memoizeOne(function (width, isMulti, overrideStyles) {
         /* Necessary to make input height and tag height the same. */
         marginBottom: TAG_MARGIN_WIDTH,
         marginTop: TAG_MARGIN_WIDTH,
-        marginLeft: PLACEHOLDER_MARGIN,
 
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "9.2.2",
+	"version": "9.3.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.2.2",
+  "version": "9.3.2",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/spinner": "^15.1.4",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -73,7 +73,7 @@
     "faker": "^4.1.0",
     "mock-apollo-client": "^0.1.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@repo/internal": {

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/user-picker"
+## API Report File for "@atlaskit/user-picker".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 import { Placement } from '@atlaskit/popper';