Upgraded typeahead library. (jupyter#4944)

Author: ahangsleben

bower.json

@@ -12,7 +12,7 @@
     "google-caja": "5669",
     "jed": "~1.1.1",
     "jquery": "components/jquery#~3.4.1",
-    "jquery-typeahead": "~2.0.0",
+    "jquery-typeahead": "~2.10.6",
     "jquery-ui": "components/jqueryui#~1.12",
     "marked": "~0.5",
     "MathJax": "^2.7.4",

notebook/static/notebook/js/commandpalette.js

@@ -44,20 +44,20 @@ define([
         // typeahead lib need a specific layout with specific class names.
         // the following just does that
         var form = $('<form/>');
-        var container = $('<div/>').addClass('typeahead-container');
-        var field = $('<div/>').addClass('typeahead-field');
+        var container = $('<div/>').addClass('typeahead__container');
+        var field = $('<div/>').addClass('typeahead__field');
         var input = $('<input/>').attr('type', 'search');
 
         field
           .append(
-            $('<span>').addClass('typeahead-query').append(
+            $('<span>').addClass('typeahead__query').append(
               input
             )
           )
           .append(
-            $('<span/>').addClass('typeahead-button').append(
+            $('<span/>').addClass('typeahead__button').append(
               $('<button/>').attr('type', 'submit').append(
-                $('<span/>').addClass('typeahead-search-icon')
+                $('<span/>').addClass('typeahead__search-icon')
               )
             )
           );
@@ -185,7 +185,9 @@ define([
           maxItem: 1e3,
           minLength: 0,
           hint: true,
-          group: ["group", "{{group}} command group"],
+          group: {
+            template:"{{group}} command group"
+          },
           searchOnFocus: true,
           mustSelectItem: true,
           template: '<i class="fa fa-icon {{icon}}"></i>{{display}}  <div title={{key}} class="pull-right {{mode_shortcut}}">{{shortcut}}</div>',

notebook/static/notebook/js/main.js

@@ -19,6 +19,13 @@ var bind = function bind(obj) {
 };
 Function.prototype.bind = Function.prototype.bind || bind ;
 
+requirejs.config({
+  map: {
+    "*": {
+      "typeahead": "jquery-typeahead"
+    }
+  }
+})
 
 requirejs([
     'jquery',

notebook/static/notebook/less/commandpalette.less

@@ -1,14 +1,12 @@
-ul.typeahead-list i{
-    margin-left: -10px;
-    width: 18px;
+div.typeahead__container {
+  font: revert;
 }
 
-[dir="rtl"] ul.typeahead-list i {
-    margin-left: 0;
-    margin-right: -10px;
+ul.typeahead__list i {
+    width: 18px;
 }
 
-ul.typeahead-list {
+ul.typeahead__list {
   max-height: 80vh;
   overflow:auto;
 
@@ -19,11 +17,11 @@ ul.typeahead-list {
     }
 }
 
-ul.typeahead-list & > li > a.pull-right {
+ul.typeahead__list & > li > a.pull-right {
     .pull-left();
 }
 
-[dir="rtl"] .typeahead-list {
+[dir="rtl"] .typeahead__list {
     text-align : right;
 }
 

tools/build-main.js

@@ -25,21 +25,18 @@ var rjs_config = {
     moment: 'components/moment/min/moment-with-locales',
     codemirror: 'components/codemirror',
     xterm: 'components/xterm.js/index',
-    'xtermjs-fit': 'components/xterm.js-fit/index',
-    typeahead: 'components/jquery-typeahead/dist/jquery.typeahead',
+    "xtermjs-fit": 'components/xterm.js-fit/index',
+    "jquery-typeahead": 'components/jquery-typeahead/dist/jquery.typeahead.min',
     contents: 'empty:',
     custom: 'empty:',
   },
   map: { // for backward compatibility
     "*": {
         "jqueryui": "jquery-ui",
+        "typeahead": "jquery-typeahead"
     }
   },
   shim: {
-    typeahead: {
-            deps: ["jquery"],
-            exports: "typeahead"
-          },
     underscore: {
       exports: '_'
     },