feat(popup-menu): add API to provide custom no search results entry

lib/features/popup-menu/PopupMenu.js

@@ -104,6 +104,7 @@ PopupMenu.prototype._render = function() {
     className,
     entries,
     headerEntries,
+    emptyPlaceholder,
     options
   } = this._current;
 
@@ -133,6 +134,7 @@ PopupMenu.prototype._render = function() {
         className=${ className }
         entries=${ entriesArray }
         headerEntries=${ headerEntriesArray }
+        emptyPlaceholder=${ emptyPlaceholder }
         scale=${ scale }
         onOpened=${ this._onOpened.bind(this) }
         onClosed=${ this._onClosed.bind(this) }
@@ -171,7 +173,8 @@ PopupMenu.prototype.open = function(target, providerId, position, options) {
 
   const {
     entries,
-    headerEntries
+    headerEntries,
+    emptyPlaceholder
   } = this._getContext(target, providerId);
 
   this._current = {
@@ -180,6 +183,7 @@ PopupMenu.prototype.open = function(target, providerId, position, options) {
     target,
     entries,
     headerEntries,
+    emptyPlaceholder,
     container: this._createContainer({ provider: providerId }),
     options
   };
@@ -204,9 +208,12 @@ PopupMenu.prototype._getContext = function(target, provider) {
 
   const headerEntries = this._getHeaderEntries(target, providers);
 
+  const emptyPlaceholder = this._getEmptyPlaceholder(providers);
+
   return {
     entries,
     headerEntries,
+    emptyPlaceholder,
     empty: !(
       Object.keys(entries).length ||
           Object.keys(headerEntries).length
@@ -509,6 +516,16 @@ PopupMenu.prototype._getHeaderEntries = function(target, providers) {
 };
 
 
+PopupMenu.prototype._getEmptyPlaceholder = function(providers) {
+
+  const provider = providers.find(
+    provider => isFunction(provider.getEmptyPlaceholder)
+  );
+
+  return provider && provider.getEmptyPlaceholder();
+};
+
+
 /**
  * Check if the popup menu is open.
  *

lib/features/popup-menu/PopupMenuComponent.js

@@ -15,11 +15,12 @@ import {
 
 import PopupMenuList from './PopupMenuList';
 import classNames from 'clsx';
-import { isDefined } from 'min-dash';
+import { isDefined, isFunction } from 'min-dash';
 
 /**
  * @typedef {import('./PopupMenuProvider').PopupMenuEntry} PopupMenuEntry
  * @typedef {import('./PopupMenuProvider').PopupMenuHeaderEntry} PopupMenuHeaderEntry
+ * @typedef {import('./PopupMenuProvider').PopupMenuEmptyPlaceholderProvider | import('./PopupMenuProvider').PopupMenuEmptyPlaceholder} PopupMenuEmptyPlaceholder
  *
  * @typedef {import('../../util/Types').Point} Point
  */
@@ -36,6 +37,7 @@ import { isDefined } from 'min-dash';
  * @param {number} props.scale
  * @param {string} [props.title]
  * @param {boolean} [props.search]
+ * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
  * @param {number} [props.width]
  */
 export default function PopupMenuComponent(props) {
@@ -49,6 +51,7 @@ export default function PopupMenuComponent(props) {
     width,
     scale,
     search,
+    emptyPlaceholder,
     entries: originalEntries,
     onOpened,
     onClosed
@@ -81,18 +84,17 @@ export default function PopupMenuComponent(props) {
         return false;
       }
 
-      const search = [
+      const searchableFields = [
         entry.description || '',
         entry.label || '',
         entry.search || ''
-      ]
-        .join('---')
-        .toLowerCase();
+      ].map(string => string.toLowerCase());
 
+      // every word of `value` should be included in one of the searchable fields
       return value
         .toLowerCase()
         .split(/\s/g)
-        .every(term => search.includes(term));
+        .every(word => searchableFields.some(field => field.includes(word)));
     };
 
     return originalEntries.filter(filter);
@@ -197,7 +199,7 @@ export default function PopupMenuComponent(props) {
       onKeyup=${ handleKey }
       onKeydown=${ handleKeyDown }
       className=${ className }
-      position=${position}
+      position=${ position }
       width=${ width }
       scale=${ scale }
     >
@@ -245,8 +247,8 @@ export default function PopupMenuComponent(props) {
             onAction=${ onSelect }
           />
         </div>
-        ${ entries.length === 0 && html`
-          <div class="djs-popup-no-results">No matching entries found.</div>
+        ${ emptyPlaceholder && entries.length === 0 && html`
+          <div class="djs-popup-no-results">${ isFunction(emptyPlaceholder) ? emptyPlaceholder(value) : emptyPlaceholder }</div>
         ` }
       ` }
     </${PopupMenuWrapper}>
@@ -311,7 +313,7 @@ function PopupMenuWrapper(props) {
         ref=${ popupRef }
         tabIndex="-1"
       >
-        ${children}
+        ${ children }
       </div>
     </div>
   `;

lib/features/popup-menu/PopupMenuProvider.spec.ts

@@ -3,8 +3,8 @@ import { PopupMenuTarget } from './PopupMenu';
 import PopupMenuProvider, {
   PopupMenuEntries,
   PopupMenuHeaderEntries,
-  PopupMenuEntriesCallback,
-  PopupMenuProviderHeaderEntriesCallback
+  PopupMenuEntriesProvider,
+  PopupMenuProviderHeaderEntriesProvider
 } from './PopupMenuProvider';
 
 export class FooPopupMenuProvider implements PopupMenuProvider {
@@ -29,7 +29,7 @@ export class FooPopupMenuProvider implements PopupMenuProvider {
 }
 
 export class BarPopupMenuProvider implements PopupMenuProvider {
-  getPopupMenuEntries(target: PopupMenuTarget): PopupMenuEntriesCallback {
+  getPopupMenuEntries(target: PopupMenuTarget): PopupMenuEntriesProvider {
     return function(entries) {
       return {
         ...entries,
@@ -85,7 +85,7 @@ export class BazPopupMenuProvider implements PopupMenuProvider {
     return {};
   }
 
-  getHeaderEntries(target: PopupMenuTarget): PopupMenuProviderHeaderEntriesCallback {
+  getHeaderEntries(target: PopupMenuTarget): PopupMenuProviderHeaderEntriesProvider {
     return function(entries) {
       return [
         ...entries,

lib/features/popup-menu/PopupMenuProvider.ts

@@ -1,3 +1,5 @@
+import { VNode } from '@bpmn-io/diagram-js-ui';
+
 import { PopupMenuTarget } from './PopupMenu';
 
 export type PopupMenuEntryAction = (event: Event, entry: PopupMenuEntry, action?: string) => any;
@@ -12,7 +14,7 @@ export type PopupMenuEntry = {
 
 export type PopupMenuEntries = Record<string, PopupMenuEntry>;
 
-export type PopupMenuEntriesCallback = (entries: PopupMenuEntries) => PopupMenuEntries;
+export type PopupMenuEntriesProvider = (entries: PopupMenuEntries) => PopupMenuEntries;
 
 export type PopupMenuHeaderEntryAction = (event: Event, entry: PopupMenuHeaderEntry, action?: string) => any;
 
@@ -29,7 +31,11 @@ export type PopupMenuHeaderEntry = {
 
 export type PopupMenuHeaderEntries = PopupMenuHeaderEntry[];
 
-export type PopupMenuProviderHeaderEntriesCallback = (entries: PopupMenuHeaderEntries) => PopupMenuHeaderEntries;
+export type PopupMenuProviderHeaderEntriesProvider = (entries: PopupMenuHeaderEntries) => PopupMenuHeaderEntries;
+
+export type PopupMenuEmptyPlaceholder = VNode;
+
+export type PopupMenuEmptyPlaceholderProvider = (search: string) => PopupMenuEmptyPlaceholder;
 
 /**
  * An interface to be implemented by a popup menu provider.
@@ -64,7 +70,7 @@ export default interface PopupMenuProvider {
    *
    * @param target
    */
-  getPopupMenuEntries(target: PopupMenuTarget): PopupMenuEntriesCallback | PopupMenuEntries;
+  getPopupMenuEntries(target: PopupMenuTarget): PopupMenuEntriesProvider | PopupMenuEntries;
 
   /**
    * Returns a list of header entries or a function that receives, modifies and
@@ -96,5 +102,21 @@ export default interface PopupMenuProvider {
    *
    * @param target
    */
-  getHeaderEntries?(target: PopupMenuTarget): PopupMenuProviderHeaderEntriesCallback | PopupMenuHeaderEntries;
+  getHeaderEntries?(target: PopupMenuTarget): PopupMenuProviderHeaderEntriesProvider | PopupMenuHeaderEntries;
+
+  /**
+   * Returns a component to be displayed when no popup menu entries
+   * match a given search query.
+   *
+   * @example
+   *
+   * ```javascript
+   * getEmptyPlaceholder() {
+   *   return (search) => <>
+   *     No results for <strong>{ search }</strong>
+   *   <>;
+   * }
+   * ```
+   */
+  getEmptyPlaceholder?(): PopupMenuEmptyPlaceholderProvider | PopupMenuEmptyPlaceholder;
 }