fix/MAB-4446: show search with external prop

package.json

@@ -7,9 +7,9 @@
   ],
   "scripts": {
     "dev": "yarn workspace @emoji-mart/website dev",
-    "build": "yarn workspace emoji-mart build",
+    "build": "yarn workspace @mabible/emoji-mart build",
     "build:data": "yarn workspace @emoji-mart/data build",
-    "build:react": "yarn workspace @emoji-mart/react build",
+    "build:react": "yarn workspace @mabible/emoji-mart-react build",
     "build:website": "yarn workspace @emoji-mart/website build",
     "check:types": "tsc",
     "prettier": "prettier --check .",

packages/emoji-mart-react/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@emoji-mart/react",
-  "version": "1.1.1",
+  "name": "@mabible/emoji-mart-react",
+  "version": "1.1.4",
   "description": "React wrapper for Emoji Mart; the emoji picker for the web.",
   "license": "MIT",
   "homepage": "https://missiveapp.com/open/emoji-mart",
@@ -18,7 +18,7 @@
     "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
-    "emoji-mart": "^5.2",
+    "@mabible/emoji-mart": "^5.6",
     "react": "^16.8 || ^17 || ^18"
   },
   "files": [

packages/emoji-mart-react/react.tsx

@@ -1,6 +1,10 @@
 // @ts-nocheck
 import React, { useEffect, useRef } from 'react'
-import { Picker } from 'emoji-mart'
+import { Picker } from '@mabible/emoji-mart'
+
+const style = {
+  height: '100%',
+}
 
 export default function EmojiPicker(props) {
   const ref = useRef(null)
@@ -18,5 +22,5 @@ export default function EmojiPicker(props) {
     }
   }, [])
 
-  return React.createElement('div', { ref })
+  return React.createElement('div', { ref, style })
 }

packages/emoji-mart-website/example-categories.html

@@ -8,7 +8,7 @@
     </div>
     <script type="module">
       import data from '@emoji-mart/data'
