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

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

@@ -8,22 +8,23 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _templates = require("../templates.js");
 var _svgs = require("../../asset/svgs.js");
-const _excluded = ["className", "templates"];
+const _excluded = ["className", "templates", "autocomplete"];
 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.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 const TYPE = 'search-box';
 const DEFAULT_CLASSNAME = 'miso-search-box';
+const DEFAULT_AUTOCOMPLETE_CLASSNAME = 'miso-autocomplete';
 function root(layout) {
   const {
     className,
     role,
-    templates,
     options,
-    workflow
+    workflow,
+    autocomplete
   } = layout;
   const {
-    autocomplete,
     placeholder,
     buttonText
   } = options;
@@ -33,41 +34,96 @@ function root(layout) {
 <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="button">${buttonContent}</button>
+    <button class="${className}__button" type="submit" data-role="submit">${buttonContent}</button>
   </div>
-  ${autocomplete ? templates.autocomplete(layout) : ''}
-</div>
-`;
+  <div class="${autocomplete.className}" data-role="autocomplete"></div>
+</div>`.trim();
 }
-function autocomplete(layout) {
+function completions(layout, items) {
+  const {
+    templates,
+    workflow,
+    autocomplete
+  } = layout;
+  // use options under layout.autocomplete from now on
+  layout = Object.assign({
+    templates,
+    workflow
+  }, autocomplete);
+  const products = [],
+    queries = [];
+  for (const item of items) {
+    (item.product ? products : queries).push(item);
+  }
+  return templates.queries(layout, queries) + (queries.length > 0 && products.length > 0 ? `<hr>` : '') + templates.products(layout, products);
+}
+function queries(layout, items) {
   const {
-    className,
     templates
   } = layout;
-  return `
-<div class="${className}__autocomplete" data-role="autocomplete">
-  ${templates.suggestionList(layout)}
-</div>
-`;
+  return templates.completionList(layout, 'query', items);
 }
-function suggestionList(layout) {
+function products(layout, items) {
   const {
-    className
+    templates
   } = layout;
-  return `<ol class="${className}__suggestion-list" data-role="suggestion-list"></ol>`;
+  return templates.completionList(layout, 'product', items);
+}
+function query(layout) {
+  let {
+    text,
+    text_with_inverted_markups
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return text_with_inverted_markups || (0, _commons.escapeHtml)(text);
+}
+function product(layout, _ref) {
+  let {
+    product
+  } = _ref;
+  const {
+    templates
+  } = layout;
+  const [openTag, closeTag] = _templates.helpers.tagPair(layout, product, {
+    role: false
+  });
+  return [openTag, templates.imageBlock(layout, product), templates.productInfoBlock(layout, product), closeTag].join('');
+}
+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();
 }
-function suggestionItem(layout, value) {
+function completionItem(layout, type, item) {
   const {
-    className
+    className,
+    templates
   } = layout;
-  const text = (0, _commons.escapeHtml)(value.text || value);
-  return `<li class="${className}__suggestion-item" data-role="suggestion-item" tabindex="0">${text}</li>`;
+  return `
+<li class="${className}__${type}-item" data-role="${type}-item" data-index="${item._index}" tabindex="0">
+  ${templates[type](layout, item)}
+</li>`.trim();
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
-  autocomplete,
-  suggestionList,
-  suggestionItem
+  completions,
+  completionList,
+  completionItem,
+  queries,
+  products,
+  query,
+  product,
+  imageBlock: _templates.imageBlock,
+  productInfoBlock: _templates.productInfoBlock,
+  helpers: _templates.helpers
+});
+const DEFAULT_AUTOCOMPLETE_OPTIONS = Object.freeze({
+  className: DEFAULT_AUTOCOMPLETE_CLASSNAME,
+  debounce: 300
 });
 class SearchBoxLayout extends _template.default {
   static get category() {
@@ -83,34 +139,37 @@ class SearchBoxLayout extends _template.default {
     return DEFAULT_CLASSNAME;
   }
   constructor() {
-    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let {
         className = DEFAULT_CLASSNAME,
-        templates
-      } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, _excluded);
+        templates,
+        autocomplete
+      } = _ref2,
+      options = _objectWithoutPropertiesLoose(_ref2, _excluded);
     super(Object.assign({
       className,
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
+    (0, _commons.defineValues)(this, {
+      autocomplete: Object.assign({}, DEFAULT_AUTOCOMPLETE_OPTIONS, autocomplete)
+    });
     this._contexts = new WeakMap();
-    this._suggestionItems = new WeakMap(); // TODO: put them on elements as layout can be potentially replaced
+    this._prevInput = undefined;
+    this._debounce = (0, _commons.debounce)(this.autocomplete.debounce);
   }
   initialize(view) {
-    const {
-      autocomplete
-    } = this.options;
     this._view = view;
     const {
       proxyElement,
       hub
     } = view;
-    this._unsubscribes = [...this._unsubscribes, proxyElement.on('keydown', e => this._handleKeyDown(e)), proxyElement.on('click', e => this._handleClick(e))];
-    if (autocomplete) {
-      this._unsubscribes.push(hub.on(_index.fields.suggestions(), () => this._handleInput()));
-    }
+    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))];
+    this._unsubscribes.push(hub.on(_index.fields.completions(), () => view.refresh({
+      force: true
+    })));
   }
   focus() {
+    // TODO: support blur as well
     if (this._element) {
       this._context().focus();
     } else {
@@ -118,6 +177,12 @@ class SearchBoxLayout extends _template.default {
       this._focusRequested = true;
     }
   }
+  open() {
+    this._element.classList.add('open');
+  }
+  close() {
+    this._element.classList.remove('open');
+  }
   set value(value) {
     if (this._element) {
       this._context().value = value;
@@ -125,22 +190,15 @@ class SearchBoxLayout extends _template.default {
       this._valueRequested = value;
     }
   }
-  _preprocess(_ref2) {
+  _preprocess(_ref3) {
     let {
       state
-    } = _ref2;
+    } = _ref3;
     state = super._preprocess({
       state
     });
-    const {
-      autocomplete
-    } = this.options;
-    if (!autocomplete) {
-      return state;
-    }
-    const suggestions = this._view.hub.states[_index.fields.suggestions()];
     return Object.assign({}, state, {
-      suggestions
+      completions: this._view.hub.states[_index.fields.completions()]
     });
   }
   _render(element, data, controls) {
@@ -148,58 +206,46 @@ class SearchBoxLayout extends _template.default {
       // only render the template once, and also skip if there are children already to allow customized DOM
       super._render(element, data, controls);
     }
-    this._setupAutocomplete(element);
-    this._renderSuggestions(element, data, controls);
+    this._updateCompletions(element, data, controls);
     this._fullfillFocusRequest(element);
     this._fullfillValueRequest(element);
   }
-  _setupAutocomplete(element) {
-    const {
-      autocomplete
-    } = this.options;
-    if (!autocomplete) {
-      return;
-    }
-    this._context(element).setupAutocomplete();
-  }
-  _renderSuggestions(element, _ref3) {
+  _updateCompletions(element, _ref4, _ref5) {
     let {
-      state
-    } = _ref3;
+      state,
+      rendered
+    } = _ref4;
     let {
       writeToState
-    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    const {
-      autocomplete
-    } = this.options;
-    if (!autocomplete) {
+    } = _ref5;
+    if (!state.completions) {
       return;
     }
     const {
-      suggestionListElement,
-      autocompleteElement
-    } = this._context(element);
-    if (!suggestionListElement) {
-      // not actually rendered
-      writeToState && writeToState({
-        suggestions: {
-          value: []
-        }
-      });
+      status = _constants.STATUS.INITIAL,
+      index,
+      value: completions
+    } = state.completions;
+    if (rendered && rendered.completions.index === index && rendered.completions.status === status) {
       return;
     }
-
-    // TODO: incremental
+    const context = this._context(element);
     const {
-      suggestions = {}
-    } = state;
-    const suggestionItems = suggestions.value || [];
-    autocompleteElement.classList[suggestionItems.length === 0 ? 'add' : 'remove']('empty');
-    suggestionListElement.innerHTML = suggestionItems.map(suggestion => this.templates.suggestionItem(this, suggestion)).join('');
-    let i = 0;
-    for (const itemElement of suggestionListElement.children) {
-      this._suggestionItems.set(itemElement, suggestionItems[i++]);
+      autocompleteElement
+    } = context;
+    if (!autocompleteElement) {
+      return;
     }
+    const items = context.trackItems(completions);
+    element.classList[items.length > 0 ? 'add' : 'remove']('nonempty');
+    autocompleteElement.setAttribute('data-status', status);
+    autocompleteElement.innerHTML = this.templates.completions(this, items);
+    writeToState({
+      completions: {
+        index,
+        status
+      }
+    });
   }
   _fullfillFocusRequest(element) {
     if (!element || !this._focusRequested) {
@@ -226,56 +272,108 @@ class SearchBoxLayout extends _template.default {
     }
     return context;
   }
-  _handleKeyDown(_ref4) {
+  _syncInput() {
+    const {
+      inputElement
+    } = this._context();
+    if (!inputElement) {
+      return;
+    }
+    const value = inputElement.value.trim();
+    if (this._prevInput === value) {
+      return;
+    }
+    this._prevInput = value;
+    const self = this;
+    this._debounce(() => self._view.hub.update(_index.fields.input(), {
+      value
+    }));
+  }
+  _handleFocusIn(_ref6) {
+    let {
+      target
+    } = _ref6;
+    if (!this._element) {
+      return;
+    }
+    if (target.matches('[data-role="input"]')) {
+      this._syncInput();
+      this.open();
+    }
+  }
+  _handleFocusOut(_ref7) {
+    let {
+      relatedTarget
+    } = _ref7;
+    if (!this._element) {
+      return;
+    }
+    if (!relatedTarget || !(0, _commons.findInAncestors)(relatedTarget, element => element === this._element || undefined)) {
+      this.close();
+    }
+  }
+  _handleKeyDown(_ref8) {
     let {
       key,
       target,
       isComposing
-    } = _ref4;
+    } = _ref8;
     if (!isComposing && key === 'Enter' && target.matches('input')) {
       this._submit(target.value);
       target.blur();
     }
+    // TODO: select completion items with arrow keys
   }
-  _handleClick(_ref5) {
-    let {
+  _handleClick(event) {
+    const {
       target
-    } = _ref5;
+    } = event;
     const {
       inputElement
     } = this._context();
-    for (let element = target; element && element !== this._view.element; element = element.parentElement) {
-      if (element.matches('[type="submit"]') || element.matches('[data-role="button"]')) {
+    for (let element = target; element && element !== this._element; element = element.parentElement) {
+      if (element.matches('[data-role="submit"]') || element.matches('[data-role="button"]') || element.matches('[type="submit"]')) {
         if (inputElement) {
           inputElement.blur();
           this._submit(inputElement.value);
         }
         return;
       }
-    }
-    const {
-      autocomplete
-    } = this.options;
-    if (!autocomplete) {
-      return;
-    }
-    for (let element = target; element && element !== this._view.element; element = element.parentElement) {
-      const suggestion = this._suggestionItems.get(element);
-      if (!suggestion) {
-        continue;
+      if (element.matches('[data-role="query-item"]')) {
+        const index = element.getAttribute('data-index');
+        const item = this._context().data.get(parseInt(index));
+        const value = item && item.text;
+        if (value) {
+          if (inputElement) {
+            inputElement.value = value;
+          }
+          this._view._events.emit('select', Object.freeze({
+            value: item,
+            index,
+            domEvent: event
+          }));
+          if (!event.defaultPrevented) {
+            this._submit(value);
+          }
+        }
+        this.close();
+        return;
       }
-      const value = suggestion.text || suggestion;
-      if (inputElement) {
-        inputElement.value = value;
+      if (element.matches('[data-role="product-item"]')) {
+        this._view._events.emit('select', Object.freeze({
+          value: item,
+          index,
+          domEvent: event
+        }));
+        return;
       }
-      this._submit(value);
-      return;
     }
   }
   async _submit(value) {
     if (!value) {
       return;
     }
+    this.close();
     // TODO: q -> value
     this._view.hub.trigger(_index.fields.query(), {
       q: value
@@ -290,6 +388,7 @@ class Context {
   constructor(element) {
     this._element = element;
     this._cache = {};
+    this._data = new Map();
   }
   get inputElement() {
     return this._get('input');
@@ -297,27 +396,26 @@ class Context {
   get autocompleteElement() {
     return this._get('autocomplete');
   }
-  get suggestionListElement() {
-    return this._get('suggestion-list');
+  get data() {
+    return this._data;
   }
-  setupAutocomplete() {
-    if (!this._element || this._autocompleteSetup) {
-      return;
-    }
-    this._autocompleteSetup = true;
-    const {
-      inputElement,
-      autocompleteElement
-    } = this;
-    if (inputElement && autocompleteElement) {
-      // TODO: should we clean up
-      inputElement.addEventListener('focus', () => {
-        autocompleteElement.classList.add('open');
-      });
-      inputElement.addEventListener('blur', () => {
-        autocompleteElement.classList.remove('open');
-      });
+  trackItems(completions) {
+    let index = 0;
+    const data = this._data = new Map();
+    const items = [];
+    for (const field in completions) {
+      for (const item of completions[field]) {
+        if (item.product && !item.product.url) {
+          continue; // product without URL is not clickable
+        }
+        item._index = index;
+        item._field = field;
+        data.set(index, item);
+        items.push(item);
+        index++;
+      }
     }
+    return items;
   }
   focus() {
     if (!this._element) {

package/dist/cjs/layout/list/collection.js

@@ -84,7 +84,12 @@ const DEFAULT_TEMPLATES = Object.freeze({
   list,
   ordered: false,
   items,
-  item
+  item,
+  productInfoBlock: _templates.productInfoBlock,
+  articleInfoBlock: _templates.articleInfoBlock,
+  imageBlock: _templates.imageBlock,
+  indexBlock: _templates.indexBlock,
+  helpers: _templates.helpers
 });
 class CollectionLayout extends _template.default {
   static get category() {

package/dist/cjs/layout/templates.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.article = article;
+exports.articleInfoBlock = articleInfoBlock;
+exports.helpers = void 0;
+exports.imageBlock = imageBlock;
+exports.indexBlock = indexBlock;
 exports.product = product;
+exports.productInfoBlock = productInfoBlock;
 exports.question = question;
 exports.requiresImplementation = requiresImplementation;
 exports.unimplemented = unimplemented;
@@ -28,19 +33,19 @@ function product(layout, state, data, meta) {
   const {
     templates
   } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
-  return [openTag, (templates.imageBlock || renderImageBlock)(layout, data, meta), (templates.infoBlock || productInfoBlock)(layout, data, meta), (templates.indexBlock || renderIndexBlock)(layout, data, meta), closeTag].join('');
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.productInfoBlock || productInfoBlock)(layout, data, meta), closeTag].join('');
 }
 function question(layout, state, data) {
-  const [openTag, closeTag] = renderTagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data);
   return `${openTag}${data.value || data.text || data}${closeTag}`;
 }
 function article(layout, state, data, meta) {
   const {
     templates
   } = layout;
-  const [openTag, closeTag] = renderTagPair(layout, data);
-  return [openTag, (templates.imageBlock || renderImageBlock)(layout, data, meta), (templates.infoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || renderIndexBlock)(layout, data, meta), closeTag].join('');
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || indexBlock)(layout, data, meta), closeTag].join('');
 }
 function productInfoBlock(_ref, _ref2) {
   let {
@@ -85,7 +90,7 @@ function articleInfoBlock(_ref3, _ref4) {
     content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
   }
   if (date) {
-    content += `<div class="${className}__item-date">${renderDate(date, templates.date)}</div>`;
+    content += `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>`;
   }
   if (snippet) {
     content += `<div class="${className}__item-snippet">${snippet}</div>`;
@@ -94,17 +99,44 @@ function articleInfoBlock(_ref3, _ref4) {
   }
   return `<div class="${className}__item-info-container">${content}</div>`;
 }
+function imageBlock(_ref5, _ref6) {
+  let {
+    className
+  } = _ref5;
+  let {
+    cover_image
+  } = _ref6;
+  if (!cover_image) {
+    return '';
+  }
+  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
+  return `<div class="${className}__item-cover-image-container">${img}</div>`;
+}
+function indexBlock(_ref7, data, _ref8) {
+  let {
+    className
+  } = _ref7;
+  let {
+    index
+  } = _ref8;
+  const i = index + 1;
+  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+}
 
 // helpers //
-function renderTagPair(_ref5, _ref6) {
+function tagPair(_ref9, _ref10) {
   let {
     className,
     options = {}
-  } = _ref5;
+  } = _ref9;
   let {
     product_id,
     url
-  } = _ref6;
+  } = _ref10;
+  let {
+    classSuffix = 'item-body',
+    role = 'item'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     link = {}
   } = options;
@@ -115,30 +147,8 @@ function renderTagPair(_ref5, _ref6) {
   const tag = url ? 'a' : 'div';
   const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${_constants.ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
-  return [`<${tag} class="${className}__item-body" data-role="item" ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
-}
-function renderImageBlock(_ref7, _ref8) {
-  let {
-    className
-  } = _ref7;
-  let {
-    cover_image
-  } = _ref8;
-  if (!cover_image) {
-    return '';
-  }
-  const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  return `<div class="${className}__item-cover-image-container">${img}</div>`;
-}
-function renderIndexBlock(_ref9, data, _ref10) {
-  let {
-    className
-  } = _ref9;
-  let {
-    index
-  } = _ref10;
-  const i = index + 1;
-  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+  const roleAttrs = role ? `data-role="${role}"` : '';
+  return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
 }
 const DEFAULT_DATE_OPTIONS = Object.freeze({
   locale: 'en-US',
@@ -146,7 +156,7 @@ const DEFAULT_DATE_OPTIONS = Object.freeze({
   month: 'short',
   day: 'numeric'
 });
-function renderDate(date) {
+function formatDate(date) {
   let fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_OPTIONS;
   switch (typeof fn) {
     case 'function':
@@ -158,4 +168,9 @@ function renderDate(date) {
     default:
       throw new Error(`Invalid date format: ${fn}`);
   }
-}
+}
+const helpers = exports.helpers = Object.freeze({
+  tagPair,
+  formatDate,
+  escapeHtml: _commons.escapeHtml
+});