@miso.ai/client-sdk-ui 1.11.0-beta.1 → 1.11.0-beta.11

package/src/layout/container/container.js

@@ -1,4 +1,4 @@
-import { ROLE, STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { ROLE, STATUS } from '../../constants.js';
 import RafLayout from '../raf.js';
 import MisoBannerElement from '../../element/miso-banner.js';
 import Viewables from '../../util/viewables.js';
@@ -7,10 +7,6 @@ const TYPE = 'container';
 
 export default class ContainerLayout extends RafLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.CONTAINER;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/error/error.js

@@ -1,4 +1,3 @@
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
 const TYPE = 'error';
@@ -24,10 +23,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class ErrorLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.ERROR;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/index.js

@@ -12,4 +12,5 @@ export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
 export { default as AffiliationLayout } from './affiliation/affiliation.js';
-export { default as FacetsLayout } from './input/facets.js';
+export { default as FacetsLayout } from './input/facets.js';
+export { default as MoreButtonLayout } from './button/more-button.js';

package/src/layout/input/facets.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import Bindings from '../../util/bindings.js';
 
@@ -88,10 +87,6 @@ function getSelectedValues(facets) {
 
 export default class FacetsLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.FILTERS;
-  }
-
   static get type() {
     return TYPE;
   }
@@ -125,11 +120,11 @@ export default class FacetsLayout extends TemplateBasedLayout {
 
   _render(element, data, controls) {
     super._render(element, data, controls);
-    this._syncSelections();
   }
 
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncSelections();
   }
 
   _unrender() {
@@ -220,6 +215,10 @@ export default class FacetsLayout extends TemplateBasedLayout {
   }
 
   _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
     const element = event.target.closest(`[data-role="option"]`);
     if (!element) {
       return;

package/src/layout/input/option-list.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
@@ -41,10 +40,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class OptionListLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.QUERY;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/input/search-box.js

@@ -1,29 +1,39 @@
 import { defineValues, escapeHtml, findInAncestors, debounce } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS, EVENT_TYPE, DATA_ASPECT } from '../../constants.js';
+import { STATUS, EVENT_TYPE } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
 import { imageBlock, productInfoBlock } from '../templates.js';
-import { SEND, SEARCH } from '../../asset/svgs.js';
+import { getIcon } from '../../asset/svgs.js';
 
 const TYPE = 'search-box';
 const DEFAULT_CLASSNAME = 'miso-search-box';
 const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 
 function root(layout) {
-  const { className, role, options, workflow, autocomplete } = layout;
-  const { placeholder, buttonText } = options;
+  const { className, templates, role, options, autocomplete } = layout;
+  const { placeholder } = options;
   const roleAttr = role ? `data-role="${role}"` : '';
-  const buttonContent = buttonText || workflow === 'search' ? SEARCH : SEND;
   return `
 <div class="${className}" ${roleAttr}>
   <div class="${className}__input-group">
     <input class="${className}__input" type="text" data-role="input" ${placeholder ? `placeholder="${placeholder}"` : ''}>
-    <button class="${className}__button" type="submit" data-role="submit">${buttonContent}</button>
+    <button class="${className}__button" type="submit" data-role="submit">${templates.buttonContent(layout)}</button>
   </div>
   <div class="${autocomplete.className}" data-role="autocomplete"></div>
 </div>`.trim();
 }
 
+function buttonContent(layout) {
+  const { templates, options } = layout;
+  if (options.buttonText) {
+    return options.buttonText; // legacy
+  }
+  const { buttonText, buttonIcon } = templates;
+  const text = typeof buttonText === 'function' ? buttonText(layout) : `${buttonText}`;
+  const icon = typeof buttonIcon === 'function' ? buttonIcon(layout) : (getIcon(buttonIcon) || `${buttonIcon}`);
+  return text + icon;
+}
+
 function completions(layout, items) {
   const { templates, workflow, autocomplete } = layout;
   // use options under layout.autocomplete from now on
@@ -68,10 +78,7 @@ function product(layout, { product }) {
 
 function completionList(layout, type, items) {
   const { className, templates } = layout;
-  return `
-<ul class="${className}__${type}-list" data-role="${type}-list">
-  ${items.map(item => templates.completionItem(layout, type, item)).join('')}
-</ul>`.trim();
+  return `<ul class="${className}__${type}-list" data-role="${type}-list">${items.map(item => templates.completionItem(layout, type, item)).join('')}</ul>`;
 }
 
 function completionItem(layout, type, item) {
@@ -84,6 +91,9 @@ function completionItem(layout, type, item) {
 
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
+  buttonContent,
+  buttonText: '',
+  buttonIcon: 'search',
   completions,
   completionList,
   completionItem,
@@ -102,10 +112,6 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
 
 export default class SearchBoxLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.QUERY;
-  }
-
   static get type() {
     return TYPE;
   }
@@ -141,7 +147,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       proxyElement.on('click', (e) => this._handleClick(e)),
       proxyElement.on('focusin', (e) => this._handleFocusIn(e)),
       proxyElement.on('focusout', (e) => this._handleFocusOut(e)),
-      hub.on(fields.data(DATA_ASPECT.AUTOCOMPLETE), () => view.refresh({ force: true })),
+      hub.on(fields.completions(), () => view.refresh({ force: true })),
     ];
   }
 
@@ -175,7 +181,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     state = super._preprocess({ state });
     return {
       ...state,
-      completions: this._view.hub.states[fields.data(DATA_ASPECT.AUTOCOMPLETE)],
+      completions: this._view.hub.states[fields.completions()],
     };
   }
 
@@ -185,6 +191,9 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
       super._render(element, data, controls);
     }
     this._updateCompletions(element, data, controls);
+  }
+
+  _afterRender(element, state) {
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
   }
