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

package/dist/cjs/constants.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.ORGANIC_QUESTION_SOURCE = exports.LAYOUT_CATEGORY = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.DATA_ASPECT = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
+exports.TRACKING_STATUS = exports.TRACKING_EVENT_TYPES = exports.STATUS = exports.ROLE = exports.PERFORMANCE_EVENT_TYPES = exports.ORGANIC_QUESTION_SOURCE = exports.EVENT_TYPE = exports.DEFAULT_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_PRODUCT_ID = void 0;
 exports.isDataRole = isDataRole;
+exports.isPerformanceEventType = isPerformanceEventType;
+exports.isProductRole = isProductRole;
 exports.validateEventType = validateEventType;
 exports.validateTrackingStatus = validateTrackingStatus;
 const ATTR_DATA_MISO_UNIT_ID = exports.ATTR_DATA_MISO_UNIT_ID = `data-miso-unit-id`;
@@ -30,34 +32,31 @@ const ROLE = exports.ROLE = Object.freeze({
   AFFILIATION: 'affiliation',
   KEYWORDS: 'keywords',
   FACETS: 'facets',
-  HITS: 'hits',
+  TOTAL: 'total',
+  MORE: 'more',
   ERROR: 'error'
 });
-const DATA_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.CATEGORIES, ROLE.ATTRIBUTES, ROLE.RESULTS, ROLE.ITEMS, ROLE.QUESTION, ROLE.ANSWER, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.HITS]);
+const DATA_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.CATEGORIES, ROLE.ATTRIBUTES, ROLE.RESULTS, ROLE.ITEMS, ROLE.QUESTION, ROLE.ANSWER, ROLE.SOURCES, ROLE.RELATED_RESOURCES, ROLE.QUERY_SUGGESTIONS, ROLE.RELATED_QUESTIONS, ROLE.AFFILIATION, ROLE.FACETS, ROLE.TOTAL]);
 function isDataRole(role) {
   return DATA_ROLE_SET.has(role);
 }
-const DATA_ASPECT = exports.DATA_ASPECT = Object.freeze({
-  AUTOCOMPLETE: 'autocomplete'
-});
-const LAYOUT_CATEGORY = exports.LAYOUT_CATEGORY = Object.freeze({
-  CONTAINER: 'container',
-  BANNER: 'banner',
-  LIST: 'list',
-  QUERY: 'query',
-  RADIO: 'radio',
-  FILTERS: 'filters',
-  TEXT: 'text',
-  AFFILIATION: 'affiliation',
-  ERROR: 'error'
-});
+const PRODUCT_ROLE_SET = new Set([ROLE.PRODUCTS, ROLE.SOURCES, ROLE.RELATED_RESOURCES]);
+function isProductRole(role) {
+  return PRODUCT_ROLE_SET.has(role);
+}
 const EVENT_TYPE = exports.EVENT_TYPE = Object.freeze({
   IMPRESSION: 'impression',
   VIEWABLE: 'viewable',
   CLICK: 'click',
-  SUBMIT: 'submit'
+  SUBMIT: 'submit',
+  FEEDBACK: 'feedback'
 });
