@chayns-components/emoji-input 5.0.0-beta.100

package/lib/components/emoji-picker/EmojiPicker.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _EmojiPickerCategories = _interopRequireDefault(require("./emoji-picker-categories/EmojiPickerCategories"));
+var _EmojiPickerEmojis = _interopRequireDefault(require("./emoji-picker-emojis/EmojiPickerEmojis"));
+var _EmojiPicker = require("./EmojiPicker.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const EmojiPicker = _ref => {
+  var _emojiCategories$;
+  let {
+    accessToken,
+    onSelect,
+    personId
+  } = _ref;
+  const [searchString, setSearchString] = (0, _react.useState)('');
+  const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
+  const handleCategorySelect = (0, _react.useCallback)(category => {
+    setSearchString('');
+    setSelectedCategory(category);
+  }, []);
+  const handleSearchChange = (0, _react.useCallback)(event => {
+    setSearchString(event.target.value);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
+    onChange: handleSearchChange,
+    placeholder: "Suchen",
+    value: searchString
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.default, {
+    accessToken: accessToken,
+    onSelect: onSelect,
+    personId: personId,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.default, {
+    onSelect: handleCategorySelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }));
+};
+EmojiPicker.displayName = 'EmojiPicker';
+var _default = EmojiPicker;
+exports.default = _default;
+//# sourceMappingURL=EmojiPicker.js.map

package/lib/components/emoji-picker/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPicker","_ref","_emojiCategories$","accessToken","onSelect","personId","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAEA,IAAAK,sBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,kBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AAAyD,SAAAI,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAM,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAiBzD,MAAMW,WAAiC,GAAGC,IAAA,IAAyC;EAAA,IAAAC,iBAAA;EAAA,IAAxC;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAJ,IAAA;EAC1E,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACpD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,GAAAN,iBAAA,GAACS,oBAAe,CAAC,CAAC,CAAC,cAAAT,iBAAA,uBAAlBA,iBAAA,CAAoBU,IAAI,CAAa;EAE9F,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EAAEC,QAAkB,IAAK;IAC7DR,eAAe,CAAC,EAAE,CAAC;IACnBG,mBAAmB,CAACK,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAG,IAAAF,kBAAW,EAAEG,KAAoC,IAAK;IAC7EV,eAAe,CAACU,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIhD,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC3C,YAAA,CAAA4C,iBAAiB,qBACdlD,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAACnD,KAAA,CAAAqD,KAAK;IAACC,QAAQ,EAAEP,kBAAmB;IAACQ,WAAW,EAAC,QAAQ;IAACL,KAAK,EAAEb;EAAa,EAAG,eACjFnC,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC5C,kBAAA,CAAAI,OAAiB;IACduB,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BG,gBAAgB,EAAEA;EAAiB,EACrC,eACFtC,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC7C,sBAAA,CAAAK,OAAqB;IAClBwB,QAAQ,EAAES,oBAAqB;IAC/BP,YAAY,EAAEA,YAAa;IAC3BG,gBAAgB,EAAEA;EAAiB,EACrC,CACc;AAE5B,CAAC;AAEDT,WAAW,CAACyB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAEzB1B,WAAW;AAAA2B,OAAA,CAAA/C,OAAA,GAAA8C,QAAA"}

package/lib/components/emoji-picker/EmojiPicker.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const emojiPickerSize: {
+    height: number;
+    width: number;
+};
+export declare const StyledEmojiPicker: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/emoji-picker/EmojiPicker.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerSize = exports.StyledEmojiPicker = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const emojiPickerSize = {
+  height: 285,
+  width: 350
+};
+exports.emojiPickerSize = emojiPickerSize;
+const StyledEmojiPicker = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: ${emojiPickerSize.height}px;
+    justify-content: center;
+    padding: 10px 22px;
+    width: ${emojiPickerSize.width}px;
+    user-select: none;
+`;
+exports.StyledEmojiPicker = StyledEmojiPicker;
+//# sourceMappingURL=EmojiPicker.styles.js.map

package/lib/components/emoji-picker/EmojiPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","emojiPickerSize","height","width","exports","StyledEmojiPicker","styled","div"],"sources":["../../../src/components/emoji-picker/EmojiPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const emojiPickerSize = {\n    height: 285,\n    width: 350,\n};\n\nexport const StyledEmojiPicker = styled.div`\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    height: ${emojiPickerSize.height}px;\n    justify-content: center;\n    padding: 10px 22px;\n    width: ${emojiPickerSize.width}px;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAG;EAC3BC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE;AACX,CAAC;AAACC,OAAA,CAAAH,eAAA,GAAAA,eAAA;AAEK,MAAMI,iBAAiB,GAAGC,yBAAM,CAACC,GAAI;AAC5C;AACA;AACA;AACA,cAAcN,eAAe,CAACC,MAAO;AACrC;AACA;AACA,aAAaD,eAAe,CAACE,KAAM;AACnC;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import type { Category } from '../../../types/category';
+export type EmojiPickerCategoriesProps = {
+    onSelect: (category: Category) => void;
+    searchString: string;
+    selectedCategory: Category;
+};
+declare const EmojiPickerCategories: FC<EmojiPickerCategoriesProps>;
+export default EmojiPickerCategories;

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _categories = require("../../../constants/categories");
+var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const EmojiPickerCategories = _ref => {
+  let {
+    onSelect,
+    searchString,
+    selectedCategory
+  } = _ref;
+  const isSearchStringGiven = searchString.trim() !== '';
+  const categories = (0, _react.useMemo)(() => {
+    const categorySlugs = _dataByGroup.default.map(_ref2 => {
+      let {
+        slug
+      } = _ref2;
+      return slug;
+    });
+    categorySlugs.unshift('history');
+    return categorySlugs.map(slug => {
+      const isSelected = selectedCategory === slug && !isSearchStringGiven;
+      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
+        animate: {
+          filter: `grayscale(${isSelected ? 0 : 0.75})`,
+          opacity: isSelected ? 1 : 0.5
+        },
+        className: "prevent-lose-focus",
+        initial: false,
+        key: slug,
+        onClick: () => onSelect(slug),
+        transition: {
+          duration: 0.2
+        }
+      }, _categories.CATEGORY_EMOJIS[slug]);
+    });
+  }, [isSearchStringGiven, onSelect, selectedCategory]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, null, categories);
+};
+EmojiPickerCategories.displayName = 'EmojiPickerCategories';
+var _default = EmojiPickerCategories;
+exports.default = _default;
+//# sourceMappingURL=EmojiPickerCategories.js.map

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_categories","_EmojiPickerCategories","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","isSearchStringGiven","trim","categories","useMemo","categorySlugs","unicodeEmoji","map","_ref2","slug","unshift","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","CATEGORY_EMOJIS","StyledEmojiPickerCategories","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const categories = useMemo(() => {\n        const categorySlugs = unicodeEmoji.map(({ slug }) => slug);\n\n        categorySlugs.unshift('history');\n\n        return categorySlugs.map((slug) => {\n            const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n            return (\n                <StyledMotionEmojiPickerCategory\n                    animate={{\n                        filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                        opacity: isSelected ? 1 : 0.5,\n                    }}\n                    className=\"prevent-lose-focus\"\n                    initial={false}\n                    key={slug}\n                    onClick={() => onSelect(slug as Category)}\n                    transition={{ duration: 0.2 }}\n                >\n                    {CATEGORY_EMOJIS[slug as Category]}\n                </StyledMotionEmojiPickerCategory>\n            );\n        });\n    }, [isSearchStringGiven, onSelect, selectedCategory]);\n\n    return <StyledEmojiPickerCategories>{categories}</StyledEmojiPickerCategories>;\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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"}

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledEmojiPickerCategories: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionEmojiPickerCategory: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionEmojiPickerCategory = exports.StyledEmojiPickerCategories = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _font = require("../../../utils/font");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledEmojiPickerCategories = _styledComponents.default.div`
+    align-items: center;
+    border-top: 1px solid rgba(160, 160, 160, 0.3);
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+    padding-top: 10px;
+    width: 100%;
+`;
+exports.StyledEmojiPickerCategories = StyledEmojiPickerCategories;
+const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    cursor: pointer;
+    font-family: ${_font.getFontFamily};
+    font-size: 20px;
+`;
+exports.StyledMotionEmojiPickerCategory = StyledMotionEmojiPickerCategory;
+//# sourceMappingURL=EmojiPickerCategories.styles.js.map

package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","_font","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","motion","getFontFamily"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport { getFontFamily } from '../../../utils/font';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n    width: 100%;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(motion.div)`\n    cursor: pointer;\n    font-family: ${getFontFamily};\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAoD,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE7C,MAAMG,2BAA2B,GAAGC,yBAAM,CAACC,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,2BAAA,GAAAA,2BAAA;AAEK,MAAMI,+BAA+B,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAE;AAClE;AACA,mBAAmBI,mBAAc;AACjC;AACA,CAAC;AAACH,OAAA,CAAAC,+BAAA,GAAAA,+BAAA"}

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import type { Category } from '../../../types/category';
+export type EmojiPickerEmojisProps = {
+    accessToken?: string;
+    onSelect: (emoji: string) => void;
+    personId?: string;
+    searchString: string;
+    selectedCategory: Category;
+};
+declare const EmojiPickerEmojis: FC<EmojiPickerEmojisProps>;
+export default EmojiPickerEmojis;

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emojilib = _interopRequireDefault(require("emojilib"));
+var _react = _interopRequireWildcard(require("react"));
+var _dataByEmoji = _interopRequireDefault(require("unicode-emoji-json/data-by-emoji.json"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _emojiDeDE = _interopRequireDefault(require("../../../constants/emoji-de-DE.json"));
+var _emojiHistory = require("../../../hooks/emojiHistory");
+var _Emoji = _interopRequireDefault(require("./emoji/Emoji"));
+var _EmojiPickerEmojis = require("./EmojiPickerEmojis.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const EmojiPickerEmojis = _ref => {
+  let {
+    accessToken,
+    onSelect,
+    personId,
+    searchString,
+    selectedCategory
+  } = _ref;
+  const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
+  const {
+    addOrUpdateEmojiInHistory,
+    historyEmojis
+  } = (0, _emojiHistory.useEmojiHistory)({
+    accessToken,
+    personId,
+    selectedCategory
+  });
+  const handleSelect = (0, _react.useCallback)(_ref2 => {
+    let {
+      emoji,
+      name,
+      skin_tone_support
+    } = _ref2;
+    onSelect(emoji);
+    void addOrUpdateEmojiInHistory({
+      emoji,
+      name,
+      skin_tone_support
+    });
+  }, [addOrUpdateEmojiInHistory, onSelect]);
+  const emojis = (0, _react.useMemo)(() => {
+    var _emojiCategories$find;
+    if (searchString.trim() !== '') {
+      const lowerSearchString = searchString.toLowerCase();
+      const searchResults = [];
+      Object.entries(_dataByEmoji.default).forEach(_ref3 => {
+        let [emoji, {
+          name,
+          skin_tone_support
+        }] = _ref3;
+        // @ts-expect-error: Type is correct here
+        const keywords = _emojilib.default[emoji];
+        // @ts-expect-error: Type is correct here
+        const germanKeywords = _emojiDeDE.default[emoji];
+        if (name.includes(lowerSearchString) || keywords !== null && keywords !== void 0 && keywords.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords !== null && germanKeywords !== void 0 && germanKeywords.some(keyword => keyword.includes(lowerSearchString))) {
+          searchResults.push( /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+            emoji: emoji,
+            isSkinToneSupported: skin_tone_support,
+            key: name,
+            onPopupVisibilityChange: setShouldPreventScroll,
+            onSelect: e => handleSelect({
+              emoji: e,
+              name,
+              skin_tone_support
+            })
+          }));
+        }
+      });
+      return searchResults;
+    }
+    if (selectedCategory === 'history') {
+      return historyEmojis.map(_ref4 => {
+        let {
+          emoji,
+          name,
+          skin_tone_support
+        } = _ref4;
+        return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+          emoji: emoji,
+          key: name,
+          onPopupVisibilityChange: setShouldPreventScroll,
+          onSelect: e => handleSelect({
+            emoji: e,
+            name,
+            skin_tone_support
+          }),
+          isSkinToneSupported: false
+        });
+      });
+    }
+    return (_emojiCategories$find = _dataByGroup.default.find(_ref5 => {
+      let {
+        slug
+      } = _ref5;
+      return slug === selectedCategory;
+    })) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(_ref6 => {
+      let {
+        emoji,
+        name,
+        skin_tone_support
+      } = _ref6;
+      return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+        emoji: emoji,
+        isSkinToneSupported: skin_tone_support,
+        key: name,
+        onPopupVisibilityChange: setShouldPreventScroll,
+        onSelect: e => handleSelect({
+          emoji: e,
+          name,
+          skin_tone_support
+        })
+      });
+    });
+  }, [handleSelect, historyEmojis, searchString, selectedCategory]);
+  const shouldShowNoContentInfo = !emojis || emojis.length === 0;
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, {
+    shouldPreventScroll: shouldPreventScroll,
+    shouldShowNoContentInfo: shouldShowNoContentInfo
+  }, emojis, shouldShowNoContentInfo && /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
+};
+EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';
+var _default = EmojiPickerEmojis;
+exports.default = _default;
+//# sourceMappingURL=EmojiPickerEmojis.js.map

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.js","names":["_emojilib","_interopRequireDefault","require","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handleSelect","useCallback","_ref2","emoji","name","skin_tone_support","emojis","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","_ref3","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSkinToneSupported","onPopupVisibilityChange","e","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","shouldShowNoContentInfo","length","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import emojiLib from 'emojilib';\nimport React, { FC, useCallback, useMemo, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n        }) => {\n            onSelect(emoji);\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect]\n    );\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }]) => {\n                // @ts-expect-error: Type is correct here\n                const keywords = emojiLib[emoji] as string[] | undefined;\n                // @ts-expect-error: Type is correct here\n                const germanKeywords = germanEmojiLib[emoji] as string[] | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            emoji={emoji}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            onPopupVisibilityChange={setShouldPreventScroll}\n                            onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                        />\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }) => (\n                <Emoji\n                    emoji={emoji}\n                    key={name}\n                    onPopupVisibilityChange={setShouldPreventScroll}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }) => (\n                <Emoji\n                    emoji={emoji}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={setShouldPreventScroll}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                />\n            ));\n    }, [handleSelect, historyEmojis, searchString, selectedCategory]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            shouldPreventScroll={shouldPreventScroll}\n            shouldShowNoContentInfo={shouldShowNoContentInfo}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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"}

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledEmojiPickerEmojis: import("styled-components").StyledComponent<"div", any, {
+    shouldPreventScroll: boolean;
+    shouldShowNoContentInfo: boolean;
+} & {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledEmojiPickerEmojisNoContentInfo: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmojiPickerEmojisNoContentInfo = exports.StyledEmojiPickerEmojis = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledEmojiPickerEmojis = _styledComponents.default.div`
+    display: ${_ref => {
+  let {
+    shouldShowNoContentInfo
+  } = _ref;
+  return shouldShowNoContentInfo ? 'flex' : 'grid';
+}};
+    flex: 1 1 auto;
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+    grid-template-rows: min-content;
+    overflow-y: ${_ref2 => {
+  let {
+    shouldPreventScroll
+  } = _ref2;
+  return shouldPreventScroll ? 'hidden' : 'scroll';
+}};
+    padding: 5px 0 5px 5px;
+    position: relative;
+    width: 100%;
+
+    ${_ref3 => {
+  let {
+    shouldShowNoContentInfo
+  } = _ref3;
+  return shouldShowNoContentInfo && (0, _styledComponents.css)`
+            align-items: center;
+        `;
+}}
+
+    ${_ref4 => {
+  let {
+    shouldPreventScroll
+  } = _ref4;
+  return shouldPreventScroll && (0, _styledComponents.css)`
+            padding-right: 5px;
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-button {
+        background-color: transparent;
+        height: 5px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(
+            ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['text-rgb'];
+}},
+            0.15
+        );
+        border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+        scrollbar-color: rgba(
+                ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['text-rgb'];
+}},
+                0.15
+            )
+            transparent;
+        scrollbar-width: thin;
+    }
+`;
+exports.StyledEmojiPickerEmojis = StyledEmojiPickerEmojis;
+const StyledEmojiPickerEmojisNoContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    opacity: 0.85;
+    padding: 0 12.5%;
+    text-align: center;
+`;
+exports.StyledEmojiPickerEmojisNoContentInfo = StyledEmojiPickerEmojisNoContentInfo;
+//# sourceMappingURL=EmojiPickerEmojis.styles.js.map

