emoji-picker-react 3.6.2 → 3.6.3

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PickerConfig } from './config/config';
+export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
+export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode } from './types/exposedTypes';
+export interface Props extends PickerConfig {
+}
+export default function EmojiPicker(props: Props): JSX.Element;

package/dist/main.css

@@ -0,0 +1,206 @@
+.emoji-picker-react ul.skin-tones-list {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    position: absolute;
+    top: 13px;
+    right: 40px;
+}
+
+.emoji-picker-react ul.skin-tones-list li {
+    background-color: currentColor;
+    position: absolute;
+    padding: 0;
+    border-radius: 5px;
+    overflow: hidden;
+    transition: transform .3s ease;
+    box-shadow: 0 0 3px currentColor;
+}
+
+.emoji-picker-react ul.skin-tones-list label {
+    height: 10px;
+    width: 10px;
+    padding: 0;
+    display: block;
+    cursor: pointer;
+}
+
+.emoji-picker-react ul.skin-tones-list input {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+}
+
+.emoji-picker-react ul.skin-tones-list li.tneutral { color: #ffe082; }
+.emoji-picker-react ul.skin-tones-list li.t1f3fb  { color: #ffe0b2; }
+.emoji-picker-react ul.skin-tones-list li.t1f3fc  { color: #ffccbc; }
+.emoji-picker-react ul.skin-tones-list li.t1f3fe  { color: #795548; }
+.emoji-picker-react ul.skin-tones-list li.t1f3ff  { color: #5d4037; }
+.emoji-picker-react ul.skin-tones-list li.t1f3fd  { color: #ca7e55; }
+
+.emoji-picker-react .emoji-categories button {
+    height: 40px;
+    width: 20px;
+    padding: 5px 0;
+    background-repeat: no-repeat;
+    background-size: 20px;
+    background-position: 50% 50%;
+    cursor: pointer;
+    opacity: .5;
+    transition: opacity .1s;
+}
+
+
+.emoji-picker-react .emoji-categories {
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.emoji-picker-react .emoji-categories.inactive button,
+.emoji-picker-react .emoji-categories.inactive button.active,
+.emoji-picker-react .emoji-categories.inactive button:hover {
+    opacity: .4;
+    cursor: default;
+}
+
+.emoji-picker-react .emoji-categories button.active {
+    opacity: 1;
+}
+
+.emoji-picker-react .emoji-categories button:hover {
+    opacity: .7;
+}
+
+.emoji-picker-react .emoji {
+    position: relative;
+}
+
+.emoji-picker-react .emoji.has-skin-variation:before {
+    content: '';
+    display: block;
+    height: 5px;
+    width: 5px;
+    background: #070B17;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 0 5px 0 0;
+}
+
+.emoji-picker-react .emoji button {
+    color: inherit;
+    height: 35px;
+    width: 35px;
+    border-radius: 5px;
+    background-size: 20px 20px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    transition: .1s background;
+}
+
+.emoji-picker-react .emoji button:hover {
+    background-color: currentColor;
+}
+
+.emoji-picker-react .emoji-group {
+    clear: both;
+    padding: 0 15px;
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+
+.emoji-picker-react .emoji-group:before {
+    content: attr(data-name);
+    color: #aaa;
+    font-size: 14px;
+    position: sticky;
+    background: rgba(255,255,255,0.95);
+    width: 100%;
+    z-index: 1;
+    top: 0;
+    text-transform: uppercase;
+    line-height: 45px;
+    font-weight: 700;
+}
+
+.emoji-picker-react .emoji-group:after {
+        content: '';
+        flex: 1000;
+        order: 99999;
+        flex-basis: 25px;
+}
+
+.emoji-picker-react .emoji-scroll-wrapper {
+    overflow-y: scroll;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.emoji-picker-react input.emoji-search {
+    width: calc(100% - 30px);
+    margin-left: 15px;
+    outline: none;
+    box-shadow: none;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+    transition: border .1s;
+}
+
+.emoji-picker-react input.emoji-search:focus {
+    border: 1px solid #D6D6D6;
+}
+
+aside.emoji-picker-react {
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 320px;
+    width: 280px;
+    font-family: font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
+    border: 1px solid #efefef;
+    border-radius: 5px;
+    box-sizing: border-box;
+    box-shadow: 0 5px 10px #efefef;
+    overflow: hidden;
+    position: relative;
+}
+
+aside.emoji-picker-react .content-wrapper-epr {
+    overflow: hidden;
+    position: relative;
+}
+
+aside.emoji-picker-react .content-wrapper-epr:before {
+    content: attr(data-name);
+    color: #aaa;
+    font-size: 11px;
+    display: block;
+    position: absolute;
+    right: 15px;
+    z-index: 10;
+    line-height: 45px;
+    max-height: 45px;
+    overflow: hidden;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    text-align: right;
+}
+
+aside.emoji-picker-react button {
+    border: none;
+    cursor: pointer;
+    outline: none;
+}
+
+
+/*# sourceMappingURL=main.css.map*/

package/dist/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://EmojiPicker/./src/components/SkinTones/style.css","webpack://EmojiPicker/./src/components/VariationsMenu/style.css","webpack://EmojiPicker/./src/components/CategoriesNav/style.css","webpack://EmojiPicker/./src/components/Emoji/style.css","webpack://EmojiPicker/./src/components/EmojiList/style.css","webpack://EmojiPicker/./src/components/Search/style.css","webpack://EmojiPicker/./src/style.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,oDAAoD,gBAAgB;AACpE,mDAAmD,gBAAgB;AACnE,mDAAmD,gBAAgB;AACnE,mDAAmD,gBAAgB;AACnE,mDAAmD,gBAAgB;AACnE,mDAAmD,gBAAgB;;ACxCnE;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AChCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACjCA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AC7BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACpCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACdA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"main.css","sourcesContent":[".emoji-picker-react ul.skin-tones-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    position: absolute;\n    top: 13px;\n    right: 40px;\n}\n\n.emoji-picker-react ul.skin-tones-list li {\n    background-color: currentColor;\n    position: absolute;\n    padding: 0;\n    border-radius: 5px;\n    overflow: hidden;\n    transition: transform .3s ease;\n    box-shadow: 0 0 3px currentColor;\n}\n\n.emoji-picker-react ul.skin-tones-list label {\n    height: 10px;\n    width: 10px;\n    padding: 0;\n    display: block;\n    cursor: pointer;\n}\n\n.emoji-picker-react ul.skin-tones-list input {\n    height: 0;\n    width: 0;\n    opacity: 0;\n    visibility: hidden;\n    display: none;\n}\n\n.emoji-picker-react ul.skin-tones-list li.tneutral { color: #ffe082; }\n.emoji-picker-react ul.skin-tones-list li.t1f3fb  { color: #ffe0b2; }\n.emoji-picker-react ul.skin-tones-list li.t1f3fc  { color: #ffccbc; }\n.emoji-picker-react ul.skin-tones-list li.t1f3fe  { color: #795548; }\n.emoji-picker-react ul.skin-tones-list li.t1f3ff  { color: #5d4037; }\n.emoji-picker-react ul.skin-tones-list li.t1f3fd  { color: #ca7e55; }\n",".emoji-picker-react .variations-wrapper {\n    position: relative;\n}\n\n.emoji-picker-react .variations-list {\n    background: #F4F4F4;\n    border-bottom: 1px solid #efefef;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 10;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    justify-content: space-evenly;\n    list-style-type: none;\n}\n\n.emoji-picker-react .variations-list button {\n    height: 35px;\n    width: 35px;\n    background-size: 20px 20px;\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-color: transparent;\n    border-radius: 5px;\n    transition: background .1s;\n}\n\n.emoji-picker-react .variations-list button:hover {\n    background-color: #DBDBDB;\n}\n",".emoji-picker-react .emoji-categories button {\n    height: 40px;\n    width: 20px;\n    padding: 5px 0;\n    background-repeat: no-repeat;\n    background-size: 20px;\n    background-position: 50% 50%;\n    cursor: pointer;\n    opacity: .5;\n    transition: opacity .1s;\n}\n\n\n.emoji-picker-react .emoji-categories {\n    padding: 0 15px;\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n}\n\n.emoji-picker-react .emoji-categories.inactive button,\n.emoji-picker-react .emoji-categories.inactive button.active,\n.emoji-picker-react .emoji-categories.inactive button:hover {\n    opacity: .4;\n    cursor: default;\n}\n\n.emoji-picker-react .emoji-categories button.active {\n    opacity: 1;\n}\n\n.emoji-picker-react .emoji-categories button:hover {\n    opacity: .7;\n}\n",".emoji-picker-react .emoji {\n    position: relative;\n}\n\n.emoji-picker-react .emoji.has-skin-variation:before {\n    content: '';\n    display: block;\n    height: 5px;\n    width: 5px;\n    background: #070B17;\n    position: absolute;\n    top: 0;\n    right: 0;\n    border-radius: 0 5px 0 0;\n}\n\n.emoji-picker-react .emoji button {\n    color: inherit;\n    height: 35px;\n    width: 35px;\n    border-radius: 5px;\n    background-size: 20px 20px;\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    transition: .1s background;\n}\n\n.emoji-picker-react .emoji button:hover {\n    background-color: currentColor;\n}\n",".emoji-picker-react .emoji-group {\n    clear: both;\n    padding: 0 15px;\n    list-style: none;\n    margin: 0;\n    display: flex;\n    flex-flow: row wrap;\n    justify-content: space-between;\n}\n\n.emoji-picker-react .emoji-group:before {\n    content: attr(data-name);\n    color: #aaa;\n    font-size: 14px;\n    position: sticky;\n    background: rgba(255,255,255,0.95);\n    width: 100%;\n    z-index: 1;\n    top: 0;\n    text-transform: uppercase;\n    line-height: 45px;\n    font-weight: 700;\n}\n\n.emoji-picker-react .emoji-group:after {\n        content: '';\n        flex: 1000;\n        order: 99999;\n        flex-basis: 25px;\n}\n\n.emoji-picker-react .emoji-scroll-wrapper {\n    overflow-y: scroll;\n    position: relative;\n    height: 100%;\n    box-sizing: border-box;\n}\n",".emoji-picker-react input.emoji-search {\n    width: calc(100% - 30px);\n    margin-left: 15px;\n    outline: none;\n    box-shadow: none;\n    padding: 10px;\n    box-sizing: border-box;\n    border: 1px solid #efefef;\n    border-radius: 3px;\n    transition: border .1s;\n}\n\n.emoji-picker-react input.emoji-search:focus {\n    border: 1px solid #D6D6D6;\n}\n","aside.emoji-picker-react {\n    background: #fff;\n    display: flex;\n    flex-direction: column;\n    height: 320px;\n    width: 280px;\n    font-family: sans-serif;\n    border: 1px solid #efefef;\n    border-radius: 5px;\n    box-sizing: border-box;\n    box-shadow: 0 5px 10px #efefef;\n    overflow: hidden;\n    position: relative;\n}\n\naside.emoji-picker-react .content-wrapper-epr {\n    overflow: hidden;\n    position: relative;\n}\n\naside.emoji-picker-react .content-wrapper-epr:before {\n    content: attr(data-name);\n    color: #aaa;\n    font-size: 11px;\n    display: block;\n    position: absolute;\n    right: 15px;\n    z-index: 10;\n    line-height: 45px;\n    max-height: 45px;\n    overflow: hidden;\n    max-width: 100px;\n    text-overflow: ellipsis;\n    text-align: right;\n}\n\naside.emoji-picker-react button {\n    border: none;\n    cursor: pointer;\n    outline: none;\n}\n"],"sourceRoot":""}

package/dist/types/exposedTypes.d.ts

@@ -0,0 +1,43 @@
+export declare type EmojiClickData = {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    getImageUrl: (emojiStyle: EmojiStyle) => string;
+};
+export declare enum SuggestionMode {
+    RECENT = "recent",
+    FREQUENT = "frequent"
+}
+export declare enum EmojiStyle {
+    NATIVE = "native",
+    APPLE = "apple",
+    TWITTER = "twitter",
+    GOOGLE = "google",
+    FACEBOOK = "facebook"
+}
+export declare enum Theme {
+    DARK = "dark",
+    LIGHT = "light",
+    AUTO = "auto"
+}
+export declare enum SkinTones {
+    NEUTRAL = "neutral",
+    LIGHT = "1f3fb",
+    MEDIUM_LIGHT = "1f3fc",
+    MEDIUM = "1f3fd",
+    MEDIUM_DARK = "1f3fe",
+    DARK = "1f3ff"
+}
+export declare enum Categories {
+    SUGGESTED = "suggested",
+    SMILEYS_PEOPLE = "smileys_people",
+    ANIMALS_NATURE = "animals_nature",
+    FOOD_DRINK = "food_drink",
+    TRAVEL_PLACES = "travel_places",
+    ACTIVITIES = "activities",
+    OBJECTS = "objects",
+    SYMBOLS = "symbols",
+    FLAGS = "flags"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "description": "Emoji picker component for react applications",
   "main": "dist/index.js",
   "typings": "emoji-picker-react.d.ts",
@@ -8,7 +8,8 @@
     "storybook": "start-storybook -p 6006",
     "build": "webpack --config ./webpack.config.js",
     "build-storybook": "build-storybook",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "postinstall": "node ./scripts/postinstall.js"
   },
   "repository": {
     "type": "git",
@@ -61,8 +62,9 @@
     "style-loader": "^1.0.0",
     "svg-url-loader": "^3.0.2",
     "terser-webpack-plugin": "^2.1.0",
+    "tinykeys": "^1.3.0",
     "webpack": "^4.40.2",
     "webpack-cli": "^3.3.9",
-    "tinykeys": "^1.3.0"
+    "chalk": "^4.0.0"
   }
 }

package/scripts/postinstall.js

@@ -0,0 +1,23 @@
+const chalk = require('chalk');
+
+const log = console.log;
+
+log(chalk.blue('Hey! 👋'));
+log(chalk.blue('Thank you for installing'), chalk.yellow('emoji-picker-react'));
+
+log(
+  chalk.blue(
+    'The version currently installed is an old version of the package. It should works just fine, but the new major version has many performance and customization improvements.'
+  )
+);
+log(
+  chalk.white.bgGray('npm i emoji-picker-react'),
+  'or',
+  chalk.white.bgGray('yarn add emoji-picker-react')
+);
+
+log(
+  chalk.blue(
+    'For more details, go to: https://github.com/ealush/emoji-picker-react'
+  )
+);