@atlaskit/collab-provider 10.14.4 → 10.16.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/collab-provider
 
+## 10.16.0
+
+### Minor Changes
+
+- [#158254](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158254)
+  [`9ce9448c0e11a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ce9448c0e11a) -
+  Add auto-close for Presence connections when window is in background
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.15.0
+
+### Minor Changes
+
+- [#157909](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157909)
+  [`384136c930190`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/384136c930190) -
+  Add support for initializing collab-provider with presenceActivity
+
 ## 10.14.4
 
 ### Patch Changes

package/dist/cjs/channel.js

@@ -25,6 +25,8 @@ var _network = _interopRequireDefault(require("./connectivity/network"));
 var _internalErrors = require("./errors/internal-errors");
 var _ncsErrors = require("./errors/ncs-errors");
 var _customErrors = require("./errors/custom-errors");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _bindEventListener = require("bind-event-listener");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -418,6 +420,40 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
         (_this$socket3 = _this.socket) === null || _this$socket3 === void 0 || _this$socket3.connect();
       }
     });
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    (0, _defineProperty2.default)(_this, "cleanupAutoDisconnect", function () {
+      _this.unbindVisibilityListener();
+      if (_this.disconnectTimer) {
+        clearTimeout(_this.disconnectTimer);
+        _this.disconnectTimer = undefined;
+      }
+    });
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    (0, _defineProperty2.default)(_this, "unbindVisibilityListener", function () {});
+    (0, _defineProperty2.default)(_this, "autoDisconnect", function (disconnectTimer, disconnectDelay) {
+      if (document.hidden) {
+        logger('visibilitychange: hidden');
+        return setTimeout(function () {
+          var _this$socket4;
+          logger('visibilitychange: closing connection');
+          (_this$socket4 = _this.socket) === null || _this$socket4 === void 0 || _this$socket4.close();
+        }, disconnectDelay || disconnectDelay === 0 ? disconnectDelay * 1000 : 60 * 1000);
+      } else {
+        var _this$socket5;
+        logger('visibilitychange: visible');
+        if (disconnectTimer) {
+          clearTimeout(disconnectTimer);
+        }
+        logger('visibilitychange: re-connecting');
+        (_this$socket5 = _this.socket) === null || _this$socket5 === void 0 || _this$socket5.connect();
+        return;
+      }
+    });
     _this.config = config;
     _this.analyticsHelper = analyticsHelper;
     _this.initExperience = (0, _ufo.createDocInitExp)(_this.analyticsHelper);
@@ -651,6 +687,10 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
       this.reconnectHelper = new _reconnectHelper.default();
       // Fired upon a reconnection attempt error (from Socket.IO Manager)
       this.socket.io.on('reconnect_error', this.onReconnectError);
+
+      // Automatic disconnect on tab background with delay, to keep presence UX accurate
+      // and reduce wasted connections. Reconnects upon tab becoming active again
+      this.addVisiblityListener();
     }
 
     // Ignored via go/ees005
@@ -775,11 +815,32 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
     value: function isLimitExceeded(stepLimit, stepSizeLimit, maxStepSizeLimit) {
       return stepLimit > 0 && this.stepCounter > stepLimit || stepSizeLimit > 0 && this.stepSizeCounter > stepSizeLimit || maxStepSizeLimit > 0 && this.maxStepSize > maxStepSizeLimit;
     }
+  }, {
+    key: "addVisiblityListener",
+    value:
+    /**
+     * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+     */
+    function addVisiblityListener() {
+      var _FeatureGates$getExpe,
+        _this3 = this;
+      var disconnectDelay = (_FeatureGates$getExpe = _featureGateJsClient.default.getExperimentValue('platform_editor_connection_auto_disconnect_delay', 'delay', -1)) !== null && _FeatureGates$getExpe !== void 0 ? _FeatureGates$getExpe : -1;
+      var isAutoDisconnectEnabled = disconnectDelay >= 0;
+      if (isAutoDisconnectEnabled && this.config.isPresenceOnly) {
+        this.unbindVisibilityListener = (0, _bindEventListener.bind)(document, {
+          type: 'visibilitychange',
+          listener: function listener() {
+            _this3.disconnectTimer = _this3.autoDisconnect(_this3.disconnectTimer, disconnectDelay);
+          }
+        });
+      }
+    }
   }, {
     key: "disconnect",
     value: function disconnect() {
       var _this$network;
       this.unsubscribeAll();
+      this.cleanupAutoDisconnect();
       (_this$network = this.network) === null || _this$network === void 0 || _this$network.destroy();
       this.network = null;
       if (this.socket) {

package/dist/cjs/participants/participants-helper.js

@@ -49,13 +49,26 @@ var createParticipantFromPayload = exports.createParticipantFromPayload = /*#__P
     return _ref.apply(this, arguments);
   };
 }();
+
+/**
+ * Will use the getUsers callback from batchProps to fetch users
+ *
+ * 1. Determine all the participants that need to be hydrated
+ * 2. Only fetch a subset of those participants based on batchSize
+ * 3. Of the users fetched, find all of those users' sessions and mark those entries as hydrated
+ *
+ * @param participantsState
+ * @param batchProps
+ * @returns
+ * @example
+ */
 var fetchParticipants = exports.fetchParticipants = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(participantsState, batchProps) {
     var _batchProps$batchSize, batchSize, getUsers, participantsToHydrate, participants, aaids, users, hydratedParticipants;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _batchProps$batchSize = batchProps.batchSize, batchSize = _batchProps$batchSize === void 0 ? batchProps.batchSize || DEFAULT_BATCH_FETCH_SIZE : _batchProps$batchSize, getUsers = batchProps.getUsers;
+          _batchProps$batchSize = batchProps.batchSize, batchSize = _batchProps$batchSize === void 0 ? DEFAULT_BATCH_FETCH_SIZE : _batchProps$batchSize, getUsers = batchProps.getUsers;
           participantsToHydrate = participantsState.getUniqueParticipants({
             isHydrated: false
           });
@@ -81,24 +94,22 @@ var fetchParticipants = exports.fetchParticipants = /*#__PURE__*/function () {
               return p.userId === user.userId;
             }).forEach(function (participant) {
               var sessionId = participant.sessionId;
-              if (participant && sessionId) {
-                var hydratedParticipant = {
-                  name: (user === null || user === void 0 ? void 0 : user.name) || '',
-                  avatar: (user === null || user === void 0 ? void 0 : user.avatar) || '',
-                  email: (user === null || user === void 0 ? void 0 : user.email) || '',
-                  sessionId: sessionId,
-                  lastActive: participant.lastActive,
-                  userId: user.userId,
-                  clientId: participant.clientId,
-                  permit: participant.permit,
-                  isGuest: user === null || user === void 0 ? void 0 : user.isGuest,
-                  presenceId: participant.presenceId,
-                  presenceActivity: participant.presenceActivity,
-                  isHydrated: true
-                };
-                participantsState.setBySessionId(sessionId, hydratedParticipant);
-                hydratedParticipants.push(hydratedParticipant);
-              }
+              var hydratedParticipant = {
+                name: user.name,
+                avatar: user.avatar,
+                email: user.email,
+                userId: user.userId,
+                isGuest: user.isGuest,
+                sessionId: sessionId,
+                lastActive: participant.lastActive,
+                clientId: participant.clientId,
+                permit: participant.permit,
+                presenceId: participant.presenceId,
+                presenceActivity: participant.presenceActivity,
+                isHydrated: true
+              };
+              participantsState.setBySessionId(sessionId, hydratedParticipant);
+              hydratedParticipants.push(hydratedParticipant);
             });
           });
           return _context2.abrupt("return", hydratedParticipants);

package/dist/cjs/participants/participants-service.js

@@ -33,6 +33,20 @@ var UNIDENTIFIED = 'unidentified';
  * @param sendPresenceJoined Callback to Channel class
  */
 var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function () {
+  /**
+   *
+   * @param analyticsHelper
+   * @param participantsState
+   * @param emit
+   * @param getUser
+   * @param batchProps
+   * @param channelBroadcast
+   * @param sendPresenceJoined
+   * @param getPresenceData
+   * @param setUserId
+   * @param getAIProviderActiveIds
+   * @example
+   */
   function ParticipantsService(analyticsHelper) {
     var _this = this;
     var participantsState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new _participantsState.ParticipantsState();
@@ -100,6 +114,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * Carries out 3 things: 1) enriches the participant with user data, 2) updates the participantsState, 3) emits the presence event
      * @param payload Payload from incoming socket event
+     * @example
      */
     (0, _defineProperty2.default)(this, "updateParticipantEager", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(payload) {
@@ -173,12 +188,15 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * 3. If incoming participant is not new, update previous state with new values (timestamp, activity)
      *
      * @param payload Payload from incoming socket event
+     * @example
      */
     (0, _defineProperty2.default)(this, "updateParticipantLazy", function (payload) {
       var userId = payload.userId,
         sessionId = payload.sessionId;
 
-      // anonymous users always skip hydration
+      // anonymous users always skip hydration but are marked as hydrated since we don't want to attempt to fetch data
+      // this can cause interesting behavior if batchProps.participantsLimit exists
+      // for example if limit = 5 and we've hydrated 5 real users and 2 anonymous users join, it'll look like we've hydrated 7 users
       if (!userId || userId === UNIDENTIFIED) {
         var _participant = _objectSpread(_objectSpread({}, payload), {}, {
           lastActive: payload.timestamp,
@@ -223,10 +241,6 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
       _this.emitPresence({
         joined: [participant]
       }, 'handling updated previous participant event');
-      // prevent running multiple debounces concurrently
-      if (!_this.currentlyPollingFetchUsers) {
-        void _this.batchFetchUsers();
-      }
     });
     (0, _defineProperty2.default)(this, "onParticipantUpdated", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(payload) {
@@ -256,6 +270,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * Called when a participant leaves the session.
      * We emit the `presence` event to update the active avatars in the editor.
+     * @param payload
+     * @example
      */
     (0, _defineProperty2.default)(this, "onParticipantLeft", function (payload) {
       var _payload$data;
@@ -311,6 +327,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * Updates when users were last active
      * @param userIds Users in most recent steps
+     * @example
      */
     (0, _defineProperty2.default)(this, "updateLastActive", function () {
       var userIds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -319,6 +336,9 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * Called when we receive a telepointer update from another
      * participant.
+     * @param payload
+     * @param thisSessionId
+     * @example
      */
     (0, _defineProperty2.default)(this, "onParticipantTelepointer", function (payload, thisSessionId) {
       var sessionId = payload.sessionId,
@@ -344,6 +364,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * Every 5 minutes (PARTICIPANT_UPDATE_INTERVAL), removes inactive participants and emits the update to other participants.
      * Needs to be kicked off in the Provider.
      * @param sessionId SessionId from provider's connection
+     * @example
      */
     (0, _defineProperty2.default)(this, "startInactiveRemover", function (sessionId) {
       clearTimeout(_this.participantUpdateTimeout);
@@ -400,6 +421,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      *
      * if no {@link BatchProps#participantsLimit} is supplied
      *  1. Fetch users until there are no more participants to hydrate
+     * @example
      */
     (0, _defineProperty2.default)(this, "batchFetchUsers", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var _this$batchProps, debounceTime, participantsLimit, size;
@@ -463,8 +485,9 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * We want to give some time for users to initially join before attempting to fetch users
      * otherwise we'll always make at least 2 calls if there's more than 1 participant
+     * @example
      */
-    (0, _defineProperty2.default)(this, "batchFetchUsersWithDelay", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+    (0, _defineProperty2.default)(this, "initializeFirstBatchFetchUsers", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
       return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) switch (_context5.prev = _context5.next) {
           case 0:
@@ -483,6 +506,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     })));
     /**
      * Keep list of participants up to date. Filter out inactive users etc.
+     * @param sessionId
+     * @example
      */
     (0, _defineProperty2.default)(this, "filterInactive", function (sessionId) {
       var now = Date.now();
@@ -500,6 +525,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * Wrapper function to emit with error handling and analytics
      * @param data Data to emit
      * @param emit Emit function from Provider
+     * @param errorMessage
+     * @example
      */
     (0, _defineProperty2.default)(this, "emitPresence", function (data, errorMessage) {
       try {
@@ -518,6 +545,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * Wrapper function to emit with error handling and analytics
      * @param data Data to emit
      * @param emit Emit function from Provider
+     * @param errorMessage
+     * @example
      */
     (0, _defineProperty2.default)(this, "emitTelepointer", function (data, errorMessage) {
       try {
@@ -530,6 +559,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     });
     /**
      * Used when the provider is disconnected or destroyed to prevent perpetual timers from continuously running
+     * @example
      */
     (0, _defineProperty2.default)(this, "clearTimers", function () {
       clearTimeout(_this.participantUpdateTimeout);
@@ -558,6 +588,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * We keep track of participants internally, and emit the `presence` event to update
      * the active avatars in the editor.
      * This method will be triggered from backend to notify all participants to exchange presence
+     * @param payload
+     * @example
      */
     (0, _defineProperty2.default)(this, "onPresenceJoined", function (payload) {
       try {
@@ -575,6 +607,8 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      *
      * This will send both a 'presence' event and a 'participant:updated' event.
      * This updates both the avatars and the participants list.
+     * @param payload
+     * @example
      */
     (0, _defineProperty2.default)(this, "onPresence", function (payload) {
       try {
@@ -590,9 +624,6 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
         (_this$analyticsHelper10 = _this.analyticsHelper) === null || _this$analyticsHelper10 === void 0 || _this$analyticsHelper10.sendErrorEvent(error, 'Error while receiving presence');
       }
     });
-    /**
-     *
-     */
     (0, _defineProperty2.default)(this, "getParticipants", function () {
       return _this.participantsState.getParticipants();
     });
@@ -625,6 +656,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
     /**
      * Called on receiving steps, emits each step's telepointer
      * @param steps Steps to extract telepointers from
+     * @example
      */
     function emitTelepointersFromSteps(steps) {
       var _this2 = this;
@@ -642,6 +674,7 @@ var ParticipantsService = exports.ParticipantsService = /*#__PURE__*/function ()
      * Wrapper function to emit with error handling and analytics
      * @param data Data to emit
      * @param errorMessage Error message for analytics
+     * @example
      */
     function emitPresenceActivityChange(data, errorMessage) {
       try {

package/dist/cjs/participants/participants-state.js

@@ -47,8 +47,8 @@ var ParticipantsState = exports.ParticipantsState = /*#__PURE__*/(0, _createClas
   /**
    * A user may contain multiple sessions, only return the unique users based on aaid.
    * If multiple participants with same aaid exist, will return the most recent entry
-   * @param param0
-   * @returns
+   * @param filter additional filter to narrow down results
+   * @param filter.isHydrated
    */
   (0, _defineProperty2.default)(this, "getUniqueParticipants", function (_ref) {
     var _ref$isHydrated = _ref.isHydrated,
@@ -58,7 +58,11 @@ var ParticipantsState = exports.ParticipantsState = /*#__PURE__*/(0, _createClas
     participants.forEach(function (p) {
       if (!!p.isHydrated === isHydrated) {
         var previous = uniqueParticipants.get(p.userId);
-        uniqueParticipants.set(p.userId, previous ? _objectSpread(_objectSpread({}, previous), p) : p);
+        uniqueParticipants.set(p.userId, previous ? _objectSpread(_objectSpread({}, previous), {}, {
+          lastActive: p.lastActive,
+          sessionId: p.sessionId,
+          presenceActivity: p.presenceActivity
+        }) : p);
       }
     });
     return (0, _toConsumableArray2.default)(uniqueParticipants.values());

package/dist/cjs/provider/commit-step.js

@@ -74,7 +74,7 @@ var commitStepQueue = exports.commitStepQueue = function commitStepQueue(_ref) {
   // - doesn't impact any indexes,
   // - is setup for last write wins,
   // - and is just a boolean -- so no real risk of data loss.
-  if (__livePage && (0, _platformFeatureFlags.fg)('platform.editor.live-pages-expand-divergence')) {
+  if (__livePage) {
     stepsWithClientAndUserId = stepsWithClientAndUserId.map(function (step) {
       if (isExpandChangeStep(step)) {
         // The title is also updated via this step, which we do want to send to the server.

package/dist/cjs/provider/index.js

@@ -152,7 +152,7 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
           if (_this.config.getUser) {
             throw new _customErrors.ProviderInitialisationError('Cannot supply getUser and batchProps together');
           }
-          _this.participantsService.batchFetchUsersWithDelay();
+          _this.participantsService.initializeFirstBatchFetchUsers();
         }
         _this.disconnectedAt = undefined;
       }).on('init', function (_ref3) {
@@ -330,9 +330,6 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
       clearTimeout(_this.presenceUpdateTimeout);
       _this.participantsService.clearTimers();
     });
-    /**
-     *
-     */
     (0, _defineProperty2.default)(_this, "getParticipants", function () {
       return _this.participantsService.getParticipants();
     });
@@ -359,7 +356,7 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
               if (!_this.config.batchProps) {
-                _context4.next = 3;
+                _context4.next = 5;
                 break;
               }
               _context4.next = 3;
@@ -367,8 +364,11 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
                 batchSize: (_props$fetchSize = props === null || props === void 0 ? void 0 : props.fetchSize) !== null && _props$fetchSize !== void 0 ? _props$fetchSize : _this.config.batchProps.batchSize
               }));
             case 3:
+              _context4.next = 6;
+              break;
+            case 5:
               throw new Error('Must provide batch properties to use fetchMore');
-            case 4:
+            case 6:
             case "end":
               return _context4.stop();
           }
@@ -395,6 +395,7 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
     _this.metadataService = new _metadataService.MetadataService(_this.emitCallback, _this.channel.sendMetadata);
     _this.namespaceService = new _namespaceService.NamespaceService();
     _this.presenceId = _this.config.presenceId;
+    _this.presenceActivity = _this.config.presenceActivity;
     if (config.isPresenceOnly) {
       // this check is specifically for the presence only
       // This presence feature is only for the confluence view page & jira presence which do not need the document service or api
@@ -434,8 +435,8 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
     /**
      * Initialisation logic, called by the editor in the collab-edit plugin.
      *
-     * @param {Object} options ...
      * @param {Function} options.getState Function that returns the editor state, used to retrieve collab-edit properties and to interact with prosemirror-collab
+     * @param options.editorApi
      * @param {SyncUpErrorFunction} options.onSyncUpError (Optional) Function that gets called when the sync of steps fails after retrying 30 times, used by Editor to log to analytics
      * @throws {ProviderInitialisationError} Something went wrong during provider initialisation
      */
@@ -500,9 +501,8 @@ var Provider = exports.Provider = /*#__PURE__*/function (_Emitter) {
     // Only used for the presence - opts out of the document service and api service
   }, {
     key: "setupForPresenceOnly",
-    value: function setupForPresenceOnly(clientId, presenceActivity) {
+    value: function setupForPresenceOnly(clientId) {
       this.clientId = clientId;
-      this.presenceActivity = presenceActivity;
       this.checkForCookies();
       try {
         if (!this.isChannelInitialized) {

package/dist/cjs/version-wrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = exports.name = "@atlaskit/collab-provider";
-var version = exports.version = "10.14.4";
+var version = exports.version = "10.16.0";
 var nextMajorVersion = exports.nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/channel.js

@@ -11,6 +11,8 @@ import Network from './connectivity/network';
 import { INTERNAL_ERROR_CODE } from './errors/internal-errors';
 import { NCS_ERROR_CODE } from './errors/ncs-errors';
 import { NotConnectedError, NotInitializedError } from './errors/custom-errors';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { bind } from 'bind-event-listener';
 const logger = createLogger('Channel', 'green');
 export class Channel extends Emitter {
   constructor(config, analyticsHelper) {
@@ -299,6 +301,40 @@ export class Channel extends Emitter {
         (_this$socket3 = this.socket) === null || _this$socket3 === void 0 ? void 0 : _this$socket3.connect();
       }
     });
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    _defineProperty(this, "cleanupAutoDisconnect", () => {
+      this.unbindVisibilityListener();
+      if (this.disconnectTimer) {
+        clearTimeout(this.disconnectTimer);
+        this.disconnectTimer = undefined;
+      }
+    });
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    _defineProperty(this, "unbindVisibilityListener", () => {});
+    _defineProperty(this, "autoDisconnect", (disconnectTimer, disconnectDelay) => {
+      if (document.hidden) {
+        logger('visibilitychange: hidden');
+        return setTimeout(() => {
+          var _this$socket4;
+          logger('visibilitychange: closing connection');
+          (_this$socket4 = this.socket) === null || _this$socket4 === void 0 ? void 0 : _this$socket4.close();
+        }, disconnectDelay || disconnectDelay === 0 ? disconnectDelay * 1000 : 60 * 1000);
+      } else {
+        var _this$socket5;
+        logger('visibilitychange: visible');
+        if (disconnectTimer) {
+          clearTimeout(disconnectTimer);
+        }
+        logger('visibilitychange: re-connecting');
+        (_this$socket5 = this.socket) === null || _this$socket5 === void 0 ? void 0 : _this$socket5.connect();
+        return;
+      }
+    });
     this.config = config;
     this.analyticsHelper = analyticsHelper;
     this.initExperience = createDocInitExp(this.analyticsHelper);
@@ -480,6 +516,10 @@ export class Channel extends Emitter {
     this.reconnectHelper = new ReconnectHelper();
     // Fired upon a reconnection attempt error (from Socket.IO Manager)
     this.socket.io.on('reconnect_error', this.onReconnectError);
+
+    // Automatic disconnect on tab background with delay, to keep presence UX accurate
+    // and reduce wasted connections. Reconnects upon tab becoming active again
+    this.addVisiblityListener();
   }
 
   // Ignored via go/ees005
@@ -546,9 +586,26 @@ export class Channel extends Emitter {
   isLimitExceeded(stepLimit, stepSizeLimit, maxStepSizeLimit) {
     return stepLimit > 0 && this.stepCounter > stepLimit || stepSizeLimit > 0 && this.stepSizeCounter > stepSizeLimit || maxStepSizeLimit > 0 && this.maxStepSize > maxStepSizeLimit;
   }
+  /**
+   * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+   */
+  addVisiblityListener() {
+    var _FeatureGates$getExpe;
+    const disconnectDelay = (_FeatureGates$getExpe = FeatureGates.getExperimentValue('platform_editor_connection_auto_disconnect_delay', 'delay', -1)) !== null && _FeatureGates$getExpe !== void 0 ? _FeatureGates$getExpe : -1;
+    const isAutoDisconnectEnabled = disconnectDelay >= 0;
+    if (isAutoDisconnectEnabled && this.config.isPresenceOnly) {
+      this.unbindVisibilityListener = bind(document, {
+        type: 'visibilitychange',
+        listener: () => {
+          this.disconnectTimer = this.autoDisconnect(this.disconnectTimer, disconnectDelay);
+        }
+      });
+    }
+  }
   disconnect() {
     var _this$network;
     this.unsubscribeAll();
+    this.cleanupAutoDisconnect();
     (_this$network = this.network) === null || _this$network === void 0 ? void 0 : _this$network.destroy();
     this.network = null;
     if (this.socket) {

package/dist/es2019/participants/participants-helper.js

@@ -30,9 +30,22 @@ export const createParticipantFromPayload = async (payload, getUser) => {
   };
   return participant;
 };
+
+/**
+ * Will use the getUsers callback from batchProps to fetch users
+ *
+ * 1. Determine all the participants that need to be hydrated
+ * 2. Only fetch a subset of those participants based on batchSize
+ * 3. Of the users fetched, find all of those users' sessions and mark those entries as hydrated
+ *
+ * @param participantsState
+ * @param batchProps
+ * @returns
+ * @example
+ */
 export const fetchParticipants = async (participantsState, batchProps) => {
   const {
-    batchSize = batchProps.batchSize || DEFAULT_BATCH_FETCH_SIZE,
+    batchSize = DEFAULT_BATCH_FETCH_SIZE,
     getUsers
   } = batchProps;
   const participantsToHydrate = participantsState.getUniqueParticipants({
@@ -54,24 +67,22 @@ export const fetchParticipants = async (participantsState, batchProps) => {
       const {
         sessionId
       } = participant;
-      if (participant && sessionId) {
-        const hydratedParticipant = {
-          name: (user === null || user === void 0 ? void 0 : user.name) || '',
-          avatar: (user === null || user === void 0 ? void 0 : user.avatar) || '',
-          email: (user === null || user === void 0 ? void 0 : user.email) || '',
-          sessionId,
-          lastActive: participant.lastActive,
-          userId: user.userId,
-          clientId: participant.clientId,
-          permit: participant.permit,
-          isGuest: user === null || user === void 0 ? void 0 : user.isGuest,
-          presenceId: participant.presenceId,
-          presenceActivity: participant.presenceActivity,
-          isHydrated: true
-        };
-        participantsState.setBySessionId(sessionId, hydratedParticipant);
-        hydratedParticipants.push(hydratedParticipant);
-      }
+      const hydratedParticipant = {
+        name: user.name,
+        avatar: user.avatar,
+        email: user.email,
+        userId: user.userId,
+        isGuest: user.isGuest,
+        sessionId,
+        lastActive: participant.lastActive,
+        clientId: participant.clientId,
+        permit: participant.permit,
+        presenceId: participant.presenceId,
+        presenceActivity: participant.presenceActivity,
+        isHydrated: true
+      };
+      participantsState.setBySessionId(sessionId, hydratedParticipant);
+      hydratedParticipants.push(hydratedParticipant);
     });
   });
   return hydratedParticipants;