Fix lint errors

index.d.ts

@@ -39,54 +39,54 @@ declare namespace EmojiButton {
   export type EmojiTheme = 'dark' | 'light' | 'auto';
 
   export type Placement =
-  | 'auto'
-  | 'auto-start'
-  | 'auto-end'
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end';
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
 
   export type EmojiVersion =
-  | '1.0'
-  | '2.0'
-  | '3.0'
-  | '4.0'
-  | '5.0'
-  | '11.0'
-  | '12.0'
-  | '12.1';
+    | '1.0'
+    | '2.0'
+    | '3.0'
+    | '4.0'
+    | '5.0'
+    | '11.0'
+    | '12.0'
+    | '12.1';
 
   export type Category =
-  | 'smileys'
-  | 'people'
-  | 'animals'
-  | 'food'
-  | 'activities'
-  | 'travel'
-  | 'objects'
-  | 'symbols'
-  | 'flags';
+    | 'smileys'
+    | 'people'
+    | 'animals'
+    | 'food'
+    | 'activities'
+    | 'travel'
+    | 'objects'
+    | 'symbols'
+    | 'flags';
 
   export type I18NCategory =
-  | 'recents'
-  | 'smileys'
-  | 'people'
-  | 'animals'
-  | 'food'
-  | 'activities'
-  | 'travel'
-  | 'objects'
-  | 'symbols'
-  | 'flags';
+    | 'recents'
+    | 'smileys'
+    | 'people'
+    | 'animals'
+    | 'food'
+    | 'activities'
+    | 'travel'
+    | 'objects'
+    | 'symbols'
+    | 'flags';
 
   export interface I18NStrings {
     search: string;

src/categoryButtons.test.ts

@@ -40,7 +40,7 @@ describe('CategoryButtons', () => {
   test('should only render specified categories if they are specified', () => {
     const container = new CategoryButtons(
       {
-        categories: ['smileys', 'animals']
+        categories: ['smileys', 'animals'],
       },
       emitter,
       i18n
@@ -56,7 +56,7 @@ describe('CategoryButtons', () => {
     const container = new CategoryButtons(
       {
         categories: ['smileys', 'animals'],
-        showRecents: true
+        showRecents: true,
       },
       emitter,
       i18n

src/categoryButtons.ts

@@ -22,7 +22,7 @@ const categoryIcons: { [key in I18NCategory]: string } = {
   travel: icons.building,
   objects: icons.lightbulb,
   symbols: icons.music,
-  flags: icons.flag
+  flags: icons.flag,
 };
 
 export class CategoryButtons {
@@ -56,7 +56,7 @@ export class CategoryButtons {
       });
     });
 
-    container.addEventListener('keydown', event => {
+    container.addEventListener('keydown', (event) => {
       switch (event.key) {
         case 'ArrowRight':
           this.events.emit(

src/emoji.test.ts

@@ -11,7 +11,7 @@ describe('Emoji', () => {
     emoji: '😄',
     name: 'smile',
     category: 0,
-    version: '11.0'
+    version: '11.0',
   };
   const options: EmojiButtonOptions = { showRecents: true, style: 'native' };
 
@@ -24,15 +24,15 @@ describe('Emoji', () => {
     expect(element.innerHTML).toEqual(testEmoji.emoji);
   });
 
-  test('should emit the EMOJI event when clicked', done => {
+  test('should emit the EMOJI event when clicked', (done) => {
     const emoji = new Emoji(testEmoji, false, false, events, options);
     const element = emoji.render();
 
-    events.on(EMOJI, e => {
+    events.on(EMOJI, (e) => {
       expect(e).toEqual({
         emoji: testEmoji,
         showVariants: false,
-        button: element
+        button: element,
       });
       done();
     });
@@ -40,11 +40,11 @@ describe('Emoji', () => {
     element.dispatchEvent(new MouseEvent('click'));
   });
 
-  test('should emit the SHOW_PREVIEW event on mouseover if showPreview is true', done => {
+  test('should emit the SHOW_PREVIEW event on mouseover if showPreview is true', (done) => {
     const emoji = new Emoji(testEmoji, false, true, events, options);
     const element = emoji.render();
 
-    events.on(SHOW_PREVIEW, e => {
+    events.on(SHOW_PREVIEW, (e) => {
       expect(e).toEqual(testEmoji);
       done();
     });
@@ -52,7 +52,7 @@ describe('Emoji', () => {
     element.dispatchEvent(new MouseEvent('mouseover'));
   });
 
-  test('should emit the HIDE_PREVIEW event on mouseout if showPreview is true', done => {
+  test('should emit the HIDE_PREVIEW event on mouseout if showPreview is true', (done) => {
     const emoji = new Emoji(testEmoji, false, true, events, options);
     const element = emoji.render();
 

src/emoji.ts

@@ -12,8 +12,8 @@ const CLASS_EMOJI = 'emoji-picker__emoji';
 // Options for twemoji.parse(emoji, twemojiOptions)
 const twemojiOptions = {
   ext: '.svg',
-  folder: 'svg'
-}
+  folder: 'svg',
+};
 
 export class Emoji {
   private emojiButton: HTMLElement;
@@ -59,7 +59,7 @@ export class Emoji {
     this.events.emit(EMOJI, {
       emoji: this.emoji,
       showVariants: this.showVariants,
-      button: this.emojiButton
+      button: this.emojiButton,
     });
   }
 

src/emojiArea.test.ts

@@ -10,7 +10,7 @@ const emitter = new Emitter();
 describe('EmojiArea', () => {
   test('renders an emoji list for each category', () => {
     const emojiArea = new EmojiArea(emitter, i18n, {
-      emojiVersion: '11.0'
+      emojiVersion: '11.0',
     }).render();
 
     const containers = emojiArea.querySelectorAll('.emoji-picker__container');
@@ -28,7 +28,7 @@ describe('EmojiArea', () => {
   test('only renders emoji lists for specified categories', () => {
     const emojiArea = new EmojiArea(emitter, i18n, {
       emojiVersion: '11.0',
-      categories: ['smileys', 'animals']
+      categories: ['smileys', 'animals'],
     }).render();
 
     const containers = emojiArea.querySelectorAll('.emoji-picker__container');
@@ -48,7 +48,7 @@ describe('EmojiArea', () => {
     const emojiArea = new EmojiArea(emitter, i18n, {
       emojiVersion: '11.0',
       categories: ['smileys', 'animals'],
-      showRecents: true
+      showRecents: true,
     }).render();
 
     const containers = emojiArea.querySelectorAll('.emoji-picker__container');

src/emojiArea.ts

@@ -11,13 +11,13 @@ import {
   I18NStrings,
   EmojiButtonOptions,
   EmojiRecord,
-  RecentEmoji
+  RecentEmoji,
 } from './types';
 import { createElement } from './util';
 import { load } from './recent';
 
 const emojiCategories: { [key: string]: EmojiRecord[] } = {};
-emojiData.emoji.forEach(emoji => {
+emojiData.emoji.forEach((emoji) => {
   let categoryList = emojiCategories[emojiData.categories[emoji.category]];
   if (!categoryList) {
     categoryList = emojiCategories[emojiData.categories[emoji.category]] = [];
@@ -69,14 +69,14 @@ export class EmojiArea {
       emojiCategories.recents = load();
     }
 
-    this.categories.forEach(category =>
+    this.categories.forEach((category) =>
       this.addCategory(category, emojiCategories[category])
     );
 
     requestAnimationFrame(() => {
       this.headerOffsets = Array.prototype.map.call(
         this.headers,
-        header => header.offsetTop
+        (header) => header.offsetTop
       ) as number[];
 
       this.selectCategory('smileys', false);
@@ -271,7 +271,7 @@ export class EmojiArea {
       return;
     }
     let closestHeaderIndex = this.headerOffsets.findIndex(
-      offset => offset > Math.round(this.emojis.scrollTop)
+      (offset) => offset > Math.round(this.emojis.scrollTop)
     );
 
     if (closestHeaderIndex === 0) {

src/emojiContainer.test.ts

@@ -6,13 +6,13 @@ describe('EmojiContainer', () => {
   test('should render all the given emojis', () => {
     const emojis = [
       { emoji: '⚡️', version: '12.1', name: 'zap', category: 0 },
-      { emoji: '👍', version: '12.1', name: 'thumbs up', category: 0 }
+      { emoji: '👍', version: '12.1', name: 'thumbs up', category: 0 },
     ];
 
     const events = new Emitter();
 
     const container = new EmojiContainer(emojis, false, events, {
-      emojiVersion: '12.1'
+      emojiVersion: '12.1',
     }).render();
     expect(container.querySelectorAll('.emoji-picker__emoji').length).toBe(2);
   });

src/emojiContainer.ts

@@ -17,7 +17,7 @@ export class EmojiContainer {
     private options: EmojiButtonOptions
   ) {
     this.emojis = emojis.filter(
-      e =>
+      (e) =>
         !(e as EmojiRecord).version ||
         parseFloat((e as EmojiRecord).version as string) <=
           parseFloat(options.emojiVersion as string)
@@ -26,7 +26,7 @@ export class EmojiContainer {
 
   render(): HTMLElement {
     const emojiContainer = createElement('div', CLASS_EMOJI_CONTAINER);
-    this.emojis.forEach(emoji =>
+    this.emojis.forEach((emoji) =>
       emojiContainer.appendChild(
         new Emoji(
           emoji,

src/i18n.ts

@@ -12,7 +12,7 @@ export const i18n: I18NStrings = {
     travel: 'Travel & Places',
     objects: 'Objects',
     symbols: 'Symbols',
-    flags: 'Flags'
+    flags: 'Flags',
   },
-  notFound: 'No emojis found'
+  notFound: 'No emojis found',
 };

src/icons.ts

@@ -7,14 +7,14 @@ import {
   faMusic,
   faSearch,
   faTimes,
-  faUser
+  faUser,
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faBuilding,
   faFlag,
   faFrown,
   faLightbulb,
-  faSmile
+  faSmile,
 } from '@fortawesome/free-regular-svg-icons';
 
 library.add(

src/index.ts

@@ -11,7 +11,7 @@ import {
   EMOJI,
   SHOW_SEARCH_RESULTS,
   HIDE_SEARCH_RESULTS,
-  HIDE_VARIANT_POPUP
+  HIDE_VARIANT_POPUP,
 } from './events';
 import { EmojiPreview } from './preview';
 import { Search } from './search';
@@ -29,8 +29,8 @@ const CLASS_PICKER_CONTENT = 'emoji-picker__content';
 // Options for twemoji.parse(emoji, twemojiOptions)
 const twemojiOptions = {
   ext: '.svg',
-  folder: 'svg'
-}
+  folder: 'svg',
+};
 
 const DEFAULT_OPTIONS: EmojiButtonOptions = {
   position: 'right-start',
@@ -53,12 +53,12 @@ const DEFAULT_OPTIONS: EmojiButtonOptions = {
     'travel',
     'objects',
     'symbols',
-    'flags'
+    'flags',
   ],
   style: 'native',
   emojisPerRow: 8,
   rows: 6,
-  emojiSize: '1.8em'
+  emojiSize: '1.8em',
 };
 
 export default class EmojiButton {
@@ -90,18 +90,18 @@ export default class EmojiButton {
 
     this.i18n = {
       ...i18n,
-      ...options.i18n
+      ...options.i18n,
     };
 
     this.onDocumentClick = this.onDocumentClick.bind(this);
     this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
   }
 
-  on(event: string, callback: Function): void {
+  on(event: string, callback: (arg: string) => void): void {
     this.publicEvents.on(event, callback);
   }
 
-  off(event: string, callback: Function): void {
+  off(event: string, callback: (arg: string) => void): void {
     this.publicEvents.off(event, callback);
   }
 
@@ -131,7 +131,7 @@ export default class EmojiButton {
       initialFocus:
         this.options.showSearch && this.options.autoFocusSearch
           ? '.emoji-picker__search'
-          : '.emoji-picker__emoji[tabindex="0"]'
+          : '.emoji-picker__emoji[tabindex="0"]',
     });
 
     const pickerContent = createElement('div', CLASS_PICKER_CONTENT);
@@ -142,7 +142,7 @@ export default class EmojiButton {
         this.i18n,
         this.options,
         emojiData.emoji,
-        (this.options.categories || []).map(category =>
+        (this.options.categories || []).map((category) =>
           emojiData.categories.indexOf(category)
         )
       ).render();
@@ -183,7 +183,7 @@ export default class EmojiButton {
       EMOJI,
       ({
         emoji,
-        showVariants
+        showVariants,
       }: {
         emoji: EmojiRecord;
         showVariants: boolean;
@@ -208,7 +208,10 @@ export default class EmojiButton {
           }
 
           if (this.options.style === 'twemoji') {
-            this.publicEvents.emit('emoji', twemoji.parse(emoji.emoji, twemojiOptions));
+            this.publicEvents.emit(
+              'emoji',
+              twemoji.parse(emoji.emoji, twemojiOptions)
+            );
           } else {
             this.publicEvents.emit('emoji', emoji.emoji);
           }
@@ -316,7 +319,7 @@ export default class EmojiButton {
       document.body.appendChild(this.overlay);
     } else {
       this.popper = createPopper(referenceEl, this.wrapper, {
-        placement: options.position || this.options.position
+        placement: options.position || this.options.position,
       });
     }
 

src/preview.ts

@@ -13,8 +13,8 @@ const CLASS_PREVIEW_NAME = 'emoji-picker__preview-name';
 // Options for twemoji.parse(emoji, twemojiOptions)
 const twemojiOptions = {
   ext: '.svg',
-  folder: 'svg'
-}
+  folder: 'svg',
+};
 
 export class EmojiPreview {
   private emoji: HTMLElement;

src/recent.ts

@@ -5,7 +5,7 @@ const LOCAL_STORAGE_KEY = 'emojiPicker.recent';
 export function load(): Array<RecentEmoji> {
   const recentJson = localStorage.getItem(LOCAL_STORAGE_KEY);
   const recents = recentJson ? JSON.parse(recentJson) : [];
-  return recents.filter(recent => !!recent.emoji);
+  return recents.filter((recent) => !!recent.emoji);
 }
 
 export function save(
@@ -17,7 +17,7 @@ export function save(
   const recent = {
     emoji: emoji.emoji,
     name: emoji.name,
-    key: (emoji as RecentEmoji).key || emoji.name
+    key: (emoji as RecentEmoji).key || emoji.name,
   };
 
   localStorage.setItem(
@@ -25,7 +25,9 @@ export function save(
     JSON.stringify(
       [
         recent,
-        ...recents.filter((r: RecentEmoji) => !!r.emoji && r.key !== recent.key)
+        ...recents.filter(
+          (r: RecentEmoji) => !!r.emoji && r.key !== recent.key
+        ),
       ].slice(0, options.recentsCount)
     )
   );

src/search.test.ts

@@ -9,7 +9,7 @@ import { EmojiButtonOptions, EmojiRecord } from './types';
 describe('Search', () => {
   const emojis: EmojiRecord[] = [
     { category: 0, emoji: '⚡️', name: 'zap', version: '12.1' },
-    { category: 1, emoji: '😀', name: 'grinning', version: '12.1' }
+    { category: 1, emoji: '😀', name: 'grinning', version: '12.1' },
   ];
 
   const options: EmojiButtonOptions = { emojiVersion: '12.1', style: 'native' };
@@ -23,8 +23,8 @@ describe('Search', () => {
     searchField = search.querySelector('.emoji-picker__search');
   });
 
-  test('should render search results', done => {
-    events.on(SHOW_SEARCH_RESULTS, searchResultsContainer => {
+  test('should render search results', (done) => {
+    events.on(SHOW_SEARCH_RESULTS, (searchResultsContainer) => {
       const searchResults = searchResultsContainer.querySelectorAll(
         '.emoji-picker__emoji'
       );
@@ -37,9 +37,9 @@ describe('Search', () => {
     searchField.dispatchEvent(new KeyboardEvent('keyup'));
   });
 
-  test('should not show search results for the unselected categories', done => {
+  test('should not show search results for the unselected categories', (done) => {
     search = new Search(events, i18n, options, emojis, [0]).render();
-    events.on(SHOW_SEARCH_RESULTS, searchResultsContainer => {
+    events.on(SHOW_SEARCH_RESULTS, (searchResultsContainer) => {
       const searchResults = searchResultsContainer.querySelectorAll(
         '.emoji-picker__emoji'
       );
@@ -51,8 +51,8 @@ describe('Search', () => {
     searchField.dispatchEvent(new KeyboardEvent('keyup'));
   });
 
-  test('should render a not found message when there are no results', done => {
-    events.on(SHOW_SEARCH_RESULTS, searchResultsContainer => {
+  test('should render a not found message when there are no results', (done) => {
+    events.on(SHOW_SEARCH_RESULTS, (searchResultsContainer) => {
       expect(
         searchResultsContainer.classList.contains(
           'emoji-picker__search-not-found'

src/search.ts

@@ -7,7 +7,7 @@ import {
   HIDE_PREVIEW,
   HIDE_VARIANT_POPUP,
   SHOW_SEARCH_RESULTS,
-  HIDE_SEARCH_RESULTS
+  HIDE_SEARCH_RESULTS,
 } from './events';
 import { createElement } from './util';
 import { I18NStrings, EmojiButtonOptions, EmojiRecord } from './types';
@@ -55,7 +55,7 @@ export class Search {
   ) {
     this.emojisPerRow = this.options.emojisPerRow || 8;
     this.emojiData = emojiData.filter(
-      e =>
+      (e) =>
         e.version &&
         parseFloat(e.version) <= parseFloat(options.emojiVersion as string) &&
         e.category !== undefined &&
@@ -166,7 +166,7 @@ export class Search {
       this.searchIcon.innerHTML = icons.times;
       this.searchIcon.style.cursor = 'pointer';
       const searchResults = this.emojiData.filter(
-        emoji =>
+        (emoji) =>
           emoji.name
             .toLowerCase()
             .indexOf(this.searchField.value.toLowerCase()) >= 0
@@ -188,7 +188,7 @@ export class Search {
           ) as HTMLElement).tabIndex = 0;
           this.focusedEmojiIndex = 0;
 
-          this.resultsContainer.addEventListener('keydown', event =>
+          this.resultsContainer.addEventListener('keydown', (event) =>
             this.handleResultsKeydown(event)
           );
 

src/variantPopup.test.ts

@@ -8,7 +8,7 @@ describe('VariantPopup', () => {
     category: 0,
     emoji: '👍',
     variations: ['👍🏻', '👍🏿'],
-    version: '11.0'
+    version: '11.0',
   };
 
   let events;

src/variantPopup.ts

@@ -20,11 +20,11 @@ export class VariantPopup {
     private options: EmojiButtonOptions
   ) {}
 
-  getEmoji(index): Element {
+  getEmoji(index: number): Element {
     return this.popup.querySelectorAll('.emoji-picker__emoji')[index];
   }
 
-  setFocusedEmoji(newIndex): void {
+  setFocusedEmoji(newIndex: number): void {
     const currentFocusedEmoji = this.getEmoji(
       this.focusedEmojiIndex
     ) as HTMLElement;
@@ -60,7 +60,7 @@ export class VariantPopup {
           {
             name: this.emoji.name,
             emoji: variation,
-            key: this.emoji.name + index
+            key: this.emoji.name + index,
           },
           false,
           false,
@@ -78,7 +78,7 @@ export class VariantPopup {
 
     setTimeout(() => firstEmoji.focus());
 
-    this.popup.addEventListener('keydown', event => {
+    this.popup.addEventListener('keydown', (event) => {
       if (event.key === 'ArrowRight') {
         this.setFocusedEmoji(
           Math.min(