@@ -193,7 +202,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     if (!state.completions) {
       return;
     }
-    const { status = STATUS.INITIAL, index, value: completions } = state.completions;
+    const { status = STATUS.INITIAL, session, value: completions } = state.completions;
+    const { index } = session;
     if (rendered && rendered.completions.index === index && rendered.completions.status === status) {
       return;
     }
@@ -276,7 +286,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
   }
 
   _handleKeyDown({ key, target, isComposing }) {
-    if (!isComposing && key === 'Enter' && target.matches('input')) {
+    if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
       target.blur();
     }
@@ -332,7 +342,7 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     if (!options) {
       return;
     }
-    this._view.tracker.submit(value);
+    this._view.tracker.submit({ value }); // not array
   }
 
 }

package/src/layout/list/cards.js

@@ -5,10 +5,6 @@ const DEFAULT_CLASSNAME = 'miso-cards';
 
 export default class CardsLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/list/carousel.js

@@ -35,10 +35,6 @@ function chevron(layout) {
 
 export default class CarouselLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/list/collection.js

@@ -1,13 +1,14 @@
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { makeTrackable } from '../trackable.js';
+import { makeTriggerable } from '../triggerable.js';
 import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock } from '../templates.js';
 
 function root(layout, state) {
   const { className, role, templates } = layout;
   const { status } = state;
   const roleAttr = role ? `data-role="${role}"` : '';
-  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  return `<div class="${className} ${status}" ${roleAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}${templates.trigger(layout, state)}${templates.loading(layout, state)}</div>`;
 }
 
 function ready(layout, state) {
@@ -15,7 +16,7 @@ function ready(layout, state) {
   const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
-  if ((values && values.length > 0) || state.ongoing) {
+  if ((values && values.length > 0) || state.ongoing) { // TODO: ad-hoc ongoing?
     return templates.list(layout, state, values);
   } else {
     return templates.empty(layout, state);
@@ -42,6 +43,15 @@ function item(layout, state, value, index) {
   return `<li class="${className}__item">${body}</li>`;
 }
 
+function trigger(layout, state) {
+  const { className } = layout;
+  return `<div class="${className}__trigger" data-role="trigger"></div>`;
+}
+
+function loading() {
+  return `<div class="miso-loading" aria-label="Loading" data-role="loading"></div>`;
+}
+
 // TODO: let templates.js control what to be included here
 
 const DEFAULT_TEMPLATES = Object.freeze({
@@ -67,14 +77,12 @@ const DEFAULT_TEMPLATES = Object.freeze({
   cta,
   imageBlock,
   indexBlock,
+  trigger,
+  loading,
 });
 
 export default class CollectionLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.LIST;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }
@@ -86,6 +94,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
       ...options,
     });
     this._initTrackable();
+    this._initTriggerable();
   }
 
   initialize(view) {
@@ -106,8 +115,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
     // TODO: compare item ids as well
     return this.options.incremental &&
     rendered && rendered.value && rendered.value.length > 0 &&
-      state.status === STATUS.READY &&
-      rendered.status === STATUS.READY &&
+    state.value && state.value.length >= rendered.value.length &&
       state.session && rendered.session &&
       state.session.id === rendered.session.id;
   }
@@ -138,10 +146,12 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncTrigger(element, state);
   }
 
   _unrender() {
     this._clearBindings();
+    this._untrackTrigger();
   }
 
   _getItems(state) {
@@ -177,6 +187,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
 
   destroy() {
     this._destroyTrackable();
+    this._destroyTriggerable();
     this._view = undefined;
     super.destroy();
   }
@@ -184,3 +195,4 @@ export default class CollectionLayout extends TemplateBasedLayout {
 }
 
 makeTrackable(CollectionLayout.prototype);
+makeTriggerable(CollectionLayout.prototype);

package/src/layout/list/list.js

@@ -5,10 +5,6 @@ const DEFAULT_CLASSNAME = 'miso-list';
 
 export default class ListLayout extends CollectionLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/feedback.js

@@ -50,10 +50,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class FeedbackLayout extends RadioLayout {
 
-  static get category() {
-    return super.category;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/radio/radio.js

@@ -1,5 +1,4 @@
 import { findInAncestors, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { requiresImplementation } from '../templates.js';
 
@@ -30,10 +29,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class RadioLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.RADIO;
-  }
-
   static get defaultTemplates() {
     return DEFAULT_TEMPLATES;
   }

package/src/layout/raf.js

@@ -2,8 +2,8 @@ import { defineValues, requestAnimationFrame as raf, capture } from '@miso.ai/co
 
 export default class RafLayout {
 
-  constructor({ role, workflow, ...options } = {}) {
-    defineValues(this, { role, workflow, options });
+  constructor({ role, workflow, workflowOptions, ...options } = {}) {
+    defineValues(this, { role, workflow, workflowOptions, options });
     this._unsubscribes = [];
     this._rendered = new WeakMap();
     this._element = undefined;

package/src/layout/text/text.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 
 const TYPE = 'text';
@@ -42,10 +41,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class TextLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/text/typewriter/index.js

@@ -1,5 +1,5 @@
 import { trimObj, defineValues, Resolution, pacer } from '@miso.ai/commons';
-import { LAYOUT_CATEGORY, STATUS } from '../../../constants.js';
+import { STATUS } from '../../../constants.js';
 import ProgressiveLayout from '../../progressive.js';
 import PlaintextRenderer from './plaintext.js';
 import { containerElement, cursorClassName, fromSameSession, normalizeOnDebug } from './utils.js';
@@ -9,10 +9,6 @@ const DEFAULT_CLASSNAME = 'miso-typewriter';
 
 export default class TypewriterLayout extends ProgressiveLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.TEXT;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/trackable.js

@@ -1,4 +1,4 @@
-import { mixin } from '@miso.ai/commons'; 
+import { mixin } from '@miso.ai/commons';
 import Bindings from '../util/bindings.js';
 import Viewables from '../util/viewables.js';
 import { validateClick } from '../util/trackers.js';

package/src/layout/triggerable.js

@@ -0,0 +1,76 @@
+import { mixin, viewable as whenViewable } from '@miso.ai/commons';
+import { STATUS } from '../constants.js';
+import { fields } from '../actor/index.js';
+
+export function makeTriggerable(prototype) {
+  mixin(prototype, TriggerableMixin.prototype);
+}
+
+export class TriggerableMixin {
+
+  _initTriggerable() {
+    this._trigger = undefined;
+  }
+
+  _syncTrigger(element, state) {
+    if (!this.options.infiniteScroll) {
+      return;
+    }
+    const workflowPaginationOptions = this.workflowOptions.pagination;
+    if (!workflowPaginationOptions.active || workflowPaginationOptions.mode !== 'infiniteScroll') {
+      return;
+    }
+    // only track trigger when ready
+    if (state.status === STATUS.READY) {
+      this._trackTrigger(element);
+    } else {
+      this._untrackTrigger();
+    }
+  }
+
+  async _trackTrigger(element) {
+    if (this._trigger) {
+      return;
+    }
+    const triggerElement = element.querySelector('[data-role="trigger"]');
+    if (!triggerElement) {
+      return;
+    }
+    const ac = new AbortController();
+    this._trigger = Object.freeze({
+      element: triggerElement,
+      ac,
+    });
+    let result = false;
+    try {
+      await whenViewable(triggerElement, { area: 1, duration: 0, signal: ac.signal });
+      result = true;
+    } catch (e) {
+      if (e.name !== 'AbortError') {
+        throw e;
+      }
+    } finally {
+      this._trigger = undefined;
+    }
+    if (result) {
+      this._onTrigger();
+    }
+  }
+
+  _onTrigger() {
+    this._view.hub.trigger(fields.more());
+  }
+
+  _untrackTrigger() {
+    if (!this._trigger) {
+      return;
+    }
+    this._trigger.ac && this._trigger.ac.abort();
+    this._trigger = undefined;
+  }
+
+  _destroyTriggerable() {
+    this._untrackTrigger();
+  }
+
+}

package/src/util/states.js

@@ -4,20 +4,6 @@ import { EVENT_TYPE, TRACKING_STATUS, validateEventType, validateTrackingStatus
 const { IMPRESSION, VIEWABLE, CLICK } = EVENT_TYPE;
 const { UNTRACKED, TRIGGERED } = TRACKING_STATUS;
 
-/*
-const STATES = {
-  NEW: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-  }),
-  UNTRACKED: Object.freeze({
-    [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED,
-    [CLICK]: UNTRACKED,
-  }),
-};
-*/
-
 const UNTRACKED_STATES = Object.freeze({
   [IMPRESSION]: UNTRACKED,
   [VIEWABLE]: UNTRACKED,

package/src/version.js

@@ -1 +1 @@
-export default '1.11.0-beta.1';
+export default '1.11.0-beta.11';