package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiPickerEmojis","styled","div","_ref","shouldShowNoContentInfo","_ref2","shouldPreventScroll","_ref3","css","_ref4","_ref5","theme","_ref6","exports","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n    shouldPreventScroll: boolean;\n    shouldShowNoContentInfo: boolean;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: ${({ shouldShowNoContentInfo }) => (shouldShowNoContentInfo ? 'flex' : 'grid')};\n    flex: 1 1 auto;\n    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n    grid-template-rows: min-content;\n    overflow-y: ${({ shouldPreventScroll }) => (shouldPreventScroll ? 'hidden' : 'scroll')};\n    padding: 5px 0 5px 5px;\n    position: relative;\n    width: 100%;\n\n    ${({ shouldShowNoContentInfo }) =>\n        shouldShowNoContentInfo &&\n        css`\n            align-items: center;\n        `}\n\n    ${({ shouldPreventScroll }) =>\n        shouldPreventScroll &&\n        css`\n            padding-right: 5px;\n        `}\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiPickerEmojisNoContentInfo = styled.div`\n    font-size: 85%;\n    opacity: 0.85;\n    padding: 0 12.5%;\n    text-align: center;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAOzC,MAAMW,uBAAuB,GAAGC,yBAAM,CAACC,GAAkC;AAChF,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAMC,uBAAuB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AAC5F;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AAC3F;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAC1BH,uBAAuB,IACvB,IAAAI,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAoB,CAAC,GAAAG,KAAA;EAAA,OACtBH,mBAAmB,IACnB,IAAAE,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcE,KAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACE,OAAA,CAAAb,uBAAA,GAAAA,uBAAA;AAEK,MAAMc,oCAAoC,GAAGb,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA;AACA,CAAC;AAACW,OAAA,CAAAC,oCAAA,GAAAA,oCAAA"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type EmojiProps = {
+    emoji: string;
+    isSkinToneSupported: boolean;
+    onPopupVisibilityChange: (isVisible: boolean) => void;
+    onSelect: (emoji: string) => void;
+};
+declare const Emoji: FC<EmojiProps>;
+export default Emoji;

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _alignment = require("../../../../constants/alignment");
+var _Emoji = require("./Emoji.styles");
+var _SkinTonePopup = _interopRequireDefault(require("./skin-tone-popup/SkinTonePopup"));
+var _SkinTonePopup2 = require("./skin-tone-popup/SkinTonePopup.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const Emoji = _ref => {
+  let {
+    emoji,
+    isSkinToneSupported,
+    onPopupVisibilityChange,
+    onSelect
+  } = _ref;
+  const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
+  const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = (0, _react.useState)(_alignment.AnchorAlignment.Top);
+  const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = (0, _react.useState)(0);
+  const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = (0, _react.useState)({
+    top: 0
+  });
+  const [skinTonePopupPosition, setSkinTonePopupPosition] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect(emoji);
+  }, [emoji, onSelect]);
+  const handleContextMenu = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const {
+      currentTarget: element,
+      currentTarget: {
+        parentElement
+      }
+    } = event;
+    if (parentElement) {
+      const {
+        height: elementHeight,
+        left: elementLeft,
+        top: elementTop,
+        width: elementWidth
+      } = element.getBoundingClientRect();
+      const {
+        height: parentHeight,
+        left: parentLeft,
+        top: parentTop,
+        width: parentWidth
+      } = parentElement.getBoundingClientRect();
+      const {
+        scrollTop
+      } = parentElement;
+      let anchorAlignment = _alignment.AnchorAlignment.Top;
+      let anchorOffset = 0;
+      let left = elementLeft - parentLeft - _SkinTonePopup2.skinTonePopupContentSize.width / 2 + elementWidth / 2;
+      let top = elementTop - parentTop + elementHeight + scrollTop;
+      const maxLeft = parentWidth - _SkinTonePopup2.skinTonePopupContentSize.width - 12;
+      const minLeft = 12;
+      if (left < minLeft) {
+        anchorOffset = left - minLeft;
+        left = minLeft;
+      } else if (left > maxLeft) {
+        anchorOffset = left - maxLeft;
+        left = maxLeft;
+      }
+      if (top + _SkinTonePopup2.skinTonePopupContentSize.height > parentHeight + scrollTop) {
+        anchorAlignment = _alignment.AnchorAlignment.Bottom;
+        top -= elementHeight + _SkinTonePopup2.skinTonePopupContentSize.height;
+      }
+      if (isSkinToneSupported) {
+        setSkinTonePopupAnchorAlignment(anchorAlignment);
+        setSkinTonePopupAnchorOffset(anchorOffset);
+        setSkinTonePopupPosition({
+          left,
+          top
+        });
+        setSkinTonePopupOverlayPosition({
+          top: scrollTop
+        });
+        setShouldShowPopup(true);
+      }
+    }
+  }, [isSkinToneSupported]);
+  const handleHidePopup = (0, _react.useCallback)(() => setShouldShowPopup(false), []);
+  (0, _react.useEffect)(() => {
+    onPopupVisibilityChange(shouldShowPopup);
+  }, [onPopupVisibilityChange, shouldShowPopup]);
+  return /*#__PURE__*/_react.default.createElement(_Emoji.StyledEmoji, {
+    className: "prevent-lose-focus",
+    onClick: handleClick,
+    onContextMenu: handleContextMenu
+  }, emoji, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_SkinTonePopup.default, {
+    anchorAlignment: skinTonePopupAnchorAlignment,
+    anchorOffset: skinTonePopupAnchorOffset,
+    emoji: emoji,
+    key: emoji,
+    onHidePopup: handleHidePopup,
+    onSelect: onSelect,
+    overlayPosition: skinTonePopupOverlayPosition,
+    position: skinTonePopupPosition
+  })));
+};
+Emoji.displayName = 'Emoji';
+var _default = Emoji;
+exports.default = _default;
+//# sourceMappingURL=Emoji.js.map