-      import { Picker } from 'emoji-mart'
+      import { Picker } from '@mabible/emoji-mart'
 
       new Picker({
         parent: document.querySelector('#picker'),

packages/emoji-mart-website/example-custom-font.html

@@ -14,7 +14,7 @@
   <block name="script">
     <script type="module">
       import data from '@emoji-mart/data/sets/13.1/native.json'
-      import { Picker } from 'emoji-mart'
+      import { Picker } from '@mabible/emoji-mart'
 
       new Picker({
         parent: document.querySelector('#picker'),

packages/emoji-mart-website/example-custom-styles.html

@@ -5,9 +5,19 @@
   <block name="content" type="append">
     <style>
       em-emoji-picker {
+        --em-input-background: gray;
+        --em-skintone-menu-background: gray;
+        --em-rgb-background: #202124;
+        --em-nav-button-bg-color-hover: white;
+        --em-nav-button-bg-color-selected: white;
+        --em-nav-button-color: gray;
+        --em-nav-button-color-active: black;
+        --em-nav-button-color-hover: black;
+        --em-category-separator-color: gray;
         --background-rgb: 85, 170, 255;
         --border-radius: 24px;
-        --category-icon-size: 24px;
+        --category-icon-size: 16px;
+        --category-icon-padding: 7px;
         --color-border-over: rgba(0, 0, 0, 0.1);
         --color-border: rgba(0, 0, 0, 0.05);
         --font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
@@ -28,7 +38,7 @@
   <block name="script">
     <script type="module">
       import data from '@emoji-mart/data'
-      import { Picker } from 'emoji-mart'
+      import { Picker } from '@mabible/emoji-mart'
 
       new Picker({
         parent: document.querySelector('#picker'),

packages/emoji-mart-website/example-dynamic-width.html

@@ -13,7 +13,7 @@
     </style>
     <script type="module">
       import data from '@emoji-mart/data'
-      import { Picker } from 'emoji-mart'
+      import { Picker } from '@mabible/emoji-mart'
 
       new Picker({
         parent: document.querySelector('#picker'),

packages/emoji-mart-website/example-emoji-component.html

@@ -33,7 +33,7 @@
     </div>
     <script type="module">
       import data from '@emoji-mart/data/sets/15/twitter.json'
-      import { init } from 'emoji-mart'
+      import { init } from '@mabible/emoji-mart'
 
       init({
         data,

packages/emoji-mart-website/example-headless-search.html

@@ -12,7 +12,7 @@
   <block name="script">
     <script type="module">
       import data from '@emoji-mart/data'
-      import { init, SearchIndex } from 'emoji-mart'
+      import { init, SearchIndex } from '@mabible/emoji-mart'
 
       init({ data })
 

packages/emoji-mart-website/example-slack-colors.html

@@ -5,7 +5,7 @@
   <block name="script">
     <script type="module">
       import data from '@emoji-mart/data'
-      import { Picker } from 'emoji-mart'
+      import { Picker } from '@mabible/emoji-mart'
 
       new Picker({
         parent: document.querySelector('#picker'),

packages/emoji-mart-website/examples.html

@@ -13,7 +13,7 @@
   <block name="script">
     <script type="module">
       import data from '@emoji-mart/data'
-      import { init } from 'emoji-mart'
+      import { init } from '@mabible/emoji-mart'
 
       init({ data })
     </script>

packages/emoji-mart-website/index.html

@@ -183,7 +183,7 @@
     </div>
     <script type="module">
       import data from '@emoji-mart/data'
-      import * as EmojiMart from 'emoji-mart'
+      import * as EmojiMart from '@mabible/emoji-mart'
       window.EmojiMart = EmojiMart
 
       const reset = document.querySelector('#reset')
@@ -301,35 +301,7 @@
         searchPosition: localStorage.searchPosition,
         skinTonePosition: localStorage.skinTonePosition,
         onEmojiSelect: console.log,
-        custom: [
-          {
-            emojis: [
-              {
-                id: 'octocat',
-                name: 'Octocat',
-                keywords: ['github'],
-                skins: [{ src: document.querySelector('#img-octocat').src }],
-              },
-              {
-                id: 'shipit',
-                name: 'Squirrel',
-                keywords: ['github'],
-                skins: [{ src: document.querySelector('#img-shipit').src }],
-              },
-              {
-                id: 'party_parrot',
-                name: 'Party Parrot',
-                keywords: ['dance', 'dancing'],
-                skins: [{ src: document.querySelector('#img-parrot').src }],
-              },
-            ].concat(custom),
-          },
-        ],
-        onAddCustomEmoji: dialog.hidden
-          ? undefined
-          : () => {
-              dialog.showModal()
-            },
+        fixedNav: true,
       })
     </script>
   </block>

packages/emoji-mart-website/layout.html

@@ -35,7 +35,11 @@ <h1>
 
         <div class="relative">
           <block name="content">
-            <div id="picker" class="flex flex-center"></div>
+            <div
+              id="picker"
+              class="flex flex-center"
+              style="height: 600px"
+            ></div>
           </block>
         </div>
 

packages/emoji-mart/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "emoji-mart",
-  "version": "5.6.0",
+  "name": "@mabible/emoji-mart",
+  "version": "5.6.13",
   "description": "Emoji picker for the web",
   "license": "MIT",
   "homepage": "https://missiveapp.com/open/emoji-mart",

packages/emoji-mart/src/components/Navigation/Navigation.tsx

@@ -12,8 +12,16 @@ export default class Navigation extends PureComponent {
   constructor() {
     super()
 
+    console.log(Data.categories)
+
+    this.frequentCategory = Data.categories.find(
+      (category) => category.id === 'frequent',
+    )
+
+    console.log(this.frequentCategory)
+
     this.categories = Data.categories.filter((category) => {
-      return !category.target
+      return !category.target && category.id !== 'frequent'
     })
 
     this.state = {
@@ -50,54 +58,63 @@ export default class Navigation extends PureComponent {
     return categoryIcons[style] || categoryIcons
   }
 
-  render() {
-    let selectedCategoryIndex = null
+  renderFrequentIcon = () => {
+    const title =
+      this.frequentCategory.name || I18n.categories[this.frequentCategory.id]
+    const selected =
+      !this.props.unfocused && this.frequentCategory.id == this.state.categoryId
 
+    return (
+      <button
+        aria-label={title}
+        aria-selected={selected || undefined}
+        title={title}
+        type="button"
+        class="flex flex-center"
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => {
+          this.props.onClick({ category: this.frequentCategory, i: 0 })
+        }}
+      >
+        {this.renderIcon(this.frequentCategory)}
+      </button>
+    )
+  }
+
+  render() {
     return (
       <nav
         id="nav"
-        class="padding"
+        class={`padding ${this.props.fixedNav ? 'fixed-nav' : ''}`}
         data-position={this.props.position}
         dir={this.props.dir}
       >
-        <div class="flex relative">
+        <div class="flex flex-middle flex-between relative">
+          {this.props.renderSearchIcon()}
+          {this.renderFrequentIcon()}
+          {this.props.renderSkinToneButton()}
+          <hr className="category-separator" />
           {this.categories.map((category, i) => {
             const title = category.name || I18n.categories[category.id]
             const selected =
               !this.props.unfocused && category.id == this.state.categoryId
 
-            if (selected) {
-              selectedCategoryIndex = i
-            }
-
             return (
               <button
                 aria-label={title}
                 aria-selected={selected || undefined}
                 title={title}
                 type="button"
-                class="flex flex-grow flex-center"
+                class="flex flex-center"
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => {
-                  this.props.onClick({ category, i })
+                  this.props.onClick({ category, i: i + 1 })
                 }}
               >
                 {this.renderIcon(category)}
               </button>
             )
           })}
-
-          <div
-            class="bar"
-            style={{
-              width: `${100 / this.categories.length}%`,
-              opacity: selectedCategoryIndex == null ? 0 : 1,
-              transform:
-                this.props.dir === 'rtl'
-                  ? `scaleX(-1) translateX(${selectedCategoryIndex * 100}%)`
-                  : `translateX(${selectedCategoryIndex * 100}%)`,
-            }}
-          ></div>
         </div>
       </nav>
     )

packages/emoji-mart/src/components/Picker/ParentPickerTest.tsx

@@ -0,0 +1,19 @@
+import { Picker } from './'
+import { useState } from 'preact/hooks'
+
+const PickerParent = (props) => {
+  const [displaySearch, setDisplaySearch] = useState(false)
+  return (
+    <>
+      <button
+        style={{ background: 'green' }}
+        onClick={() => setDisplaySearch(!displaySearch)}
+      >
+        Show search
+      </button>
+      <Picker {...props} displaySearch={displaySearch} />
+    </>
+  )
+}
+
+export default PickerParent