-const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK, EVENT_TYPE.SUBMIT];
+const TRACKING_EVENT_TYPES = exports.TRACKING_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK, EVENT_TYPE.SUBMIT, EVENT_TYPE.FEEDBACK];
+const PERFORMANCE_EVENT_TYPES = exports.PERFORMANCE_EVENT_TYPES = [EVENT_TYPE.IMPRESSION, EVENT_TYPE.VIEWABLE, EVENT_TYPE.CLICK];
+const PERFORMANCE_EVENT_TYPE_SET = new Set(PERFORMANCE_EVENT_TYPES);
+function isPerformanceEventType(type) {
+  return PERFORMANCE_EVENT_TYPE_SET.has(type);
+}
 const TRACKING_STATUS = exports.TRACKING_STATUS = Object.freeze({
   UNTRACKED: 'untracked',
   TRACKING: 'tracking',

package/dist/cjs/defaults/hybrid-search/answer-box.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _constants = require("./constants.js");
 var _constants2 = require("../../constants.js");
+var _index = require("../../actor/index.js");
 var _phrases = require("./phrases.js");
 const CLASS_OPEN = 'answer-box-open';
 const CLASS_SHOWN = 'answer-box-shown';
@@ -29,7 +30,12 @@ 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);
@@ -38,7 +44,9 @@ class AnswerBox {
     // sync state
     this._syncWofkflowStatus();
     this._syncButtonText();
-    this._unsubscribes = [() => element.removeEventListener('click', callback), workflow.on('loading', () => this.hide()), workflow.on('error', () => this.show()), workflow.on('ready', () => this.show())];
+    this._unsubscribes = [() => element.removeEventListener('click', callback),
+    // cling to data rather than view, as we may miss view event when tab is inactive due to raf
+    workflow._answer._hub.on(_index.fields.data(), () => this._syncWofkflowStatus())];
   }
   _handleClick(_ref) {
     let {
@@ -56,7 +64,7 @@ class AnswerBox {
   _syncWofkflowStatus() {
     const {
       status
-    } = this._workflow;
+    } = this._workflow._answer;
     switch (status) {
       case _constants2.STATUS.ERRONEOUS:
       case _constants2.STATUS.READY:
@@ -75,6 +83,13 @@ class AnswerBox {
       button.textContent = phrase;
     }
   }
+  _syncScroll() {
+    if (!this.isOpen) {
+      this._element.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }
   destroy() {
     for (const unsubscribe of this._unsubscribes) {
       unsubscribe();
@@ -110,6 +125,7 @@ for (const [method, [action, className]] of Object.entries(METHODS)) {
     this._updateBoxStatus(action, className);
     if (className === CLASS_OPEN) {
       this._syncButtonText();
+      this._syncScroll();
     }
   };
 }

package/dist/cjs/defaults/hybrid-search/phrases.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sources = exports.showMore = exports.showLess = exports.question = exports.keywords = exports.hits = void 0;
+exports.total = exports.sources = exports.showMore = exports.showLess = exports.question = exports.keywords = void 0;
 /**
- * The phrase displayed right before <miso-question>
+ * The phrase to display <miso-question>
  */
-const question = exports.question = 'You asked...';
+const question = exports.question = 'You asked “${value}”';
 
 /**
  * The phrase displayed right before <miso-sources>
@@ -20,8 +20,8 @@ const sources = exports.sources = 'Sources';
 const keywords = exports.keywords = 'You searched for “${value}”';
 
 /**
- * The phrase to display <miso-hits>
+ * The phrase to display <miso-total>
  */
-const hits = exports.hits = '${value} Results';
+const total = exports.total = '${value} Results';
 const showMore = exports.showMore = 'Show more';
 const showLess = exports.showLess = 'Show less';

package/dist/cjs/defaults/hybrid-search/templates.js

@@ -31,6 +31,15 @@ class Sections extends _templates.Sections {
       classes: [`${classPrefix}__answer-box-inner`]
     }, this.answerGroup(options)), this.answerBoxToggle(options)]);
   }
+  question(options) {
+    const {
+      phrase
+    } = this._helpers;
+    return phrase(options, {
+      name: 'question',
+      tag: 'div'
+    }).replaceAll('${value}', '<miso-question></miso-question>');
+  }
   answerBoxToggle(options) {
     const {
       element
@@ -51,8 +60,8 @@ class Sections extends _templates.Sections {
     } = this._helpers;
     return container(options, {
       name: 'search-results',
-      visibleWhen: 'ready'
-    }, [this.searchResultsInfoGroup(options), this.searchResultsFilters(options), '<miso-products></miso-products>']);
+      visibleWhen: 'loading ready'
+    }, [this.searchResultsInfoGroup(options), this.searchResultsFilters(options), '<miso-products></miso-products>', this.more(options)]);
   }
   searchResultsInfoGroup(options) {
     const {
@@ -63,7 +72,7 @@ class Sections extends _templates.Sections {
     } = options;
     return element('div', {
       classes: [`${classPrefix}__search-results-info`]
-    }, [this.keywords(options), this.hits(options)]);
+    }, [this.keywords(options), this.total(options)]);
   }
   searchResultsFilters(options) {
     const {
@@ -86,15 +95,29 @@ class Sections extends _templates.Sections {
       inline: true
     }).replaceAll('${value}', '<miso-keywords></miso-keywords>');
   }
-  hits(options) {
+  total(options) {
     const {
       phrase
     } = this._helpers;
     return phrase(options, {
-      name: 'hits',
+      name: 'total',
       tag: 'div',
       inline: true
-    }).replaceAll('${value}', '<miso-hits></miso-hits>');
+    }).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>']);
   }
 }
 const helpers = exports.helpers = (0, _commons.externalize)(new _templates.Helpers(Object.assign({}, CONSTANTS, {
@@ -112,16 +135,21 @@ function root() {
   } = helpers;
   options = normalizeOptions(options);
   const {
-    answerBox
+    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, {
+  }, answerBoxOptions ? [answerBox(options)] : answerGroup(options)), section(options, {
     name: 'search-results'
-  }, sections.searchResultsGroup(options))].join('');
+  }, searchResultsGroup(options))].join('');
 }
 ;

