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

package/src/asset/svgs.js

@@ -10,12 +10,18 @@ function trianglePath(r) {
 const PREFIX = 'miso-ui-icon';
 const ID = `${PREFIX}-svg-${version.replaceAll('.', '_')}`;
 
+const ICON_NAME = {
+  SEND: 'send',
+  SEARCH: 'search',
+  TRIANGLE: 'triangle',
+};
+
 // CC0 SVGs
-const ICON_SEND = `<symbol id="${PREFIX}-send" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
-const ICON_SEARCH = `<symbol id="${PREFIX}-search" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
+const ICON_SEND = `<symbol id="${PREFIX}-${ICON_NAME.SEND}" viewBox="0 0 32 32"><path fill="currentColor" d="M11.499,19.173l5.801,-5.849c0.389,-0.392 1.022,-0.394 1.414,-0.006c0.392,0.389 0.395,1.022 0.006,1.414l-5.798,5.847l5.306,8.002c0.207,0.313 0.572,0.483 0.945,0.441c0.373,-0.042 0.691,-0.289 0.824,-0.64l9.024,-23.904c0.138,-0.366 0.05,-0.78 -0.226,-1.058c-0.276,-0.278 -0.689,-0.369 -1.057,-0.233l-24.004,8.892c-0.353,0.13 -0.602,0.448 -0.646,0.821c-0.044,0.373 0.125,0.74 0.438,0.948l7.973,5.325Z"/></symbol>`;
+const ICON_SEARCH = `<symbol id="${PREFIX}-${ICON_NAME.SEARCH}" viewBox="0 0 24 24"><path fill="currentColor" d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"/></symbol>`;
 
 // Custom SVGs
-const ICON_TRIANGLE = `<symbol id="${PREFIX}-triangle" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
+const ICON_TRIANGLE = `<symbol id="${PREFIX}-${ICON_NAME.TRIANGLE}" viewBox="-5 -5 105 105"><path d="${trianglePath(5)}"/></symbol>`;
 
 const ICONS = [ICON_SEND, ICON_SEARCH, ICON_TRIANGLE];
 
@@ -33,10 +39,16 @@ function loadSvgSprites() {
 
 loadSvgSprites();
 
-function getSvg(name) {
+function _icon(name) {
   return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 
-export const SEND = getSvg('send');
-export const SEARCH = getSvg('search');
-export const TRIANGLE = getSvg('triangle');
+export const ICON_NAMES = new Set(Object.values(ICON_NAME));
+
+export function getIcon(name) {
+  return ICON_NAMES.has(name) ? _icon(name) : '';
+}
+
+export const SEND = _icon(ICON_NAME.SEND);
+export const SEARCH = _icon(ICON_NAME.SEARCH);
+export const TRIANGLE = _icon(ICON_NAME.TRIANGLE);

package/src/constants.js

@@ -22,7 +22,8 @@ export const ROLE = Object.freeze({
   AFFILIATION: 'affiliation',
   KEYWORDS: 'keywords',
   FACETS: 'facets',
-  HITS: 'hits',
+  TOTAL: 'total',
+  MORE: 'more',
   ERROR: 'error',
 });
 
@@ -40,34 +41,29 @@ const DATA_ROLE_SET = new Set([
   ROLE.RELATED_QUESTIONS,
   ROLE.AFFILIATION,
   ROLE.FACETS,
-  ROLE.HITS,
+  ROLE.TOTAL,
 ]);
 
 export function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
 
-export const DATA_ASPECT = Object.freeze({
-  AUTOCOMPLETE: 'autocomplete',
-});
+const PRODUCT_ROLE_SET = new Set([
+  ROLE.PRODUCTS,
+  ROLE.SOURCES,
+  ROLE.RELATED_RESOURCES,
+]);
 
-export const LAYOUT_CATEGORY = Object.freeze({
-  CONTAINER: 'container',
-  BANNER: 'banner',
-  LIST: 'list',
-  QUERY: 'query',
-  RADIO: 'radio',
-  FILTERS: 'filters',
-  TEXT: 'text',
-  AFFILIATION: 'affiliation',
-  ERROR: 'error',
-});
+export function isProductRole(role) {
+  return PRODUCT_ROLE_SET.has(role);
+}
 
 export const EVENT_TYPE = Object.freeze({
   IMPRESSION: 'impression',
   VIEWABLE: 'viewable',
   CLICK: 'click',
   SUBMIT: 'submit',
+  FEEDBACK: 'feedback',
 });
 
 export const TRACKING_EVENT_TYPES = [
@@ -75,8 +71,21 @@ export const TRACKING_EVENT_TYPES = [
   EVENT_TYPE.VIEWABLE,
   EVENT_TYPE.CLICK,
   EVENT_TYPE.SUBMIT,
+  EVENT_TYPE.FEEDBACK,
+];
+
+export const PERFORMANCE_EVENT_TYPES = [
+  EVENT_TYPE.IMPRESSION,
+  EVENT_TYPE.VIEWABLE,
+  EVENT_TYPE.CLICK,
 ];
 
+const PERFORMANCE_EVENT_TYPE_SET = new Set(PERFORMANCE_EVENT_TYPES);
+
+export function isPerformanceEventType(type) {
+  return PERFORMANCE_EVENT_TYPE_SET.has(type);
+}
+
 export const TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',

package/src/defaults/hybrid-search/answer-box.js

@@ -1,5 +1,6 @@
 import { CLASS_PREFIX } from './constants.js';
 import { STATUS } from '../../constants.js';
+import { fields } from '../../actor/index.js';
 import { showMore as DEFAULT_PHRASE_SHOW_MORE, showLess as DEFAULT_PHRASE_SHOW_LESS } from './phrases.js';
 
 const CLASS_OPEN = 'answer-box-open';
@@ -23,7 +24,12 @@ export default class AnswerBox {
 
     // expose widget API
     workflow.answerBox = this;
-    workflow._unsubscribes.push(() => this.destroy()); // TODO: review
+    workflow._unsubscribes.push(() => {
+      if (workflow.answerBox === this) {
+        this.destroy();
+        workflow.answerBox = undefined;
+      }
+    });
 
     // handle toggle button clicks
     const callback = event => this._handleClick(event);
@@ -35,9 +41,8 @@ export default class AnswerBox {
 
     this._unsubscribes = [
       () => element.removeEventListener('click', callback),
-      workflow.on('loading', () => this.hide()),
-      workflow.on('error', () => this.show()),
-      workflow.on('ready', () => this.show()),
+      // cling to data rather than view, as we may miss view event when tab is inactive due to raf
+      workflow._answer._hub.on(fields.data(), () => this._syncWofkflowStatus()),
     ];
   }
 
@@ -52,7 +57,7 @@ export default class AnswerBox {
   }
 
   _syncWofkflowStatus() {
-    const { status } = this._workflow;
+    const { status } = this._workflow._answer;
     switch (status) {
       case STATUS.ERRONEOUS:
       case STATUS.READY:
@@ -74,6 +79,12 @@ export default class AnswerBox {
     }
   }
 
+  _syncScroll() {
+    if (!this.isOpen) {
+      this._element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   destroy() {
     for (const unsubscribe of this._unsubscribes) {
       unsubscribe();
@@ -113,6 +124,7 @@ for (const [method, [action, className]] of Object.entries(METHODS)) {
     this._updateBoxStatus(action, className);
     if (className === CLASS_OPEN) {
       this._syncButtonText();
+      this._syncScroll();
     }
   };
 }

package/src/defaults/hybrid-search/phrases.js

@@ -1,7 +1,7 @@
 /**
- * The phrase displayed right before <miso-question>
+ * The phrase to display <miso-question>
  */
-export const question = 'You asked...';
+export const question = 'You asked “${value}”';
 
 /**
  * The phrase displayed right before <miso-sources>
@@ -14,9 +14,9 @@ export const sources = 'Sources';
 export const keywords = 'You searched for “${value}”';
 
 /**
- * The phrase to display <miso-hits>
+ * The phrase to display <miso-total>
  */
-export const hits = '${value} Results';
+export const total = '${value} Results';
 
 export const showMore = 'Show more';
 export const showLess = 'Show less';

package/src/defaults/hybrid-search/templates.js

@@ -18,6 +18,11 @@ class Sections extends _Sections {
     ]);
   }
 
+  question(options) {
+    const { phrase } = this._helpers;
+    return phrase(options, { name: 'question', tag: 'div' }).replaceAll('${value}', '<miso-question></miso-question>');
+  }
+
   answerBoxToggle(options) {
     const { element } = this._helpers;
     const { classPrefix } = options;
@@ -28,10 +33,11 @@ class Sections extends _Sections {
 
   searchResultsGroup(options) {
     const { container } = this._helpers;
-    return container(options, { name: 'search-results', visibleWhen: 'ready' }, [
+    return container(options, { name: 'search-results', visibleWhen: 'loading ready' }, [
       this.searchResultsInfoGroup(options),
       this.searchResultsFilters(options),
       '<miso-products></miso-products>',
+      this.more(options),
     ]);
   }
 
@@ -40,7 +46,7 @@ class Sections extends _Sections {
     const { classPrefix } = options;
     return element('div', { classes: [`${classPrefix}__search-results-info`] }, [
       this.keywords(options),
-      this.hits(options),
+      this.total(options),
     ]);
   }
 
@@ -57,9 +63,20 @@ class Sections extends _Sections {
     return phrase(options, { name: 'keywords', tag: 'div', inline: true }).replaceAll('${value}', '<miso-keywords></miso-keywords>');
   }
 
-  hits(options) {
+  total(options) {
     const { phrase } = this._helpers;
-    return phrase(options, { name: 'hits', tag: 'div', inline: true }).replaceAll('${value}', '<miso-hits></miso-hits>');
+    return phrase(options, { name: 'total', tag: 'div', inline: true }).replaceAll('${value}', '<miso-total></miso-total>');
+  }
+
+  more(options) {
+    if (!options.moreButton) {
+      return '';
+    }
+    const { element } = this._helpers;
+    const { classPrefix } = options;
+    return element('div', { classes: [`${classPrefix}__search-results-more-container`] }, [
+      '<miso-more></miso-more>',
+    ]);
   }
 
 }
@@ -70,14 +87,13 @@ export const sections = externalize(new Sections({ helpers }));
 export function root(options = {}) {
   const { normalizeOptions, section, container } = helpers;
   options = normalizeOptions(options);
-  const { answerBox } = sections;
+  const { answerBox, answerGroup, searchResultsGroup } = sections;
+  const { answerBox: answerBoxOptions = true } = options;
   return [
     section(options, { name: 'question' }, [
       container(options, { name: 'query' }, '<miso-query></miso-query>'),
     ]),
-    section(options, { name: 'answer' }, [
-      answerBox(options),
-    ]),
-    section(options, { name: 'search-results' }, sections.searchResultsGroup(options)),
+    section(options, { name: 'answer' }, answerBoxOptions ? [ answerBox(options) ] : answerGroup(options)),
+    section(options, { name: 'search-results' }, searchResultsGroup(options)),
   ].join('');
 };

package/src/element/role/index.js

@@ -11,6 +11,7 @@ export { default as MisoRelatedResourcesElement } from './miso-related-resources
 export { default as MisoRelatedQuestionsElement } from './miso-related-questions.js';
 export { default as MisoSovrnAffiliationElement } from './miso-affiliation.js';
 export { default as MisoKeywordsElement } from './miso-keywords.js';
-export { default as MisoHitsElement } from './miso-hits.js';
+export { default as MisoTotalElement } from './miso-total.js';
 export { default as MisoFacetsElement } from './miso-facets.js';
+export { default as MisoMoreElement } from './miso-more.js';
 export { default as MisoErrorElement } from './miso-error.js';

package/src/element/role/{miso-hits.js → miso-more.js}

@@ -1,16 +1,16 @@
 import MisoComponentElement from './miso-component.js';
 import { ROLE } from '../../constants.js';
 
-export default class MisoHitsElement extends MisoComponentElement {
+export default class MisoMoreElement extends MisoComponentElement {
 
   constructor() {
     super({
-      role: ROLE.HITS,
+      role: ROLE.MORE,
     });
   }
 
   static get tagName() {
-    return 'miso-hits';
+    return 'miso-more';
   }
 
 }

package/src/element/role/miso-total.js

@@ -0,0 +1,16 @@
+import MisoComponentElement from './miso-component.js';
+import { ROLE } from '../../constants.js';
+
+export default class MisoTotalElement extends MisoComponentElement {
+
+  constructor() {
+    super({
+      role: ROLE.TOTAL,
+    });
+  }
+
+  static get tagName() {
+    return 'miso-total';
+  }
+
+}

package/src/layout/affiliation/affiliation.js

@@ -1,5 +1,5 @@
 import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
-import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
+import { STATUS } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
 import { affiliation, helpers } from '../templates.js';
 import { TRIANGLE } from '../../asset/svgs.js';
@@ -136,10 +136,6 @@ function autoplayOptionsEquals(a, b) {
 
 export default class AffiliationLayout extends CollectionLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.AFFILIATION;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/banner/banner.js

@@ -1,4 +1,3 @@
-import { LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
 import { LOGO } from '../svgs.js';
 
@@ -19,10 +18,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 
 export default class BannerLayout extends TemplateBasedLayout {
 
-  static get category() {
-    return LAYOUT_CATEGORY.BANNER;
-  }
-
   static get type() {
     return TYPE;
   }

package/src/layout/button/more-button.js

@@ -0,0 +1,69 @@
+import { STATUS } from '../../constants.js';
+import { fields } from '../../actor/index.js';
+import TemplateBasedLayout from '../template.js';
+
+const TYPE = 'more-button';
+const DEFAULT_CLASSNAME = 'miso-more-button';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const roleAttr = role ? ` data-role="${role}"` : '';
+  const disabledAttr = state.status !== STATUS.READY ? ' disabled' : '';
+  return `
+<div class="${className}"${roleAttr}${disabledAttr}>
+  ${templates.text(layout)}
+</div>
+`;
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  text,
+});
+
+function text(layout) {
+  return 'More';
+}
+
+export default class MoreButtonLayout extends TemplateBasedLayout {
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+    super({
+      className,
+      templates: { ...DEFAULT_TEMPLATES, ...templates },
+      ...options,
+    });
+  }
+
+  initialize(view) {
+    this._unsubscribes = [
+      ...this._unsubscribes,
+      view.proxyElement.on('click', (e) => this._handleClick(e)),
+    ];
+  }
+
+  _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
+    const button = event.target.closest('data-role="more"');
+    if (!button || button.disabled) {
+      return;
+    }
+    this._view.hub.trigger(fields.more());
+  }
+
+}

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
@@ -84,6 +94,9 @@ function completionItem(layout, type, item) {
 
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
+  buttonContent,
+  buttonText: '',
+  buttonIcon: 'search',
   completions,
   completionList,
   completionItem,
@@ -102,10 +115,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 +150,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 +184,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 +194,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 +205,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;
     }
@@ -332,7 +345,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;
   }