@atlaskit/user-picker 10.29.1 → 10.30.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/user-picker
 
+## 10.30.0
+
+### Minor Changes
+
+- [#101739](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101739)
+  [`b9f6cdeb8cfcb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9f6cdeb8cfcb) -
+  Add support for React 18
+
+## 10.29.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.29.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.29.1";
+var packageVersion = "10.30.0";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/AvatarItemOption.js

@@ -32,6 +32,7 @@ var wrapper = function wrapper(isDisabled) {
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1,
     outline: 'none',
     margin: 0,
@@ -46,6 +47,7 @@ var optionWrapper = (0, _react2.css)({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
 });

package/dist/cjs/components/BaseUserPicker.js

@@ -158,36 +158,33 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     (0, _defineProperty2.default)(_this, "debouncedLoadOptions", (0, _debounce.default)(function (search) {
       var loadOptions = _this.props.loadOptions;
       if (loadOptions) {
-        _this.setState(function (_ref3) {
-          var previousRequest = _ref3.inflightRequest;
-          var inflightRequest = previousRequest + 1;
-          var result = _this.session && _this.session.id ? loadOptions(search, _this.session.id) : loadOptions(search);
-          var addOptions = _this.addOptions.bind(_this, inflightRequest.toString());
-          var count = 0;
-          if ((0, _utils.isIterable)(result)) {
-            var _iterator = _createForOfIteratorHelper(result),
-              _step;
-            try {
-              for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                var _value = _step.value;
-                Promise.resolve(_value).then(addOptions).catch(_this.handleLoadOptionsError);
-                count++;
-              }
-            } catch (err) {
-              _iterator.e(err);
-            } finally {
-              _iterator.f();
+        var inflightRequest = _this.state.inflightRequest + 1;
+        var result = _this.session && _this.session.id ? loadOptions(search, _this.session.id) : loadOptions(search);
+        var addOptions = _this.addOptions.bind(_this, inflightRequest.toString());
+        var count = 0;
+        if ((0, _utils.isIterable)(result)) {
+          var _iterator = _createForOfIteratorHelper(result),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _value = _step.value;
+              Promise.resolve(_value).then(addOptions).catch(_this.handleLoadOptionsError);
+              count++;
             }
-          } else {
-            Promise.resolve(result).then(addOptions).catch(_this.handleLoadOptionsError);
-            count++;
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
           }
-          return {
-            inflightRequest: inflightRequest,
-            count: count,
-            resolving: count !== 0,
-            options: []
-          };
+        } else {
+          Promise.resolve(result).then(addOptions).catch(_this.handleLoadOptionsError);
+          count++;
+        }
+        _this.setState({
+          inflightRequest: inflightRequest,
+          count: count,
+          resolving: count !== 0,
+          options: []
         });
       }
     }, 200));
@@ -272,8 +269,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         options: []
       });
     });
-    (0, _defineProperty2.default)(_this, "handleInputChange", function (search, _ref4) {
-      var action = _ref4.action;
+    (0, _defineProperty2.default)(_this, "handleInputChange", function (search, _ref3) {
+      var action = _ref3.action;
       if (action === 'input-change' || action === 'set-value') {
         (0, _utils.callCallback)(_this.props.onInputChange, search, _this.getSessionId());
         _this.setState({

package/dist/cjs/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -18,6 +18,7 @@ var outerWrapper = function outerWrapper(isDisabled) {
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1,
     outline: 'none',
     margin: 0,
@@ -33,6 +34,7 @@ var detailsWrapper = (0, _react.css)({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   paddingLeft: "var(--ds-space-100, 8px)",
   alignItems: 'center'

package/dist/cjs/components/SingleValueContainer.js

@@ -27,6 +27,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var placeholderIconContainer = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   paddingLeft: _styles.BORDER_PADDING,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/cjs/components/UserPicker.js

@@ -39,7 +39,9 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
     _this = _callSuper(this, UserPickerWithoutAnalytics, [props]);
     _this.ufoId = (0, _uuid.v4)();
     var experienceForId = _ufoExperiences.userPickerRenderedUfoExperience.getInstance(_this.ufoId);
-    experienceForId.start();
+    if (![_ufo.UFOExperienceState.IN_PROGRESS.id, _ufo.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
+      experienceForId.start();
+    }
     return _this;
   }
   (0, _inherits2.default)(UserPickerWithoutAnalytics, _React$Component);

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.29.1";
+const packageVersion = "10.30.0";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/AvatarItemOption.js

@@ -16,6 +16,7 @@ const wrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
   outline: 'none',
   margin: 0,
@@ -29,6 +30,7 @@ const optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
 });

package/dist/es2019/components/BaseUserPicker.js

@@ -157,28 +157,24 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         loadOptions
       } = this.props;
       if (loadOptions) {
-        this.setState(({
-          inflightRequest: previousRequest
-        }) => {
-          const inflightRequest = previousRequest + 1;
-          const result = this.session && this.session.id ? loadOptions(search, this.session.id) : loadOptions(search);
-          const addOptions = this.addOptions.bind(this, inflightRequest.toString());
-          let count = 0;
-          if (isIterable(result)) {
-            for (const value of result) {
-              Promise.resolve(value).then(addOptions).catch(this.handleLoadOptionsError);
-              count++;
-            }
-          } else {
-            Promise.resolve(result).then(addOptions).catch(this.handleLoadOptionsError);
+        const inflightRequest = this.state.inflightRequest + 1;
+        const result = this.session && this.session.id ? loadOptions(search, this.session.id) : loadOptions(search);
+        const addOptions = this.addOptions.bind(this, inflightRequest.toString());
+        let count = 0;
+        if (isIterable(result)) {
+          for (const value of result) {
+            Promise.resolve(value).then(addOptions).catch(this.handleLoadOptionsError);
             count++;
           }
-          return {
-            inflightRequest,
-            count,
-            resolving: count !== 0,
-            options: []
-          };
+        } else {
+          Promise.resolve(result).then(addOptions).catch(this.handleLoadOptionsError);
+          count++;
+        }
+        this.setState({
+          inflightRequest,
+          count,
+          resolving: count !== 0,
+          options: []
         });
       }
     }, 200));

package/dist/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -10,6 +10,7 @@ const outerWrapper = isDisabled => css({
   alignItems: 'center',
   boxSizing: 'border-box',
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
   outline: 'none',
   margin: 0,
@@ -24,6 +25,7 @@ const detailsWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   paddingLeft: "var(--ds-space-100, 8px)",
   alignItems: 'center'

package/dist/es2019/components/SingleValueContainer.js

@@ -13,6 +13,7 @@ import ValueContainerWrapper from './ValueContainerWrapper';
 const placeholderIconContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   paddingLeft: BORDER_PADDING,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/es2019/components/UserPicker.js

@@ -18,7 +18,9 @@ export class UserPickerWithoutAnalytics extends React.Component {
     super(props);
     this.ufoId = uuidv4();
     const experienceForId = experience.getInstance(this.ufoId);
-    experienceForId.start();
+    if (![UFOExperienceState.IN_PROGRESS.id, UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
+      experienceForId.start();
+    }
   }
   componentDidMount() {
     const experienceForId = experience.getInstance(this.ufoId);

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.29.1";
+var packageVersion = "10.30.0";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/AvatarItemOption.js

@@ -22,6 +22,7 @@ var wrapper = function wrapper(isDisabled) {
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1,
     outline: 'none',
     margin: 0,
@@ -36,6 +37,7 @@ var optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
 });

package/dist/esm/components/BaseUserPicker.js

@@ -151,36 +151,33 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     _defineProperty(_this, "debouncedLoadOptions", debounce(function (search) {
       var loadOptions = _this.props.loadOptions;
       if (loadOptions) {
-        _this.setState(function (_ref3) {
-          var previousRequest = _ref3.inflightRequest;
-          var inflightRequest = previousRequest + 1;
-          var result = _this.session && _this.session.id ? loadOptions(search, _this.session.id) : loadOptions(search);
-          var addOptions = _this.addOptions.bind(_this, inflightRequest.toString());
-          var count = 0;
-          if (isIterable(result)) {
-            var _iterator = _createForOfIteratorHelper(result),
-              _step;
-            try {
-              for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                var _value = _step.value;
-                Promise.resolve(_value).then(addOptions).catch(_this.handleLoadOptionsError);
-                count++;
-              }
-            } catch (err) {
-              _iterator.e(err);
-            } finally {
-              _iterator.f();
+        var inflightRequest = _this.state.inflightRequest + 1;
+        var result = _this.session && _this.session.id ? loadOptions(search, _this.session.id) : loadOptions(search);
+        var addOptions = _this.addOptions.bind(_this, inflightRequest.toString());
+        var count = 0;
+        if (isIterable(result)) {
+          var _iterator = _createForOfIteratorHelper(result),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _value = _step.value;
+              Promise.resolve(_value).then(addOptions).catch(_this.handleLoadOptionsError);
+              count++;
             }
-          } else {
-            Promise.resolve(result).then(addOptions).catch(_this.handleLoadOptionsError);
-            count++;
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
           }
-          return {
-            inflightRequest: inflightRequest,
-            count: count,
-            resolving: count !== 0,
-            options: []
-          };
+        } else {
+          Promise.resolve(result).then(addOptions).catch(_this.handleLoadOptionsError);
+          count++;
+        }
+        _this.setState({
+          inflightRequest: inflightRequest,
+          count: count,
+          resolving: count !== 0,
+          options: []
         });
       }
     }, 200));
@@ -265,8 +262,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         options: []
       });
     });
-    _defineProperty(_this, "handleInputChange", function (search, _ref4) {
-      var action = _ref4.action;
+    _defineProperty(_this, "handleInputChange", function (search, _ref3) {
+      var action = _ref3.action;
       if (action === 'input-change' || action === 'set-value') {
         callCallback(_this.props.onInputChange, search, _this.getSessionId());
         _this.setState({

package/dist/esm/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -14,6 +14,7 @@ var outerWrapper = function outerWrapper(isDisabled) {
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 1,
     outline: 'none',
     margin: 0,
@@ -29,6 +30,7 @@ var detailsWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
   flex: '1 1 100%',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1.4,
   paddingLeft: "var(--ds-space-100, 8px)",
   alignItems: 'center'

package/dist/esm/components/SingleValueContainer.js

@@ -22,6 +22,7 @@ import ValueContainerWrapper from './ValueContainerWrapper';
 var placeholderIconContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   paddingLeft: BORDER_PADDING,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/esm/components/UserPicker.js

@@ -29,7 +29,9 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
     _this = _callSuper(this, UserPickerWithoutAnalytics, [props]);
     _this.ufoId = uuidv4();
     var experienceForId = experience.getInstance(_this.ufoId);
-    experienceForId.start();
+    if (![UFOExperienceState.IN_PROGRESS.id, UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
+      experienceForId.start();
+    }
     return _this;
   }
   _inherits(UserPickerWithoutAnalytics, _React$Component);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.29.1",
+	"version": "10.30.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,6 +29,7 @@
 		"./types": "./src/types.ts"
 	},
 	"atlassian": {
+		"runReact18": true,
 		"team": "Search Platform: Search Experience",
 		"slack": {
 			"channel": "#search-plex-prs",
@@ -48,7 +49,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.2.0",
 		"@atlaskit/avatar": "^21.17.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/logo": "^15.1.0",
 		"@atlaskit/lozenge": "^11.12.0",
 		"@atlaskit/people-teams-ui-public": "^2.0.0",
@@ -59,7 +60,7 @@
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/teams-avatar": "^1.1.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.1.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -69,8 +70,8 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
+		"react": "^16.8.0 || ^17.0.0 || ^18.2.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {

package/tsconfig.json

@@ -9,6 +9,5 @@
     "./examples/**/*.tsx"
   ],
   "compilerOptions": {
-    "baseUrl": "./"
   }
 }