@chayns-components/emoji-input 5.0.0-beta.81 → 5.0.0-beta.82

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

@@ -23,6 +23,7 @@ const EmojiPickerEmojis = _ref => {
     searchString,
     selectedCategory
   } = _ref;
+  const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
   const {
     addOrUpdateEmojiInHistory,
     historyEmojis
@@ -63,6 +64,7 @@ const EmojiPickerEmojis = _ref => {
             emoji: emoji,
             isSkinToneSupported: skin_tone_support,
             key: name,
+            onPopupVisibilityChange: setShouldPreventScroll,
             onSelect: e => handleSelect({
               emoji: e,
               name,
@@ -83,6 +85,7 @@ const EmojiPickerEmojis = _ref => {
         return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
           emoji: emoji,
           key: name,
+          onPopupVisibilityChange: setShouldPreventScroll,
           onSelect: e => handleSelect({
             emoji: e,
             name,
@@ -107,6 +110,7 @@ const EmojiPickerEmojis = _ref => {
         emoji: emoji,
         isSkinToneSupported: skin_tone_support,
         key: name,
+        onPopupVisibilityChange: setShouldPreventScroll,
         onSelect: e => handleSelect({
           emoji: e,
           name,
@@ -115,7 +119,11 @@ const EmojiPickerEmojis = _ref => {
       });
     });
   }, [handleSelect, historyEmojis, searchString, selectedCategory]);
-  return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, null, emojis);
+  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;

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

@@ -1 +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","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","e","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","StyledEmojiPickerEmojis","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import emojiLib from 'emojilib';\nimport React, { FC, useCallback, useMemo } 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 { StyledEmojiPickerEmojis } 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 { 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                            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                    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                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                />\n            ));\n    }, [handleSelect, historyEmojis, searchString, selectedCategory]);\n\n    return <StyledEmojiPickerEmojis>{emojis}</StyledEmojiPickerEmojis>;\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AAAqE,SAAAS,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,SAAAR,wBAAAY,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;AAAA,SAAArB,uBAAAe,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAUrE,MAAMiB,iBAA6C,GAAGC,IAAA,IAMhD;EAAA,IANiD;IACnDC,WAAW;IACXC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM;IAAEM,yBAAyB;IAAEC;EAAc,CAAC,GAAG,IAAAC,6BAAe,EAAC;IACjEP,WAAW;IACXE,QAAQ;IACRE;EACJ,CAAC,CAAC;EAEF,MAAMI,YAAY,GAAG,IAAAC,kBAAW,EAC5BC,KAAA,IAQM;IAAA,IARL;MACGC,KAAK;MACLC,IAAI;MACJC;IAKJ,CAAC,GAAAH,KAAA;IACGT,QAAQ,CAACU,KAAK,CAAC;IAEf,KAAKN,yBAAyB,CAAC;MAAEM,KAAK;MAAEC,IAAI;MAAEC;IAAkB,CAAC,CAAC;EACtE,CAAC,EACD,CAACR,yBAAyB,EAAEJ,QAAQ,CAAC,CACxC;EAED,MAAMa,MAAM,GAAG,IAAAC,cAAO,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACzB,IAAIb,YAAY,CAACc,IAAI,EAAE,KAAK,EAAE,EAAE;MAC5B,MAAMC,iBAAiB,GAAGf,YAAY,CAACgB,WAAW,EAAE;MAEpD,MAAMC,aAA4B,GAAG,EAAE;MAEvC/B,MAAM,CAACgC,OAAO,CAACC,oBAAS,CAAC,CAACC,OAAO,CAACC,KAAA,IAA0C;QAAA,IAAzC,CAACb,KAAK,EAAE;UAAEC,IAAI;UAAEC;QAAkB,CAAC,CAAC,GAAAW,KAAA;QACnE;QACA,MAAMC,QAAQ,GAAGC,iBAAQ,CAACf,KAAK,CAAyB;QACxD;QACA,MAAMgB,cAAc,GAAGC,kBAAc,CAACjB,KAAK,CAAyB;QAEpE,IACIC,IAAI,CAACiB,QAAQ,CAACX,iBAAiB,CAAC,IAChCO,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEK,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACX,iBAAiB,CAAC,CAAC,IAChES,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEG,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACX,iBAAiB,CAAC,CAAC,EACxE;UACEE,aAAa,CAACY,IAAI,eACdhE,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC3D,MAAA,CAAAS,OAAK;YACF4B,KAAK,EAAEA,KAAM;YACbuB,mBAAmB,EAAErB,iBAAkB;YACvCrB,GAAG,EAAEoB,IAAK;YACVX,QAAQ,EAAGkC,CAAC,IAAK3B,YAAY,CAAC;cAAEG,KAAK,EAAEwB,CAAC;cAAEvB,IAAI;cAAEC;YAAkB,CAAC;UAAE,EACvE,CACL;QACL;MACJ,CAAC,CAAC;MAEF,OAAOO,aAAa;IACxB;IAEA,IAAIhB,gBAAgB,KAAK,SAAS,EAAE;MAChC,OAAOE,aAAa,CAAC8B,GAAG,CAACC,KAAA;QAAA,IAAC;UAAE1B,KAAK;UAAEC,IAAI;UAAEC;QAAkB,CAAC,GAAAwB,KAAA;QAAA,oBACxDrE,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC3D,MAAA,CAAAS,OAAK;UACF4B,KAAK,EAAEA,KAAM;UACbnB,GAAG,EAAEoB,IAAK;UACVX,QAAQ,EAAGkC,CAAC,IAAK3B,YAAY,CAAC;YAAEG,KAAK,EAAEwB,CAAC;YAAEvB,IAAI;YAAEC;UAAkB,CAAC,CAAE;UACrEqB,mBAAmB,EAAE;QAAM,EAC7B;MAAA,CACL,CAAC;IACN;IAEA,QAAAlB,qBAAA,GAAOsB,oBAAe,CACjBC,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI,KAAKrC,gBAAgB;IAAA,EAAC,cAAAY,qBAAA,uBAD3CA,qBAAA,CAEDF,MAAM,CAACsB,GAAG,CAACM,KAAA;MAAA,IAAC;QAAE/B,KAAK;QAAEC,IAAI;QAAEC;MAAkB,CAAC,GAAA6B,KAAA;MAAA,oBAC5C1E,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC3D,MAAA,CAAAS,OAAK;QACF4B,KAAK,EAAEA,KAAM;QACbuB,mBAAmB,EAAErB,iBAAkB;QACvCrB,GAAG,EAAEoB,IAAK;QACVX,QAAQ,EAAGkC,CAAC,IAAK3B,YAAY,CAAC;UAAEG,KAAK,EAAEwB,CAAC;UAAEvB,IAAI;UAAEC;QAAkB,CAAC;MAAE,EACvE;IAAA,CACL,CAAC;EACV,CAAC,EAAE,CAACL,YAAY,EAAEF,aAAa,EAAEH,YAAY,EAAEC,gBAAgB,CAAC,CAAC;EAEjE,oBAAOpC,MAAA,CAAAe,OAAA,CAAAkD,aAAA,CAAC1D,kBAAA,CAAAoE,uBAAuB,QAAE7B,MAAM,CAA2B;AACtE,CAAC;AAEDhB,iBAAiB,CAAC8C,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAErC/C,iBAAiB;AAAAgD,OAAA,CAAA/D,OAAA,GAAA8D,QAAA"}
+{"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

@@ -1,3 +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

@@ -3,18 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledEmojiPickerEmojis = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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: grid;
+    align-items: center;
+    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: scroll;
-    padding: 10px 0;
+    overflow-y: ${_ref2 => {
+  let {
+    shouldPreventScroll
+  } = _ref2;
+  return shouldPreventScroll ? 'hidden' : 'scroll';
+}};
+    padding: 5px 0 5px 5px;
     position: relative;
 
+    ${_ref3 => {
+  let {
+    shouldPreventScroll
+  } = _ref3;
+  return shouldPreventScroll && (0, _styledComponents.css)`
+            padding-right: 5px;
+        `;
+}}
+
     // Styles for custom scrollbar
     ::-webkit-scrollbar {
         width: 5px;
@@ -31,10 +52,10 @@ const StyledEmojiPickerEmojis = _styledComponents.default.div`
 
     ::-webkit-scrollbar-thumb {
         background-color: rgba(
-            ${_ref => {
+            ${_ref4 => {
   let {
     theme
-  } = _ref;
+  } = _ref4;
   return theme['text-rgb'];
 }},
             0.15
@@ -46,10 +67,10 @@ const StyledEmojiPickerEmojis = _styledComponents.default.div`
     // only supported in Firefox:
     * {
         scrollbar-color: rgba(
-                ${_ref2 => {
+                ${_ref5 => {
   let {
     theme
-  } = _ref2;
+  } = _ref5;
   return theme['text-rgb'];
 }},
                 0.15
@@ -59,4 +80,11 @@ const StyledEmojiPickerEmojis = _styledComponents.default.div`
     }
 `;
 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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmojiPickerEmojis","styled","div","_ref","theme","_ref2","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<unknown>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: 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: scroll;\n    padding: 10px 0;\n    position: relative;\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"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,uBAAuB,GAAGC,yBAAM,CAACC,GAAkC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;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,CAAAN,uBAAA,GAAAA,uBAAA"}
+{"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","theme","_ref5","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    align-items: center;\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\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;AACA,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,MAAMC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OACtBD,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,cAAcC,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,CAAAZ,uBAAA,GAAAA,uBAAA;AAEK,MAAMa,oCAAoC,GAAGZ,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA;AACA,CAAC;AAACU,OAAA,CAAAC,oCAAA,GAAAA,oCAAA"}

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

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

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

@@ -17,11 +17,15 @@ 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
@@ -57,7 +61,7 @@ const Emoji = _ref => {
       let anchorAlignment = _alignment.AnchorAlignment.Top;
       let anchorOffset = 0;
       let left = elementLeft - parentLeft - _SkinTonePopup2.skinTonePopupContentSize.width / 2 + elementWidth / 2;
-      let top = elementTop - parentTop + elementHeight;
+      let top = elementTop - parentTop + elementHeight + scrollTop;
       const maxLeft = parentWidth - _SkinTonePopup2.skinTonePopupContentSize.width - 12;
       const minLeft = 12;
       if (left < minLeft) {
@@ -78,11 +82,17 @@ const Emoji = _ref => {
           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,
@@ -96,6 +106,7 @@ const Emoji = _ref => {
     key: emoji,
     onHidePopup: handleHidePopup,
     onSelect: onSelect,
+    overlayPosition: skinTonePopupOverlayPosition,
     position: skinTonePopupPosition
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Emoji","_ref","emoji","isSkinToneSupported","onSelect","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupPosition","setSkinTonePopupPosition","left","top","handleClick","useCallback","handleContextMenu","event","preventDefault","stopPropagation","currentTarget","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleHidePopup","createElement","StyledEmoji","className","onClick","onContextMenu","AnimatePresence","initial","onHidePopup","position","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSkinToneSupported: boolean;\n    onSelect: (emoji: string) => void;\n};\n\nconst Emoji: FC<EmojiProps> = ({ emoji, isSkinToneSupported, onSelect }) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const {\n                currentTarget: element,\n                currentTarget: { parentElement },\n            } = event;\n\n            if (parentElement) {\n                const {\n                    height: elementHeight,\n                    left: elementLeft,\n                    top: elementTop,\n                    width: elementWidth,\n                } = element.getBoundingClientRect();\n\n                const {\n                    height: parentHeight,\n                    left: parentLeft,\n                    top: parentTop,\n                    width: parentWidth,\n                } = parentElement.getBoundingClientRect();\n\n                const { scrollTop } = parentElement;\n\n                let anchorAlignment = AnchorAlignment.Top;\n                let anchorOffset = 0;\n\n                let left =\n                    elementLeft -\n                    parentLeft -\n                    skinTonePopupContentSize.width / 2 +\n                    elementWidth / 2;\n\n                let top = elementTop - parentTop + elementHeight;\n\n                const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n                const minLeft = 12;\n\n                if (left < minLeft) {\n                    anchorOffset = left - minLeft;\n                    left = minLeft;\n                } else if (left > maxLeft) {\n                    anchorOffset = left - maxLeft;\n                    left = maxLeft;\n                }\n\n                if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                    anchorAlignment = AnchorAlignment.Bottom;\n                    top -= elementHeight + skinTonePopupContentSize.height;\n                }\n\n                if (isSkinToneSupported) {\n                    setSkinTonePopupAnchorAlignment(anchorAlignment);\n                    setSkinTonePopupAnchorOffset(anchorOffset);\n                    setSkinTonePopupPosition({ left, top });\n                    setShouldShowPopup(true);\n                }\n            }\n        },\n        [isSkinToneSupported]\n    );\n\n    const handleHidePopup = useCallback(() => setShouldShowPopup(false), []);\n\n    return (\n        <StyledEmoji\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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"}
+{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Emoji","_ref","emoji","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","handleClick","useCallback","handleContextMenu","event","preventDefault","stopPropagation","currentTarget","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleHidePopup","useEffect","createElement","StyledEmoji","className","onClick","onContextMenu","AnimatePresence","initial","onHidePopup","overlayPosition","position","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const {\n                currentTarget: element,\n                currentTarget: { parentElement },\n            } = event;\n\n            if (parentElement) {\n                const {\n                    height: elementHeight,\n                    left: elementLeft,\n                    top: elementTop,\n                    width: elementWidth,\n                } = element.getBoundingClientRect();\n\n                const {\n                    height: parentHeight,\n                    left: parentLeft,\n                    top: parentTop,\n                    width: parentWidth,\n                } = parentElement.getBoundingClientRect();\n\n                const { scrollTop } = parentElement;\n\n                let anchorAlignment = AnchorAlignment.Top;\n                let anchorOffset = 0;\n\n                let left =\n                    elementLeft -\n                    parentLeft -\n                    skinTonePopupContentSize.width / 2 +\n                    elementWidth / 2;\n\n                let top = elementTop - parentTop + elementHeight + scrollTop;\n\n                const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n                const minLeft = 12;\n\n                if (left < minLeft) {\n                    anchorOffset = left - minLeft;\n                    left = minLeft;\n                } else if (left > maxLeft) {\n                    anchorOffset = left - maxLeft;\n                    left = maxLeft;\n                }\n\n                if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                    anchorAlignment = AnchorAlignment.Bottom;\n                    top -= elementHeight + skinTonePopupContentSize.height;\n                }\n\n                if (isSkinToneSupported) {\n                    setSkinTonePopupAnchorAlignment(anchorAlignment);\n                    setSkinTonePopupAnchorOffset(anchorOffset);\n                    setSkinTonePopupPosition({ left, top });\n                    setSkinTonePopupOverlayPosition({ top: scrollTop });\n                    setShouldShowPopup(true);\n                }\n            }\n        },\n        [isSkinToneSupported]\n    );\n\n    const handleHidePopup = useCallback(() => setShouldShowPopup(false), []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        overlayPosition={skinTonePopupOverlayPosition}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.d.ts

@@ -6,6 +6,9 @@ export type SkinTonePopupProps = {
     emoji: string;
     onHidePopup: VoidFunction;
     onSelect: (emojiWithSkinTone: string) => void;
+    overlayPosition: {
+        top: number;
+    };
     position: {
         left: number;
         top: number;

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js

@@ -18,6 +18,7 @@ const SkinTonePopup = _ref => {
     emoji,
     onHidePopup,
     onSelect,
+    overlayPosition,
     position
   } = _ref;
   const handleOverlayClick = (0, _react.useCallback)(event => {
@@ -63,7 +64,8 @@ const SkinTonePopup = _ref => {
     anchorOffset: anchorOffset,
     style: position
   }, emojis), /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupOverlay, {
-    onClick: handleOverlayClick
+    onClick: handleOverlayClick,
+    style: overlayPosition
   }));
 };
 SkinTonePopup.displayName = 'SkinTonePopup';

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","position","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","emojis","useMemo","result","entries","emojiComponents","forEach","_ref2","value","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n    StyledMotionSkinTonePopup,\n    StyledSkinTonePopupContent,\n    StyledSkinTonePopupContentEmoji,\n    StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n    anchorAlignment: AnchorAlignment;\n    anchorOffset: number;\n    emoji: string;\n    onHidePopup: VoidFunction;\n    onSelect: (emojiWithSkinTone: string) => void;\n    position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    position,\n}) => {\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup]\n    );\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value]) => {\n            if (key.includes('skin_tone')) {\n                const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n                const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    onSelect(emojiWithSkinTone);\n\n                    onHidePopup();\n                };\n\n                result.push(\n                    <StyledSkinTonePopupContentEmoji key={key} onClick={handleClick}>\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, onHidePopup, onSelect]);\n\n    return (\n        <StyledMotionSkinTonePopup\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.1 }}\n        >\n            <StyledSkinTonePopupContent\n                anchorAlignment={anchorAlignment}\n                anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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"}
+{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","emojis","useMemo","result","entries","emojiComponents","forEach","_ref2","value","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n    StyledMotionSkinTonePopup,\n    StyledSkinTonePopupContent,\n    StyledSkinTonePopupContentEmoji,\n    StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n    anchorAlignment: AnchorAlignment;\n    anchorOffset: number;\n    emoji: string;\n    onHidePopup: VoidFunction;\n    onSelect: (emojiWithSkinTone: string) => void;\n    overlayPosition: { top: number };\n    position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    overlayPosition,\n    position,\n}) => {\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup]\n    );\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value]) => {\n            if (key.includes('skin_tone')) {\n                const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n                const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    onSelect(emojiWithSkinTone);\n\n                    onHidePopup();\n                };\n\n                result.push(\n                    <StyledSkinTonePopupContentEmoji key={key} onClick={handleClick}>\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, onHidePopup, onSelect]);\n\n    return (\n        <StyledMotionSkinTonePopup\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.1 }}\n        >\n            <StyledSkinTonePopupContent\n                anchorAlignment={anchorAlignment}\n                anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js

