Update with fully Right to Left support for rtl languages

README.md

@@ -7,10 +7,19 @@
 </div>
 
 ## 📖 Table of Contents
+- [📖 Table of Contents](#-table-of-contents)
 - [💾 Data](#-data)
+  - [Bundled directly into your codebase](#bundled-directly-into-your-codebase)
+  - [Fetched remotely](#fetched-remotely)
 - [🏪 Picker](#-picker)
+  - [React](#react)
+  - [Browser](#browser)
+  - [Options / Props](#options--props)
+  - [Custom emojis](#custom-emojis)
+  - [Custom category icons](#custom-category-icons)
 - [🙃 Emoji component](#-emoji-component)
-- [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search)
+  - [Attributes / Props](#attributes--props)
+- [🕵️‍♀️ Headless search](#️️-headless-search)
 - [🔬 Get emoji data from native](#-get-emoji-data-from-native)
 - [🗺 Internationalization](#-internationalization)
 - [📚 Examples](#-examples)
@@ -110,6 +119,7 @@ function App() {
 | **perLine** | `9` | | The number of emojis to show per line |
 | **previewEmoji** | `point_up` | | The id of the emoji to use for the preview when not hovering any emoji. `point_up` when preview position is bottom and `point_down` when preview position is top. |
 | **previewPosition** | `bottom` | `top`, `bottom`, `none` | The position of the preview |
+| **rtl** | `false` | | Whether the Right to Left style or not |
 | **searchPosition** | `sticky` | `sticky`, `static`, `none` | The position of the search input |
 | **set** | `native` | `native`, `apple`, `facebook`, `google`, `twitter` | The set of emojis to use for the picker. `native` being the most performant, others rely on spritesheets. |
 | **skin** | `1` | `1`, `2`, `3`, `4`, `5`, `6` | The emojis skin tone |

packages/emoji-mart-website/index.html

@@ -137,6 +137,15 @@
         ></span>
       </div>
 
+      <div class="flex flex-middle">
+        Right to Left:&nbsp;<span class="select flex flex-grow"
+          ><select id="rtl" class="flex-grow">
+            <option value="false">False</option>
+            <option value="true">True</option></select
+          ><em-emoji id="arrow_down_small"></em-emoji
+        ></span>
+      </div>
+
       <div>
         <button title="Reset" id="reset">
           <span><em-emoji id="broom" fallback="🧹"></em-emoji></span>
@@ -299,6 +308,7 @@
         previewPosition: localStorage.previewPosition,
         searchPosition: localStorage.searchPosition,
         skinTonePosition: localStorage.skinTonePosition,
+        rtl: localStorage.rtl,
         onEmojiSelect: console.log,
         custom: [
           {

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

@@ -54,7 +54,12 @@ export default class Navigation extends PureComponent {
     let selectedCategoryIndex = null
 
     return (
-      <nav id="nav" class="padding" data-position={this.props.position}>
+      <nav
+        id="nav"
+        class="padding"
+        data-position={this.props.position}
+        dir={this.props.dir}
+      >
         <div class="flex relative">
           {this.categories.map((category, i) => {
             const title = category.name || I18n.categories[category.id]
@@ -87,7 +92,10 @@ export default class Navigation extends PureComponent {
             style={{
               width: `${100 / this.categories.length}%`,
               opacity: selectedCategoryIndex == null ? 0 : 1,
-              transform: `translateX(${selectedCategoryIndex * 100}%)`,
+              transform:
+                this.props.dir === 'rtl'
+                  ? `scaleX(-1) translateX(${selectedCategoryIndex * 100}%)`
+                  : `translateX(${selectedCategoryIndex * 100}%)`,
             }}
           ></div>
         </div>

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

@@ -36,7 +36,7 @@ export default class Picker extends Component {
   }
 
   componentWillMount() {
-    this.dir = I18n.rtl ? 'rtl' : 'ltr'
+    this.dir = I18n.rtl || this.props.rtl ? 'rtl' : 'ltr'
     this.refs = {
       menu: createRef(),
       navigation: createRef(),
@@ -676,6 +676,7 @@ export default class Picker extends Component {
         ref={this.refs.navigation}
         icons={this.props.icons}
         theme={this.state.theme}
+        dir={this.dir}
         unfocused={!!this.state.searchResults}
         position={this.props.navPosition}
         onClick={this.handleCategoryClick}
@@ -819,8 +820,6 @@ export default class Picker extends Component {
       <div>
         <div class="spacer"></div>
         <div class="flex flex-middle">
-          {renderSkinTone && this.dir == 'rtl' && this.renderSkinToneButton()}
-
           <div class="search relative flex-grow">
             <input
               type="search"
@@ -846,7 +845,7 @@ export default class Picker extends Component {
             )}
           </div>
 
-          {renderSkinTone && this.dir == 'ltr' && this.renderSkinToneButton()}
+          {renderSkinTone && this.renderSkinToneButton()}
         </div>
       </div>
     )
@@ -1103,6 +1102,7 @@ export default class Picker extends Component {
       <section
         id="root"
         class="flex flex-column"
+        dir={this.dir}
         data-emoji-set={this.props.set}
         data-theme={this.state.theme}
         data-menu={this.state.showSkins ? '' : undefined}

packages/emoji-mart/src/components/Picker/PickerProps.ts

@@ -75,6 +75,9 @@ export default {
     value: 'bottom',
     choices: ['top', 'bottom', 'none'],
   },
+  rtl: {
+    value: false,
+  },
   searchPosition: {
     value: 'sticky',
     choices: ['sticky', 'static', 'none'],

packages/emoji-mart/src/components/Picker/PickerStyles.scss

@@ -140,6 +140,11 @@ a {
 
 .spacer { height: 10px }
 
+[dir="rtl"] .scroll {
+  padding-left: 0;
+  padding-right: var(--padding);
+}
+
 .scroll {
   overflow: auto;
   overflow-x: hidden;
@@ -190,6 +195,22 @@ a {
   backdrop-filter: blur(4px);
 }
 
+[dir="rtl"] .search {
+  input[type="search"] {
+    padding: 10px 2.2em 10px 2em;
+  }
+
+  .loupe { 
+    right: .7em;
+    left: auto;
+  }
+
+  .delete { 
+    left: .7em;
+    right: auto;
+  }
+}
+
 .search {
   z-index: 2;
   position: relative;
@@ -273,6 +294,11 @@ button {
     height: var(--category-icon-size);
   }
 
+  &[dir="rtl"] .bar {
+    right: 0;
+    left: auto;
+  }
+
   .bar {
     position: absolute;
     bottom: -12px; left: 0;