package/dist/cjs/element/role/index.js

@@ -33,16 +33,16 @@ Object.defineProperty(exports, "MisoFeedbackElement", {
     return _misoFeedback.default;
   }
 });
-Object.defineProperty(exports, "MisoHitsElement", {
+Object.defineProperty(exports, "MisoKeywordsElement", {
   enumerable: true,
   get: function () {
-    return _misoHits.default;
+    return _misoKeywords.default;
   }
 });
-Object.defineProperty(exports, "MisoKeywordsElement", {
+Object.defineProperty(exports, "MisoMoreElement", {
   enumerable: true,
   get: function () {
-    return _misoKeywords.default;
+    return _misoMore.default;
   }
 });
 Object.defineProperty(exports, "MisoProductsElement", {
@@ -99,6 +99,12 @@ Object.defineProperty(exports, "MisoSovrnAffiliationElement", {
     return _misoAffiliation.default;
   }
 });
+Object.defineProperty(exports, "MisoTotalElement", {
+  enumerable: true,
+  get: function () {
+    return _misoTotal.default;
+  }
+});
 var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
 var _misoQuery = _interopRequireDefault(require("./miso-query.js"));
 var _misoQuerySuggestions = _interopRequireDefault(require("./miso-query-suggestions.js"));
@@ -112,7 +118,8 @@ var _misoRelatedResources = _interopRequireDefault(require("./miso-related-resou
 var _misoRelatedQuestions = _interopRequireDefault(require("./miso-related-questions.js"));
 var _misoAffiliation = _interopRequireDefault(require("./miso-affiliation.js"));
 var _misoKeywords = _interopRequireDefault(require("./miso-keywords.js"));
-var _misoHits = _interopRequireDefault(require("./miso-hits.js"));
+var _misoTotal = _interopRequireDefault(require("./miso-total.js"));
 var _misoFacets = _interopRequireDefault(require("./miso-facets.js"));
+var _misoMore = _interopRequireDefault(require("./miso-more.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -7,14 +7,14 @@ exports.default = void 0;
 var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
 var _constants = require("../../constants.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-class MisoHitsElement extends _misoComponent.default {
+class MisoMoreElement extends _misoComponent.default {
   constructor() {
     super({
-      role: _constants.ROLE.HITS
+      role: _constants.ROLE.MORE
     });
   }
   static get tagName() {
-    return 'miso-hits';
+    return 'miso-more';
   }
 }
-exports.default = MisoHitsElement;
+exports.default = MisoMoreElement;

package/dist/cjs/element/role/miso-total.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoTotalElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.TOTAL
+    });
+  }
+  static get tagName() {
+    return 'miso-total';
+  }
+}
+exports.default = MisoTotalElement;

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

@@ -166,9 +166,6 @@ function autoplayOptionsEquals(a, b) {
 */
 
 class AffiliationLayout extends _collection.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.AFFILIATION;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/banner/banner.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _svgs = require("../svgs.js");
 const _excluded = ["className", "templates"];
@@ -27,9 +26,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
 // TODO: give a role and make this customizable
 
 class BannerLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.BANNER;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/button/more-button.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants.js");
+var _index = require("../../actor/index.js");
+var _template = _interopRequireDefault(require("../template.js"));
+const _excluded = ["className", "templates"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+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 !== _constants.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';
+}
+class MoreButtonLayout extends _template.default {
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor() {
+    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, 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(_index.fields.more());
+  }
+}
+exports.default = MoreButtonLayout;

package/dist/cjs/layout/container/container.js

@@ -13,9 +13,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'container';
 class ContainerLayout extends _raf.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.CONTAINER;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/error/error.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -33,9 +32,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   message
 });
 class ErrorLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.ERROR;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ListLayout", {
     return _list.default;
   }
 });
+Object.defineProperty(exports, "MoreButtonLayout", {
+  enumerable: true,
+  get: function () {
+    return _moreButton.default;
+  }
+});
 Object.defineProperty(exports, "OptionListLayout", {
   enumerable: true,
   get: function () {
@@ -108,4 +114,5 @@ var _text = _interopRequireDefault(require("./text/text.js"));
 var _index = _interopRequireDefault(require("./text/typewriter/index.js"));
 var _affiliation = _interopRequireDefault(require("./affiliation/affiliation.js"));
 var _facets = _interopRequireDefault(require("./input/facets.js"));
+var _moreButton = _interopRequireDefault(require("./button/more-button.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/layout/input/facets.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _bindings = _interopRequireDefault(require("../../util/bindings.js"));
 const _excluded = ["className", "templates"];
@@ -126,9 +125,6 @@ function getSelectedValues(facets) {
   return selections;
 }
 class FacetsLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.FILTERS;
-  }
   static get type() {
     return TYPE;
   }
@@ -161,10 +157,10 @@ class FacetsLayout extends _template.default {
   }
   _render(element, data, controls) {
     super._render(element, data, controls);
-    this._syncSelections();
   }
   _afterRender(element, state) {
     this._syncBindings(element, state);
+    this._syncSelections();
   }
   _unrender() {
     this._clearBindings();
@@ -270,6 +266,10 @@ class FacetsLayout extends _template.default {
     return Array.from(element.querySelectorAll(`[data-role="option"]`));
   }
   _handleClick(event) {
+    // only left click
+    if (event.button !== 0) {
+      return;
+    }
     const element = event.target.closest(`[data-role="option"]`);
     if (!element) {
       return;

package/dist/cjs/layout/input/option-list.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
-var _constants = require("../../constants.js");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
 var _trackable = require("../trackable.js");
@@ -54,9 +53,6 @@ const DEFAULT_TEMPLATES = Object.freeze({
   option
 });
 class OptionListLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.QUERY;
-  }
   static get type() {
     return TYPE;
   }

package/dist/cjs/layout/input/search-box.js

@@ -19,26 +19,40 @@ const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 function root(layout) {
   const {
     className,
+    templates,
     role,
     options,
-    workflow,
     autocomplete
   } = layout;
   const {
-    placeholder,
-    buttonText
+    placeholder
   } = options;
   const roleAttr = role ? `data-role="${role}"` : '';
-  const buttonContent = buttonText || workflow === 'search' ? _svgs.SEARCH : _svgs.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) : (0, _svgs.getIcon)(buttonIcon) || `${buttonIcon}`;
+  return text + icon;
+}
 function completions(layout, items) {
   const {
     templates,
@@ -93,10 +107,7 @@ function completionList(layout, type, items) {
     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) {
   const {
@@ -110,6 +121,9 @@ function completionItem(layout, type, item) {
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
+  buttonContent,
+  buttonText: '',
+  buttonIcon: 'search',
   completions,
   completionList,
   completionItem,
@@ -125,9 +139,6 @@ const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
   debounce: 300
 });
 class SearchBoxLayout extends _template.default {
-  static get category() {
-    return _constants.LAYOUT_CATEGORY.QUERY;
-  }
   static get type() {
     return TYPE;
   }
@@ -161,7 +172,7 @@ class SearchBoxLayout extends _template.default {
       proxyElement,
       hub
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e)), hub.on(_index.fields.data(_constants.DATA_ASPECT.AUTOCOMPLETE), () => view.refresh({
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('input', e => this._syncInput(e)), proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e)), proxyElement.on('focusin', e => this._handleFocusIn(e)), proxyElement.on('focusout', e => this._handleFocusOut(e)), hub.on(_index.fields.completions(), () => view.refresh({
       force: true
     }))];
   }
@@ -195,7 +206,7 @@ class SearchBoxLayout extends _template.default {
       state
     });
     return Object.assign({}, state, {
-      completions: this._view.hub.states[_index.fields.data(_constants.DATA_ASPECT.AUTOCOMPLETE)]
+      completions: this._view.hub.states[_index.fields.completions()]
     });
   }
   _render(element, data, controls) {
@@ -204,6 +215,8 @@ class SearchBoxLayout extends _template.default {
       super._render(element, data, controls);
     }
     this._updateCompletions(element, data, controls);
+  }
+  _afterRender(element, state) {
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
   }
@@ -220,9 +233,12 @@ class SearchBoxLayout extends _template.default {
     }
     const {
       status = _constants.STATUS.INITIAL,
-      index,
+      session,
       value: completions
     } = state.completions;
+    const {
+      index
+    } = session;
     if (rendered && rendered.completions.index === index && rendered.completions.status === status) {
       return;
     }
@@ -315,7 +331,7 @@ class SearchBoxLayout extends _template.default {
       target,
       isComposing
     } = _ref8;
-    if (!isComposing && key === 'Enter' && target.matches('input')) {
+    if (!isComposing && key === 'Enter' && target.matches('[data-role="input"]')) {
       this._submit(target.value);
       target.blur();
     }
@@ -384,7 +400,9 @@ class SearchBoxLayout extends _template.default {
     if (!options) {
       return;
     }
-    this._view.tracker.submit(value);
+    this._view.tracker.submit({
+      value
+    }); // not array
   }
 }
 exports.default = SearchBoxLayout;