@@ -93,12 +93,11 @@ const StyledSkinTonePopupContentEmoji = _styledComponents.default.div`
 `;
 exports.StyledSkinTonePopupContentEmoji = StyledSkinTonePopupContentEmoji;
 const StyledSkinTonePopupOverlay = _styledComponents.default.div`
-    bottom: 0;
     cursor: default;
+    height: 100%;
     left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
+    width: 100%;
     z-index: 1;
 `;
 exports.StyledSkinTonePopupOverlay = StyledSkinTonePopupOverlay;

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionSkinTonePopup","styled","motion","div","exports","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","anchorAlignment","anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\nimport type { SkinTonePopupProps } from './SkinTonePopup';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)`\n    z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n    height: 48,\n    width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<\n    Pick<SkinTonePopupProps, 'anchorAlignment' | 'anchorOffset'>\n>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n    align-items: stretch;\n    background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    display: flex;\n    height: ${skinTonePopupContentSize.height}px;\n    justify-content: stretch;\n    position: absolute;\n    width: ${skinTonePopupContentSize.width}px;\n    z-index: 2;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ anchorAlignment, anchorOffset }) => {\n            switch (anchorAlignment) {\n                case AnchorAlignment.Bottom:\n                    return css`\n                        bottom: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(45deg);\n                    `;\n                case AnchorAlignment.Top:\n                    return css`\n                        top: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(225deg);\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font-size: 24px;\n    justify-content: center;\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n    bottom: 0;\n    cursor: default;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionSkinTonePopup","styled","motion","div","exports","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","anchorAlignment","anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\nimport type { SkinTonePopupProps } from './SkinTonePopup';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)`\n    z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n    height: 48,\n    width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<\n    Pick<SkinTonePopupProps, 'anchorAlignment' | 'anchorOffset'>\n>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n    align-items: stretch;\n    background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    display: flex;\n    height: ${skinTonePopupContentSize.height}px;\n    justify-content: stretch;\n    position: absolute;\n    width: ${skinTonePopupContentSize.width}px;\n    z-index: 2;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ anchorAlignment, anchorOffset }) => {\n            switch (anchorAlignment) {\n                case AnchorAlignment.Bottom:\n                    return css`\n                        bottom: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(45deg);\n                    `;\n                case AnchorAlignment.Top:\n                    return css`\n                        top: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(225deg);\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font-size: 24px;\n    justify-content: center;\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n    cursor: default;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n`;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.81",
+    "version": "5.0.0-beta.82",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1d43cf557944911ef9403684c83d844501f02857"
+    "gitHead": "fee2ae8bc8006e282900a6e4a77c6de062bedbd7"
 }