@miso.ai/client-sdk-ui 1.10.0 → 1.10.1-beta.0

package/dist/cjs/layout/affiliation/affiliation.js

@@ -26,7 +26,10 @@ function root(layout, state) {
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
   const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const items = layout._getItems(state);
+  const itemCount = items ? items.length : undefined;
+  const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -261,14 +264,9 @@ class AffiliationLayout extends _collection.default {
   }
   _render(element, states, controls) {
     super._render(element, states, controls);
-
-    // update item count, but raf to display as attribute
-    const items = this._getItems(states.state);
-    this._itemCount = items ? items.length : undefined;
-    (0, _commons.requestAnimationFrame)(() => {
-      this._syncItemCount();
-      this._syncItemIndex();
-    });
+    // sync again for incremental item rendering
+    this._syncItemCount(states);
+    this._syncItemIndex();
   }
   _syncElement(element) {
     const oldElement = this._element;
@@ -283,7 +281,11 @@ class AffiliationLayout extends _collection.default {
     newElement && this._viewable.observe(newElement);
   }
   _syncItemCount() {
-    const itemCount = this._itemCount;
+    let {
+      state
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
     if (itemCount === this._displayedCount) {
       return;
     }

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.10.0';
+var _default = exports.default = '1.10.1-beta.0';

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.10.0"
+    "@miso.ai/commons": "1.10.1-beta.0"
   },
-  "version": "1.10.0"
+  "version": "1.10.1-beta.0"
 }

package/src/layout/affiliation/affiliation.js

@@ -13,7 +13,10 @@ function root(layout, state) {
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
   const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const items = layout._getItems(state);
+  const itemCount = items ? items.length : undefined;
+  const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 
 function ready(layout, state) {
@@ -227,15 +230,9 @@ export default class AffiliationLayout extends CollectionLayout {
 
   _render(element, states, controls) {
     super._render(element, states, controls);
-
-    // update item count, but raf to display as attribute
-    const items = this._getItems(states.state);
-    this._itemCount = items ? items.length : undefined;
-
-    raf(() => {
-      this._syncItemCount();
-      this._syncItemIndex();
-    });
+    // sync again for incremental item rendering
+    this._syncItemCount(states);
+    this._syncItemIndex();
   }
 
   _syncElement(element) {
@@ -252,8 +249,9 @@ export default class AffiliationLayout extends CollectionLayout {
     newElement && this._viewable.observe(newElement);
   }
 
-  _syncItemCount() {
-    const itemCount = this._itemCount;
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
     if (itemCount === this._displayedCount) {
       return;
     }

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0';
+export default '1.10.1-beta.0';