@atlaskit/renderer 109.41.0 → 109.42.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.42.0
+
+### Minor Changes
+
+- [#118585](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118585)
+  [`88aa7acfd24eb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/88aa7acfd24eb) -
+  refactor: remove all UNSAFE\_ react APIs from @atlaskit/renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.41.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/task-item-with-providers.js

@@ -1,116 +1,65 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.default = TaskItemWithProviders;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
 var _taskDecision = require("@atlaskit/task-decision");
 var _excluded = ["contextIdentifierProvider", "objectAri", "isRenderer"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var TaskItemWithProviders = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TaskItemWithProviders, _Component);
-  var _super = _createSuper(TaskItemWithProviders);
-  function TaskItemWithProviders() {
-    var _this;
-    (0, _classCallCheck2.default)(this, TaskItemWithProviders);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      resolvedContextProvider: undefined
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(TaskItemWithProviders, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.updateContextIdentifierProvider(this.props);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.contextIdentifierProvider !== this.props.contextIdentifierProvider) {
-        this.updateContextIdentifierProvider(nextProps);
-      }
-    }
-  }, {
-    key: "updateContextIdentifierProvider",
-    value: function () {
-      var _updateContextIdentifierProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(props) {
-        var resolvedContextProvider;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!props.contextIdentifierProvider) {
-                _context.next = 13;
-                break;
-              }
-              _context.prev = 1;
-              _context.next = 4;
-              return props.contextIdentifierProvider;
-            case 4:
-              resolvedContextProvider = _context.sent;
-              this.setState({
-                resolvedContextProvider: resolvedContextProvider
-              });
+function TaskItemWithProviders(props) {
+  var contextIdentifierProvider = props.contextIdentifierProvider,
+    objectAri = props.objectAri,
+    isRenderer = props.isRenderer,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _React$useState = _react.default.useState(undefined),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    resolvedContextProvider = _React$useState2[0],
+    setResolvedContextProvider = _React$useState2[1];
+  var updateContextIdentifierProvider = _react.default.useCallback( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(contextIdentifierProvider) {
+      var _resolvedContextProvider;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!contextIdentifierProvider) {
               _context.next = 11;
               break;
-            case 8:
-              _context.prev = 8;
-              _context.t0 = _context["catch"](1);
-              this.setState({
-                resolvedContextProvider: undefined
-              });
-            case 11:
-              _context.next = 14;
-              break;
-            case 13:
-              this.setState({
-                resolvedContextProvider: undefined
-              });
-            case 14:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this, [[1, 8]]);
-      }));
-      function updateContextIdentifierProvider(_x) {
-        return _updateContextIdentifierProvider.apply(this, arguments);
-      }
-      return updateContextIdentifierProvider;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        contextIdentifierProvider = _this$props.contextIdentifierProvider,
-        objectAri = _this$props.objectAri,
-        isRenderer = _this$props.isRenderer,
-        otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
-      return /*#__PURE__*/_react.default.createElement(_taskDecision.ResourcedTaskItem, (0, _extends2.default)({}, otherProps, {
-        objectAri: resolvedObjectId,
-        isRenderer: isRenderer
-      }));
-    }
-  }]);
-  return TaskItemWithProviders;
-}(_react.Component);
+            }
+            _context.prev = 1;
+            _context.next = 4;
+            return contextIdentifierProvider;
+          case 4:
+            _resolvedContextProvider = _context.sent;
+            setResolvedContextProvider(_resolvedContextProvider);
+            return _context.abrupt("return");
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
+          case 11:
+            setResolvedContextProvider(undefined);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 9]]);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  _react.default.useMemo(function () {
+    updateContextIdentifierProvider(props.contextIdentifierProvider);
+  }, [props.contextIdentifierProvider, updateContextIdentifierProvider]);
+  var resolvedObjectId = resolvedContextProvider && resolvedContextProvider.objectId || objectAri;
+  return /*#__PURE__*/_react.default.createElement(_taskDecision.ResourcedTaskItem, (0, _extends2.default)({}, otherProps, {
+    objectAri: resolvedObjectId,
+    isRenderer: isRenderer
+  }));
+}

package/dist/cjs/ui/ExtensionRenderer.js

@@ -5,14 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = ExtensionRenderer;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -22,8 +16,9 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var inlineExtensionStyle = (0, _react.css)({
   display: 'inline-block',
   maxWidth: '100%',
@@ -35,123 +30,103 @@ var inlineExtensionStyle = (0, _react.css)({
     maxWidth: '100%'
   }
 });
-var ExtensionRenderer = exports.default = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ExtensionRenderer, _React$Component);
-  var _super = _createSuper(ExtensionRenderer);
-  function ExtensionRenderer() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ExtensionRenderer);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      extensionProvider: null
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleProvider", function (name, providerPromise) {
-      providerPromise && providerPromise.then(function (provider) {
-        if (_this.mounted) {
-          _this.setState((0, _defineProperty2.default)({}, name, provider));
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
-      var _marks$find;
-      var _this$props = _this.props,
-        extensionHandlers = _this$props.extensionHandlers,
-        rendererContext = _this$props.rendererContext,
-        extensionType = _this$props.extensionType,
-        extensionKey = _this$props.extensionKey,
-        parameters = _this$props.parameters,
-        content = _this$props.content,
-        text = _this$props.text,
-        type = _this$props.type,
-        localId = _this$props.localId,
-        marks = _this$props.marks,
-        actions = _this$props.actions;
-      var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
-        return m.type.name === 'fragment';
-      })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
-      var node = {
-        type: type,
-        extensionKey: extensionKey,
-        extensionType: extensionType,
-        parameters: parameters,
-        content: content || text,
-        localId: localId,
-        fragmentLocalId: fragmentLocalId
-      };
-      var result = null;
-      try {
-        if (extensionHandlers && extensionHandlers[extensionType]) {
-          var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
-          result = render(node, rendererContext.adDoc);
-        }
-        if (!result && extensionProvider) {
-          var NodeRenderer = _this.getNodeRenderer(extensionProvider, extensionType, extensionKey);
-          if (node.type === 'multiBodiedExtension') {
-            result = (0, _react.jsx)(NodeRenderer, {
-              node: node,
-              actions: actions
-            });
-          } else if (node.type === 'inlineExtension') {
-            result = (0, _react.jsx)(InlineNodeRendererWrapper, null, (0, _react.jsx)(NodeRenderer, {
-              node: node
-            }));
-          } else {
-            result = (0, _react.jsx)(NodeRenderer, {
-              node: node
-            });
-          }
-        }
-      } catch (e) {
-        /** We don't want this error to block renderer */
-        /** We keep rendering the default content */
+function ExtensionRenderer(props) {
+  var extensionHandlers = props.extensionHandlers,
+    rendererContext = props.rendererContext,
+    extensionType = props.extensionType,
+    extensionKey = props.extensionKey,
+    parameters = props.parameters,
+    content = props.content,
+    text = props.text,
+    type = props.type,
+    localId = props.localId,
+    marks = props.marks,
+    actions = props.actions,
+    children = props.children;
+  var isMounted = _react2.default.useRef(true);
+  var localGetNodeRenderer = _react2.default.useMemo(function () {
+    return (0, _memoizeOne.default)(_extensions.getNodeRenderer);
+  }, []);
+  var _React$useState = _react2.default.useState(null),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    extensionProvider = _React$useState2[0],
+    setExtensionProvider = _React$useState2[1];
+  var handleProvider = _react2.default.useCallback(function (name, providerPromise) {
+    providerPromise && providerPromise.then(function (provider) {
+      if (isMounted.current) {
+        setExtensionProvider(provider);
       }
-      return _this.props.children({
-        result: result
-      });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setupAndRenderExtensionNode", function (providers) {
-      var extensionProvider = _this.state.extensionProvider;
-      if (!extensionProvider && providers.extensionProvider) {
-        _this.handleProvider('extensionProvider', providers.extensionProvider);
+  }, []);
+  var renderExtensionNode = _react2.default.useCallback(function (extensionProvider) {
+    var _marks$find;
+    var fragmentLocalId = marks === null || marks === void 0 || (_marks$find = marks.find(function (m) {
+      return m.type.name === 'fragment';
+    })) === null || _marks$find === void 0 || (_marks$find = _marks$find.attrs) === null || _marks$find === void 0 ? void 0 : _marks$find.localId;
+    var node = {
+      type: type,
+      extensionKey: extensionKey,
+      extensionType: extensionType,
+      parameters: parameters,
+      content: content || text,
+      localId: localId,
+      fragmentLocalId: fragmentLocalId
+    };
+    var result = null;
+    try {
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        var render = (0, _utils.getExtensionRenderer)(extensionHandlers[extensionType]);
+        result = render(node, rendererContext.adDoc);
       }
-      return _this.renderExtensionNode(extensionProvider);
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(ExtensionRenderer, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.mounted = true;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var providers = this.props.providers;
-      if (!providers) {
-        return this.setupAndRenderExtensionNode({});
+      if (!result && extensionProvider) {
+        var NodeRenderer = localGetNodeRenderer(extensionProvider, extensionType, extensionKey);
+        if (node.type === 'multiBodiedExtension') {
+          result = (0, _react.jsx)(NodeRenderer, {
+            node: node,
+            actions: actions
+          });
+        } else if (node.type === 'inlineExtension') {
+          result = (0, _react.jsx)(InlineNodeRendererWrapper, null, (0, _react.jsx)(NodeRenderer, {
+            node: node
+          }));
+        } else {
+          result = (0, _react.jsx)(NodeRenderer, {
+            node: node
+          });
+        }
       }
-      return (0, _react.jsx)(_providerFactory.WithProviders, {
-        providers: ['extensionProvider'],
-        providerFactory: providers,
-        renderNode: this.setupAndRenderExtensionNode
-      });
+    } catch (e) {
+      /** We don't want this error to block renderer */
+      /** We keep rendering the default content */
     }
-  }]);
-  return ExtensionRenderer;
-}(_react2.default.Component);
+    return children({
+      result: result
+    });
+  }, [actions, children, content, extensionHandlers, extensionKey, extensionType, localGetNodeRenderer, localId, marks, parameters, rendererContext === null || rendererContext === void 0 ? void 0 : rendererContext.adDoc, text, type]);
+  var setupAndRenderExtensionNode = _react2.default.useCallback(function (providers) {
+    if (!extensionProvider && providers.extensionProvider) {
+      handleProvider('extensionProvider', providers.extensionProvider);
+    }
+    return renderExtensionNode(extensionProvider);
+  }, [extensionProvider, handleProvider, renderExtensionNode]);
+  _react2.default.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
+  if (!props.providers) {
+    return setupAndRenderExtensionNode({});
+  }
+  return (0, _react.jsx)(_providerFactory.WithProviders, {
+    providers: ['extensionProvider'],
+    providerFactory: props.providers,
+    renderNode: setupAndRenderExtensionNode
+  });
+}
 var InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
   var children = _ref.children;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn')) {
+  if ((0, _platformFeatureFlags.fg)('platform.editor.inline_extension.extended_lcqdn')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       (0, _react.jsx)("div", {

package/dist/cjs/ui/MediaCard.js

@@ -182,11 +182,11 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       return componentDidMount;
     }()
   }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var newId = newProps.id;
-      if (newId && newId !== this.props.id) {
-        this.saveFileState(newId);
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var oldId = prevProps.id;
+      if (this.props.id && oldId !== this.props.id) {
+        this.saveFileState(this.props.id);
       }
     }
   }, {

package/dist/cjs/ui/Renderer/index.js

@@ -56,7 +56,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.41.0";
+var packageVersion = "109.42.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/es2019/react/nodes/task-item-with-providers.js

@@ -1,52 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { Component } from 'react';
 import { ResourcedTaskItem } from '@atlaskit/task-decision';
-export default class TaskItemWithProviders extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      resolvedContextProvider: undefined
-    });
-  }
-  UNSAFE_componentWillMount() {
-    this.updateContextIdentifierProvider(this.props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.contextIdentifierProvider !== this.props.contextIdentifierProvider) {
-      this.updateContextIdentifierProvider(nextProps);
-    }
-  }
-  async updateContextIdentifierProvider(props) {
-    if (props.contextIdentifierProvider) {
+export default function TaskItemWithProviders(props) {
+  const {
+    contextIdentifierProvider,
+    objectAri,
+    isRenderer,
+    ...otherProps
+  } = props;
+  const [resolvedContextProvider, setResolvedContextProvider] = React.useState(undefined);
+  const updateContextIdentifierProvider = React.useCallback(async contextIdentifierProvider => {
+    if (contextIdentifierProvider) {
       try {
-        const resolvedContextProvider = await props.contextIdentifierProvider;
-        this.setState({
-          resolvedContextProvider
-        });
-      } catch (err) {
-        this.setState({
-          resolvedContextProvider: undefined
-        });
-      }
-    } else {
-      this.setState({
-        resolvedContextProvider: undefined
-      });
+        const resolvedContextProvider = await contextIdentifierProvider;
+        setResolvedContextProvider(resolvedContextProvider);
+        return;
+      } catch (err) {}
     }
-  }
-  render() {
-    const {
-      contextIdentifierProvider,
-      objectAri,
-      isRenderer,
-      ...otherProps
-    } = this.props;
-    const resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
-    return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
-      objectAri: resolvedObjectId,
-      isRenderer: isRenderer
-    }));
-  }
+    setResolvedContextProvider(undefined);
+  }, []);
+  React.useMemo(() => {
+    updateContextIdentifierProvider(props.contextIdentifierProvider);
+  }, [props.contextIdentifierProvider, updateContextIdentifierProvider]);
+  const resolvedObjectId = resolvedContextProvider && resolvedContextProvider.objectId || objectAri;
+  return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
+    objectAri: resolvedObjectId,
+    isRenderer: isRenderer
+  }));
 }