@atlaskit/smart-user-picker 12.3.0 → 12.3.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlassian/smart-user-picker
 
+## 12.3.1
+
+### Patch Changes
+
+- [`5ea0eed463aca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ea0eed463aca) -
+  Use hook-based analytics and an explicit error-boundary fallback, preserving UFO failure reporting
+  and retries on parent updates.
+
 ## 12.3.0
 
 ### Minor Changes

package/dist/cjs/UfoErrorBoundary.js

@@ -10,14 +10,24 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _ufoExperiences = require("./ufoExperiences");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   function UfoErrorBoundary() {
+    var _this;
     (0, _classCallCheck2.default)(this, UfoErrorBoundary);
-    return _callSuper(this, UfoErrorBoundary, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, UfoErrorBoundary, [].concat(args));
+    (0, _defineProperty2.default)(_this, "state", {
+      hasError: false,
+      previousProps: _this.props
+    });
+    return _this;
   }
   (0, _inherits2.default)(UfoErrorBoundary, _React$Component);
   return (0, _createClass2.default)(UfoErrorBoundary, [{
@@ -28,7 +38,24 @@ var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$
   }, {
     key: "render",
     value: function render() {
-      return this.props.children;
+      return this.state.hasError ? null : this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      // Preserve the original boundary's retry on parent updates, even when children are memoized.
+      // Error recovery uses the same props, so it must retain the fallback instead of retrying.
+      return props !== state.previousProps ? {
+        hasError: false,
+        previousProps: props
+      } : null;
+    }
+  }, {
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
     }
   }]);
 }(_react.default.Component);

package/dist/cjs/components/SmartUserPicker.js

@@ -22,7 +22,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _reactIntl = require("react-intl");
 var _uuid = require("uuid");
-var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _experienceState = require("@atlaskit/ufo/experience-state");
 var _emailValidation = require("@atlaskit/user-picker/components/email-validation");
@@ -639,7 +639,7 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
       })));
     }
   }]);
-}(_react.default.Component); // TODO: Smart User picker team will have to add a type annotation here
+}(_react.default.Component);
 (0, _defineProperty2.default)(SmartUserPickerWithoutAnalytics, "defaultProps", {
   baseUrl: '',
   includeUsers: true,
@@ -656,4 +656,13 @@ var SmartUserPickerWithoutAnalytics = exports.SmartUserPickerWithoutAnalytics =
   allowEmailSelectionWhenEmailMatched: true,
   verifiedTeams: false
 });
-var SmartUserPicker = exports.SmartUserPicker = (0, _withAnalyticsEvents.default)()((0, _reactIntl.injectIntl)(SmartUserPickerWithoutAnalytics));
+var SmartUserPickerWithIntl = (0, _reactIntl.injectIntl)(SmartUserPickerWithoutAnalytics);
+// TODO: Smart User picker team will have to add a type annotation here
+var SmartUserPicker = exports.SmartUserPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  return /*#__PURE__*/_react.default.createElement(SmartUserPickerWithIntl, (0, _extends2.default)({}, props, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    ref: ref
+  }));
+});

package/dist/cjs/packageVersion.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.packageVersion = void 0;
-var packageVersion = exports.packageVersion = "12.2.0";
+var packageVersion = exports.packageVersion = "12.3.0";

package/dist/es2019/UfoErrorBoundary.js

@@ -1,10 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { smartUserPickerRenderedUfoExperience } from './ufoExperiences';
 export class UfoErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      hasError: false,
+      previousProps: this.props
+    });
+  }
+  static getDerivedStateFromProps(props, state) {
+    // Preserve the original boundary's retry on parent updates, even when children are memoized.
+    // Error recovery uses the same props, so it must retain the fallback instead of retrying.
+    return props !== state.previousProps ? {
+      hasError: false,
+      previousProps: props
+    } : null;
+  }
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
   componentDidCatch() {
     smartUserPickerRenderedUfoExperience.getInstance(this.props.id).failure();
   }
   render() {
-    return this.props.children;
+    return this.state.hasError ? null : this.props.children;
   }
 }

package/dist/es2019/components/SmartUserPicker.js

@@ -6,7 +6,7 @@ import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidV4 } from 'uuid';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
 import { isValidEmail } from '@atlaskit/user-picker/components/email-validation';
@@ -493,8 +493,6 @@ export class SmartUserPickerWithoutAnalytics extends React.Component {
     })));
   }
 }
-
-// TODO: Smart User picker team will have to add a type annotation here
 _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   baseUrl: '',
   includeUsers: true,
@@ -511,4 +509,14 @@ _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   allowEmailSelectionWhenEmailMatched: true,
   verifiedTeams: false
 });
-export const SmartUserPicker = withAnalyticsEvents()(injectIntl(SmartUserPickerWithoutAnalytics));
+const SmartUserPickerWithIntl = injectIntl(SmartUserPickerWithoutAnalytics);
+// TODO: Smart User picker team will have to add a type annotation here
+export const SmartUserPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(SmartUserPickerWithIntl, _extends({}, props, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    ref: ref
+  }));
+});

package/dist/es2019/packageVersion.js

@@ -1 +1 @@
-export const packageVersion = "12.2.0";
+export const packageVersion = "12.3.0";

package/dist/esm/UfoErrorBoundary.js

@@ -3,14 +3,24 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { smartUserPickerRenderedUfoExperience } from './ufoExperiences';
 export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   function UfoErrorBoundary() {
+    var _this;
     _classCallCheck(this, UfoErrorBoundary);
-    return _callSuper(this, UfoErrorBoundary, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, UfoErrorBoundary, [].concat(args));
+    _defineProperty(_this, "state", {
+      hasError: false,
+      previousProps: _this.props
+    });
+    return _this;
   }
   _inherits(UfoErrorBoundary, _React$Component);
   return _createClass(UfoErrorBoundary, [{
@@ -21,7 +31,24 @@ export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return this.props.children;
+      return this.state.hasError ? null : this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      // Preserve the original boundary's retry on parent updates, even when children are memoized.
+      // Error recovery uses the same props, so it must retain the fallback instead of retrying.
+      return props !== state.previousProps ? {
+        hasError: false,
+        previousProps: props
+      } : null;
+    }
+  }, {
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
     }
   }]);
 }(React.Component);

package/dist/esm/components/SmartUserPicker.js

@@ -24,7 +24,7 @@ import memoizeOne from 'memoize-one';
 import { injectIntl } from 'react-intl';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import { v4 as uuidV4 } from 'uuid';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
 import { isValidEmail } from '@atlaskit/user-picker/components/email-validation';
@@ -634,8 +634,6 @@ export var SmartUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
     }
   }]);
 }(React.Component);
-
-// TODO: Smart User picker team will have to add a type annotation here
 _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   baseUrl: '',
   includeUsers: true,
@@ -652,4 +650,13 @@ _defineProperty(SmartUserPickerWithoutAnalytics, "defaultProps", {
   allowEmailSelectionWhenEmailMatched: true,
   verifiedTeams: false
 });
-export var SmartUserPicker = withAnalyticsEvents()(injectIntl(SmartUserPickerWithoutAnalytics));
+var SmartUserPickerWithIntl = injectIntl(SmartUserPickerWithoutAnalytics);
+// TODO: Smart User picker team will have to add a type annotation here
+export var SmartUserPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  return /*#__PURE__*/React.createElement(SmartUserPickerWithIntl, _extends({}, props, {
+    createAnalyticsEvent: createAnalyticsEvent,
+    ref: ref
+  }));
+});

package/dist/esm/packageVersion.js

@@ -1 +1 @@
-export var packageVersion = "12.2.0";
+export var packageVersion = "12.3.0";

package/dist/types/UfoErrorBoundary.d.ts

@@ -1,7 +1,16 @@
 import React from 'react';
-export declare class UfoErrorBoundary extends React.Component<React.PropsWithChildren<{
+type Props = React.PropsWithChildren<{
     id: string;
-}>> {
+}>;
+type State = {
+    hasError: boolean;
+    previousProps: Props;
+};
+export declare class UfoErrorBoundary extends React.Component<Props, State> {
+    state: State;
+    static getDerivedStateFromProps(props: Props, state: State): State | null;
+    static getDerivedStateFromError(): Partial<State>;
     componentDidCatch(): void;
     render(): React.ReactNode;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-user-picker",
-	"version": "12.3.0",
+	"version": "12.3.1",
 	"license": "Apache-2.0",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-smart-experiences-smart-user-picker": "2.272.0",
-		"@atlaskit/analytics-next": "^12.5.0",
+		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/user-picker": "^14.1.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/util-data-test": "^19.1.0",
 		"@atlassian/a11y-jest-testing": "^0.17.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
-		"@atlassian/integrations": "^34.3.0",
+		"@atlassian/integrations": "^34.5.0",
 		"@atlassian/workbench": "workspace:*",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^16.3.0",