@chayns-components/emoji-input 5.0.0-beta.85 → 5.0.0-beta.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/emoji-input/EmojiInput.js +5 -1
- package/lib/components/emoji-input/EmojiInput.js.map +1 -1
- package/lib/components/emoji-input/EmojiInput.styles.d.ts +3 -0
- package/lib/components/emoji-input/EmojiInput.styles.js +16 -13
- package/lib/components/emoji-input/EmojiInput.styles.js.map +1 -1
- package/lib/components/emoji-picker/EmojiPicker.js +2 -2
- package/lib/components/emoji-picker/EmojiPicker.js.map +1 -1
- package/lib/components/emoji-picker/EmojiPicker.styles.js +2 -0
- package/lib/components/emoji-picker/EmojiPicker.styles.js.map +1 -1
- package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js +2 -1
- package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map +1 -1
- package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js +1 -0
- package/lib/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js.map +1 -1
- package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js +1 -1
- package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js.map +1 -1
- package/lib/components/emoji-picker-popup/EmojiPickerPopup.js +17 -14
- package/lib/components/emoji-picker-popup/EmojiPickerPopup.js.map +1 -1
- package/lib/components/emoji-picker-popup/EmojiPickerPopup.styles.js +1 -1
- package/lib/components/emoji-picker-popup/EmojiPickerPopup.styles.js.map +1 -1
- package/lib/utils/font.d.ts +1 -0
- package/lib/utils/font.js +15 -0
- package/lib/utils/font.js.map +1 -0
- package/package.json +3 -3
|
@@ -7,6 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _emoji = require("../../utils/emoji");
|
|
9
9
|
var _environment = require("../../utils/environment");
|
|
10
|
+
var _font = require("../../utils/font");
|
|
10
11
|
var _selection = require("../../utils/selection");
|
|
11
12
|
var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
|
|
12
13
|
var _EmojiInput = require("./EmojiInput.styles");
|
|
@@ -27,6 +28,7 @@ const EmojiInput = _ref => {
|
|
|
27
28
|
value
|
|
28
29
|
} = _ref;
|
|
29
30
|
const [isMobile] = (0, _react.useState)((0, _environment.getIsMobile)());
|
|
31
|
+
const [rootFontFamily] = (0, _react.useState)((0, _font.getRootFontFamily)());
|
|
30
32
|
const editorRef = (0, _react.useRef)(null);
|
|
31
33
|
|
|
32
34
|
/**
|
|
@@ -146,10 +148,12 @@ const EmojiInput = _ref => {
|
|
|
146
148
|
isRightElementGiven: !!rightElement
|
|
147
149
|
}, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
|
|
148
150
|
contentEditable: !isDisabled,
|
|
151
|
+
isMobile: isMobile,
|
|
149
152
|
onInput: handleInput,
|
|
150
153
|
onKeyDown: onKeyDown,
|
|
151
154
|
placeholder: placeholder,
|
|
152
|
-
ref: editorRef
|
|
155
|
+
ref: editorRef,
|
|
156
|
+
rootFontFamily: rootFontFamily
|
|
153
157
|
}), !isMobile && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
|
|
154
158
|
accessToken: accessToken,
|
|
155
159
|
alignment: popupAlignment,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n StyledEmojiInput,\n StyledEmojiInputContent,\n StyledEmojiInputEditor,\n StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\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 * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the text of the input changes\n */\n onInput?: ChangeEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when a key is pressed down.\n */\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => 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 /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n popupAlignment?: PopupAlignment;\n /**\n * Element that is rendered inside the EmojiInput on the right side.\n */\n rightElement?: ReactNode;\n /**\n * Value of the input field\n */\n value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n accessToken,\n isDisabled,\n onInput,\n onKeyDown,\n onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n value,\n}) => {\n const [isMobile] = useState(getIsMobile());\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n /**\n * This function updates the content of the 'contentEditable' element if the new text is\n * different from the previous content. So this is only true if, for example, a text like \":-)\"\n * has been replaced to the corresponding emoji.\n *\n * When updating the HTML, the current cursor position is saved before replacing the content, so\n * that it can be set again afterward.\n */\n const handleUpdateText = useCallback((text: string) => {\n if (!editorRef.current) {\n return;\n }\n\n const newInnerText = convertAsciiToUnicode(text);\n\n if (newInnerText !== editorRef.current.innerText) {\n saveSelection(editorRef.current);\n\n editorRef.current.innerText = newInnerText;\n\n restoreSelection(editorRef.current);\n }\n }, []);\n\n /**\n * This function handles the 'input' events of the 'contentEditable' element and also passes the\n * respective event up accordingly if the 'onInput' property is a function.\n */\n const handleInput = useCallback(\n (event: ChangeEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\n return;\n }\n\n handleUpdateText(editorRef.current.innerText);\n\n if (typeof onInput === 'function') {\n onInput(event);\n }\n },\n [handleUpdateText, onInput]\n );\n\n /**\n * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n * will be appended to the back of the input field content.\n *\n * In addition, this function also sets the cursor to the correct position when the input field\n * has the focus. For this purpose, the current position of the cursor or a selection is read to\n * calculate the cursor position after inserting the emoji.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (!editorRef.current) {\n return;\n }\n\n const selection = window.getSelection();\n\n if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n const { endOffset, startOffset } = selection.getRangeAt(0);\n\n const rangeDistance = endOffset - startOffset;\n\n let offset = endOffset + emoji.length - rangeDistance;\n\n let { anchorNode } = selection;\n\n if (anchorNode.nodeValue) {\n anchorNode.nodeValue =\n anchorNode.nodeValue.substring(0, startOffset) +\n emoji +\n anchorNode.nodeValue.substring(endOffset);\n } else if (anchorNode === editorRef.current) {\n const newTextNode = document.createTextNode(emoji);\n\n editorRef.current.appendChild(newTextNode);\n\n anchorNode = newTextNode;\n }\n\n const newRange = document.createRange();\n\n if (anchorNode.nodeValue) {\n offset = Math.min(offset, anchorNode.nodeValue.length);\n }\n\n newRange.setStart(anchorNode, offset);\n newRange.setEnd(anchorNode, offset);\n\n selection.removeAllRanges();\n selection.addRange(newRange);\n } else {\n editorRef.current.innerText += emoji;\n }\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }, []);\n\n /**\n * This function ensures that the input field does not lose focus when the popup is opened or an\n * emoji is selected in it. For this purpose the corresponding elements get the class\n * 'prevent-lose-focus'.\n *\n * The class can also be set to any other elements that should also not cause the input field to\n * lose focus.\n */\n const handlePreventLoseFocus = useCallback((event: MouseEvent) => {\n const element = event.target as Element;\n\n if (\n element.classList.contains('prevent-lose-focus') ||\n element.parentElement?.classList.contains('prevent-lose-focus')\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n }, []);\n\n useEffect(() => {\n handleUpdateText(value);\n }, [handleUpdateText, value]);\n\n useEffect(() => {\n document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n return () => {\n document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n };\n }, [handlePreventLoseFocus]);\n\n return (\n <StyledEmojiInput isDisabled={isDisabled}>\n <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n <StyledEmojiInputEditor\n contentEditable={!isDisabled}\n onInput={handleInput}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={editorRef}\n />\n {!isMobile && (\n <EmojiPickerPopup\n accessToken={accessToken}\n alignment={popupAlignment}\n onSelect={handlePopupSelect}\n onPopupVisibilityChange={onPopupVisibilityChange}\n personId={personId}\n />\n )}\n </StyledEmojiInputContent>\n {rightElement && (\n <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n )}\n </StyledEmojiInput>\n );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_font","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","rootFontFamily","getRootFontFamily","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { getRootFontFamily } from '../../utils/font';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n StyledEmojiInput,\n StyledEmojiInputContent,\n StyledEmojiInputEditor,\n StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\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 * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the text of the input changes\n */\n onInput?: ChangeEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when a key is pressed down.\n */\n onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => 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 /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n popupAlignment?: PopupAlignment;\n /**\n * Element that is rendered inside the EmojiInput on the right side.\n */\n rightElement?: ReactNode;\n /**\n * Value of the input field\n */\n value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n accessToken,\n isDisabled,\n onInput,\n onKeyDown,\n onPopupVisibilityChange,\n personId,\n placeholder,\n popupAlignment,\n rightElement,\n value,\n}) => {\n const [isMobile] = useState(getIsMobile());\n const [rootFontFamily] = useState(getRootFontFamily());\n\n const editorRef = useRef<HTMLDivElement>(null);\n\n /**\n * This function updates the content of the 'contentEditable' element if the new text is\n * different from the previous content. So this is only true if, for example, a text like \":-)\"\n * has been replaced to the corresponding emoji.\n *\n * When updating the HTML, the current cursor position is saved before replacing the content, so\n * that it can be set again afterward.\n */\n const handleUpdateText = useCallback((text: string) => {\n if (!editorRef.current) {\n return;\n }\n\n const newInnerText = convertAsciiToUnicode(text);\n\n if (newInnerText !== editorRef.current.innerText) {\n saveSelection(editorRef.current);\n\n editorRef.current.innerText = newInnerText;\n\n restoreSelection(editorRef.current);\n }\n }, []);\n\n /**\n * This function handles the 'input' events of the 'contentEditable' element and also passes the\n * respective event up accordingly if the 'onInput' property is a function.\n */\n const handleInput = useCallback(\n (event: ChangeEvent<HTMLDivElement>) => {\n if (!editorRef.current) {\n return;\n }\n\n handleUpdateText(editorRef.current.innerText);\n\n if (typeof onInput === 'function') {\n onInput(event);\n }\n },\n [handleUpdateText, onInput]\n );\n\n /**\n * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n * will be appended to the back of the input field content.\n *\n * In addition, this function also sets the cursor to the correct position when the input field\n * has the focus. For this purpose, the current position of the cursor or a selection is read to\n * calculate the cursor position after inserting the emoji.\n *\n * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n * the event is also passed through to the top when inserting via the popup.\n */\n const handlePopupSelect = useCallback((emoji: string) => {\n if (!editorRef.current) {\n return;\n }\n\n const selection = window.getSelection();\n\n if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n const { endOffset, startOffset } = selection.getRangeAt(0);\n\n const rangeDistance = endOffset - startOffset;\n\n let offset = endOffset + emoji.length - rangeDistance;\n\n let { anchorNode } = selection;\n\n if (anchorNode.nodeValue) {\n anchorNode.nodeValue =\n anchorNode.nodeValue.substring(0, startOffset) +\n emoji +\n anchorNode.nodeValue.substring(endOffset);\n } else if (anchorNode === editorRef.current) {\n const newTextNode = document.createTextNode(emoji);\n\n editorRef.current.appendChild(newTextNode);\n\n anchorNode = newTextNode;\n }\n\n const newRange = document.createRange();\n\n if (anchorNode.nodeValue) {\n offset = Math.min(offset, anchorNode.nodeValue.length);\n }\n\n newRange.setStart(anchorNode, offset);\n newRange.setEnd(anchorNode, offset);\n\n selection.removeAllRanges();\n selection.addRange(newRange);\n } else {\n editorRef.current.innerText += emoji;\n }\n\n const event = new Event('input', { bubbles: true });\n\n editorRef.current.dispatchEvent(event);\n }, []);\n\n /**\n * This function ensures that the input field does not lose focus when the popup is opened or an\n * emoji is selected in it. For this purpose the corresponding elements get the class\n * 'prevent-lose-focus'.\n *\n * The class can also be set to any other elements that should also not cause the input field to\n * lose focus.\n */\n const handlePreventLoseFocus = useCallback((event: MouseEvent) => {\n const element = event.target as Element;\n\n if (\n element.classList.contains('prevent-lose-focus') ||\n element.parentElement?.classList.contains('prevent-lose-focus')\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n }, []);\n\n useEffect(() => {\n handleUpdateText(value);\n }, [handleUpdateText, value]);\n\n useEffect(() => {\n document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n return () => {\n document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n };\n }, [handlePreventLoseFocus]);\n\n return (\n <StyledEmojiInput isDisabled={isDisabled}>\n <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n <StyledEmojiInputEditor\n contentEditable={!isDisabled}\n isMobile={isMobile}\n onInput={handleInput}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={editorRef}\n rootFontFamily={rootFontFamily}\n />\n {!isMobile && (\n <EmojiPickerPopup\n accessToken={accessToken}\n alignment={popupAlignment}\n onSelect={handlePopupSelect}\n onPopupVisibilityChange={onPopupVisibilityChange}\n personId={personId}\n />\n )}\n </StyledEmojiInputContent>\n {rightElement && (\n <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n )}\n </StyledEmojiInput>\n );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
|
|
@@ -8,6 +8,9 @@ type StyledEmojiInputContentProps = {
|
|
|
8
8
|
export declare const StyledEmojiInputContent: import("styled-components").StyledComponent<"div", any, StyledEmojiInputContentProps, never>;
|
|
9
9
|
export declare const StyledEmojiInputEditor: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "placeholder"> & {
|
|
10
10
|
theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
|
|
11
|
+
} & {
|
|
12
|
+
isMobile: boolean;
|
|
13
|
+
rootFontFamily: string;
|
|
11
14
|
}, never>;
|
|
12
15
|
export declare const StyledEmojiInputRightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
13
16
|
export {};
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputEditor = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
|
-
var _environment = require("../../utils/environment");
|
|
9
8
|
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); }
|
|
10
9
|
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; }
|
|
11
10
|
const StyledEmojiInput = _styledComponents.default.div`
|
|
@@ -68,28 +67,32 @@ const StyledEmojiInputEditor = _styledComponents.default.div`
|
|
|
68
67
|
overflow-y: scroll;
|
|
69
68
|
word-break: break-word;
|
|
70
69
|
|
|
71
|
-
${
|
|
72
|
-
|
|
70
|
+
${_ref6 => {
|
|
71
|
+
let {
|
|
72
|
+
isMobile,
|
|
73
|
+
rootFontFamily
|
|
74
|
+
} = _ref6;
|
|
75
|
+
if (isMobile) {
|
|
73
76
|
return (0, _styledComponents.css)`
|
|
74
|
-
font-family:
|
|
77
|
+
font-family: ${rootFontFamily};
|
|
75
78
|
`;
|
|
76
79
|
}
|
|
77
80
|
return (0, _styledComponents.css)`
|
|
78
|
-
font-family: 'Noto Color Emoji'
|
|
81
|
+
font-family: ${rootFontFamily}, 'Noto Color Emoji';
|
|
79
82
|
`;
|
|
80
83
|
}}
|
|
81
84
|
|
|
82
85
|
&:empty:not(:focus):before {
|
|
83
|
-
content: '${
|
|
86
|
+
content: '${_ref7 => {
|
|
84
87
|
let {
|
|
85
88
|
placeholder
|
|
86
|
-
} =
|
|
89
|
+
} = _ref7;
|
|
87
90
|
return placeholder;
|
|
88
91
|
}}';
|
|
89
|
-
color: ${
|
|
92
|
+
color: ${_ref8 => {
|
|
90
93
|
let {
|
|
91
94
|
theme
|
|
92
|
-
} =
|
|
95
|
+
} = _ref8;
|
|
93
96
|
return theme['006'];
|
|
94
97
|
}};
|
|
95
98
|
}
|
|
@@ -110,10 +113,10 @@ const StyledEmojiInputEditor = _styledComponents.default.div`
|
|
|
110
113
|
|
|
111
114
|
::-webkit-scrollbar-thumb {
|
|
112
115
|
background-color: rgba(
|
|
113
|
-
${
|
|
116
|
+
${_ref9 => {
|
|
114
117
|
let {
|
|
115
118
|
theme
|
|
116
|
-
} =
|
|
119
|
+
} = _ref9;
|
|
117
120
|
return theme['text-rgb'];
|
|
118
121
|
}},
|
|
119
122
|
0.15
|
|
@@ -125,10 +128,10 @@ const StyledEmojiInputEditor = _styledComponents.default.div`
|
|
|
125
128
|
// only supported in Firefox:
|
|
126
129
|
* {
|
|
127
130
|
scrollbar-color: rgba(
|
|
128
|
-
${
|
|
131
|
+
${_ref10 => {
|
|
129
132
|
let {
|
|
130
133
|
theme
|
|
131
|
-
} =
|
|
134
|
+
} = _ref10;
|
|
132
135
|
return theme['text-rgb'];
|
|
133
136
|
}},
|
|
134
137
|
0.15
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","
|
|
1
|
+
{"version":3,"file":"EmojiInput.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","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","_ref3","exports","StyledEmojiInputContent","_ref4","isRightElementGiven","css","StyledEmojiInputEditor","_ref5","text","_ref6","isMobile","rootFontFamily","_ref7","placeholder","_ref8","_ref9","_ref10","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n align-items: center;\n background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n border-radius: 3px;\n display: flex;\n min-height: 42px;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'initial')};\n position: relative;\n transition: opacity 0.3s ease;\n`;\n\ntype StyledEmojiInputContentProps = {\n isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n align-items: end;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-radius: 3px;\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n padding: 8px 10px;\n\n ${({ isRightElementGiven }) =>\n isRightElementGiven &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right-width: 0;\n `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>> & {\n isMobile: boolean;\n rootFontFamily: string;\n};\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n flex: 1 1 auto;\n max-height: 210px;\n overflow-y: scroll;\n word-break: break-word;\n\n ${({ isMobile, rootFontFamily }) => {\n if (isMobile) {\n return css`\n font-family: ${rootFontFamily};\n `;\n }\n\n return css`\n font-family: ${rootFontFamily}, 'Noto Color Emoji';\n `;\n }}\n\n &:empty:not(:focus):before {\n content: '${({ placeholder }) => placeholder}';\n color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\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 }: StyledEmojiInputEditorProps) => 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 }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n align-self: stretch;\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n flex: 0 0 auto;\n overflow: hidden;\n`;\n"],"mappings":"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"}
|
|
@@ -29,7 +29,7 @@ const EmojiPicker = _ref => {
|
|
|
29
29
|
const handleSearchChange = (0, _react.useCallback)(event => {
|
|
30
30
|
setSearchString(event.target.value);
|
|
31
31
|
}, []);
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
|
|
32
|
+
return /*#__PURE__*/_react.default.createElement(_core.LazyMotionWrapper, null, /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
|
|
33
33
|
onChange: handleSearchChange,
|
|
34
34
|
placeholder: "Suchen",
|
|
35
35
|
value: searchString
|
|
@@ -43,7 +43,7 @@ const EmojiPicker = _ref => {
|
|
|
43
43
|
onSelect: handleCategorySelect,
|
|
44
44
|
searchString: searchString,
|
|
45
45
|
selectedCategory: selectedCategory
|
|
46
|
-
}));
|
|
46
|
+
})));
|
|
47
47
|
};
|
|
48
48
|
EmojiPicker.displayName = 'EmojiPicker';
|
|
49
49
|
var _default = EmojiPicker;
|
|
@@ -1 +1 @@
|
|
|
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 <
|
|
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","LazyMotionWrapper","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input, LazyMotionWrapper } 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 <LazyMotionWrapper>\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 </LazyMotionWrapper>\n );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
|
|
@@ -12,9 +12,11 @@ const emojiPickerSize = {
|
|
|
12
12
|
};
|
|
13
13
|
exports.emojiPickerSize = emojiPickerSize;
|
|
14
14
|
const StyledEmojiPicker = _styledComponents.default.div`
|
|
15
|
+
align-items: center;
|
|
15
16
|
display: flex;
|
|
16
17
|
flex-direction: column;
|
|
17
18
|
height: ${emojiPickerSize.height}px;
|
|
19
|
+
justify-content: center;
|
|
18
20
|
padding: 10px 22px;
|
|
19
21
|
width: ${emojiPickerSize.width}px;
|
|
20
22
|
user-select: none;
|
|
@@ -1 +1 @@
|
|
|
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 display: flex;\n flex-direction: column;\n height: ${emojiPickerSize.height}px;\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,cAAcN,eAAe,CAACC,MAAO;AACrC;AACA,aAAaD,eAAe,CAACE,KAAM;AACnC;AACA,CAAC;AAACC,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}
|
|
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"}
|
|
@@ -14,9 +14,10 @@ const StyledEmojiPickerCategories = _styledComponents.default.div`
|
|
|
14
14
|
flex: 0 0 auto;
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
padding-top: 10px;
|
|
17
|
+
width: 100%;
|
|
17
18
|
`;
|
|
18
19
|
exports.StyledEmojiPickerCategories = StyledEmojiPickerCategories;
|
|
19
|
-
const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.
|
|
20
|
+
const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.m.div)`
|
|
20
21
|
cursor: pointer;
|
|
21
22
|
font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
|
|
22
23
|
font-size: 20px;
|
package/lib/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","
|
|
1
|
+
{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","m"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import { m } from 'framer-motion';\nimport styled from 'styled-components';\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(m.div)`\n cursor: pointer;\n font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n font-size: 20px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,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,eAAC,CAACH,GAAG,CAAE;AAC7D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,+BAAA,GAAAA,+BAAA"}
|
|
@@ -1 +1 @@
|
|
|
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\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,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"}
|
|
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"}
|
|
@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
9
9
|
var _alignment = require("../../../../../constants/alignment");
|
|
10
10
|
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); }
|
|
11
11
|
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; }
|
|
12
|
-
const StyledMotionSkinTonePopup = (0, _styledComponents.default)(_framerMotion.
|
|
12
|
+
const StyledMotionSkinTonePopup = (0, _styledComponents.default)(_framerMotion.m.div)`
|
|
13
13
|
z-index: 1;
|
|
14
14
|
`;
|
|
15
15
|
exports.StyledMotionSkinTonePopup = StyledMotionSkinTonePopup;
|
|
@@ -1 +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","
|
|
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","m","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 { m } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\nimport type { SkinTonePopupProps } from './SkinTonePopup';\n\nexport const StyledMotionSkinTonePopup = styled(m.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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"}
|
|
@@ -4,16 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
var _core = require("@chayns-components/core");
|
|
7
8
|
var _Icon = _interopRequireDefault(require("@chayns-components/core/lib/components/icon/Icon"));
|
|
8
9
|
var _framerMotion = require("framer-motion");
|
|
9
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
11
|
var _alignment = require("../../constants/alignment");
|
|
11
|
-
var _EmojiPicker =
|
|
12
|
-
var _EmojiPicker2 = require("../emoji-picker/EmojiPicker.styles");
|
|
12
|
+
var _EmojiPicker = require("../emoji-picker/EmojiPicker.styles");
|
|
13
13
|
var _EmojiPickerPopup = require("./EmojiPickerPopup.styles");
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
15
|
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); }
|
|
15
16
|
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; }
|
|
16
|
-
|
|
17
|
+
const EmojiPicker = /*#__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require('../emoji-picker/EmojiPicker'))));
|
|
17
18
|
const EmojiPickerPopup = _ref => {
|
|
18
19
|
let {
|
|
19
20
|
accessToken,
|
|
@@ -50,13 +51,13 @@ const EmojiPickerPopup = _ref => {
|
|
|
50
51
|
} = event.currentTarget.getBoundingClientRect();
|
|
51
52
|
let newInternalAlignment = alignment;
|
|
52
53
|
if (typeof newInternalAlignment !== 'number') {
|
|
53
|
-
if (top <
|
|
54
|
-
if (left <
|
|
54
|
+
if (top < _EmojiPicker.emojiPickerSize.height + 16) {
|
|
55
|
+
if (left < _EmojiPicker.emojiPickerSize.width + 16) {
|
|
55
56
|
newInternalAlignment = _alignment.PopupAlignment.BottomRight;
|
|
56
57
|
} else {
|
|
57
58
|
newInternalAlignment = _alignment.PopupAlignment.BottomLeft;
|
|
58
59
|
}
|
|
59
|
-
} else if (left <
|
|
60
|
+
} else if (left < _EmojiPicker.emojiPickerSize.width + 16) {
|
|
60
61
|
newInternalAlignment = _alignment.PopupAlignment.TopRight;
|
|
61
62
|
} else {
|
|
62
63
|
newInternalAlignment = _alignment.PopupAlignment.TopLeft;
|
|
@@ -66,7 +67,7 @@ const EmojiPickerPopup = _ref => {
|
|
|
66
67
|
switch (newInternalAlignment) {
|
|
67
68
|
case _alignment.PopupAlignment.BottomLeft:
|
|
68
69
|
newPosition = {
|
|
69
|
-
left: 8 + width -
|
|
70
|
+
left: 8 + width - _EmojiPicker.emojiPickerSize.width,
|
|
70
71
|
top: 12 + height
|
|
71
72
|
};
|
|
72
73
|
break;
|
|
@@ -78,14 +79,14 @@ const EmojiPickerPopup = _ref => {
|
|
|
78
79
|
break;
|
|
79
80
|
case _alignment.PopupAlignment.TopLeft:
|
|
80
81
|
newPosition = {
|
|
81
|
-
left: 8 + width -
|
|
82
|
-
top: -12 -
|
|
82
|
+
left: 8 + width - _EmojiPicker.emojiPickerSize.width,
|
|
83
|
+
top: -12 - _EmojiPicker.emojiPickerSize.height
|
|
83
84
|
};
|
|
84
85
|
break;
|
|
85
86
|
case _alignment.PopupAlignment.TopRight:
|
|
86
87
|
newPosition = {
|
|
87
88
|
left: -10,
|
|
88
|
-
top: -12 -
|
|
89
|
+
top: -12 - _EmojiPicker.emojiPickerSize.height
|
|
89
90
|
};
|
|
90
91
|
break;
|
|
91
92
|
default:
|
|
@@ -111,7 +112,7 @@ const EmojiPickerPopup = _ref => {
|
|
|
111
112
|
}
|
|
112
113
|
}, [onPopupVisibilityChange, shouldShowPopup]);
|
|
113
114
|
const exitAndInitialY = internalAlignment === _alignment.PopupAlignment.TopLeft || internalAlignment === _alignment.PopupAlignment.TopRight ? -16 : 16;
|
|
114
|
-
return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement(_core.LazyMotionWrapper, null, /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
|
|
115
116
|
initial: false
|
|
116
117
|
}, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledMotionEmojiPickerPopupContent, {
|
|
117
118
|
alignment: internalAlignment,
|
|
@@ -133,16 +134,18 @@ const EmojiPickerPopup = _ref => {
|
|
|
133
134
|
transition: {
|
|
134
135
|
type: 'tween'
|
|
135
136
|
}
|
|
136
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
138
|
+
fallback: /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, "Emojis werden geladen...")
|
|
139
|
+
}, /*#__PURE__*/_react.default.createElement(EmojiPicker, {
|
|
137
140
|
accessToken: accessToken,
|
|
138
141
|
onSelect: onSelect,
|
|
139
142
|
personId: personId
|
|
140
|
-
}))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
143
|
+
})))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
141
144
|
className: "prevent-lose-focus",
|
|
142
145
|
icons: ['far fa-smile'],
|
|
143
146
|
onClick: handlePopupIconClick,
|
|
144
147
|
size: 18
|
|
145
|
-
}));
|
|
148
|
+
})));
|
|
146
149
|
};
|
|
147
150
|
EmojiPickerPopup.displayName = 'EmojiPickerPopup';
|
|
148
151
|
var _default = EmojiPickerPopup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerPopup.js","names":["_Icon","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPicker2","_EmojiPickerPopup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';\nimport {\n StyledEmojiPickerPopup,\n StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\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 * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n alignment?: PopupAlignment;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => 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 /**\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\nexport type PopupPosition = {\n bottom?: number;\n left?: number;\n right?: number;\n top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n alignment,\n onPopupVisibilityChange,\n onSelect,\n personId,\n}) => {\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft\n );\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [position, setPosition] = useState({} as PopupPosition);\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const handleHide = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide]\n );\n\n const handlePopupIconClick = useCallback(\n (event: MouseEvent<HTMLSpanElement>) => {\n if (shouldShowPopup) {\n setShouldShowPopup(false);\n\n return;\n }\n\n const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n if (typeof newInternalAlignment !== 'number') {\n if (top < emojiPickerSize.height + 16) {\n if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.BottomRight;\n } else {\n newInternalAlignment = PopupAlignment.BottomLeft;\n }\n } else if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.TopRight;\n } else {\n newInternalAlignment = PopupAlignment.TopLeft;\n }\n }\n\n let newPosition: PopupPosition = {};\n\n switch (newInternalAlignment) {\n case PopupAlignment.BottomLeft:\n newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n break;\n case PopupAlignment.BottomRight:\n newPosition = { left: -10, top: 12 + height };\n break;\n case PopupAlignment.TopLeft:\n newPosition = {\n left: 8 + width - emojiPickerSize.width,\n top: -12 - emojiPickerSize.height,\n };\n break;\n case PopupAlignment.TopRight:\n newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n break;\n default:\n break;\n }\n\n setInternalAlignment(newInternalAlignment);\n setPosition(newPosition);\n setShouldShowPopup(true);\n },\n [alignment, shouldShowPopup]\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n useEffect(() => {\n if (typeof onPopupVisibilityChange === 'function') {\n onPopupVisibilityChange(shouldShowPopup);\n }\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n const exitAndInitialY =\n internalAlignment === PopupAlignment.TopLeft ||\n internalAlignment === PopupAlignment.TopRight\n ? -16\n : 16;\n\n return (\n <StyledEmojiPickerPopup>\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionEmojiPickerPopupContent\n alignment={internalAlignment}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n key=\"emojiPickerPopupContent\"\n ref={contentRef}\n style={position}\n transition={{ type: 'tween' }}\n >\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopup>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_Icon","_interopRequireDefault","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPickerPopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPicker","React","lazy","Promise","resolve","then","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","LazyMotionWrapper","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","Suspense","fallback","StyledEmojiPicker","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { LazyMotionWrapper } from '@chayns-components/core';\nimport Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, Suspense, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport { emojiPickerSize, StyledEmojiPicker } from '../emoji-picker/EmojiPicker.styles';\nimport {\n StyledEmojiPickerPopup,\n StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nconst EmojiPicker = React.lazy(() => import('../emoji-picker/EmojiPicker'));\n\nexport type EmojiPickerPopupProps = {\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 * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n * value.\n */\n alignment?: PopupAlignment;\n /**\n * Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n */\n onPopupVisibilityChange?: (isVisible: boolean) => 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 /**\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\nexport type PopupPosition = {\n bottom?: number;\n left?: number;\n right?: number;\n top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n alignment,\n onPopupVisibilityChange,\n onSelect,\n personId,\n}) => {\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft\n );\n const [shouldShowPopup, setShouldShowPopup] = useState(false);\n const [position, setPosition] = useState({} as PopupPosition);\n\n const contentRef = useRef<HTMLDivElement>(null);\n\n const handleHide = useCallback(() => {\n setShouldShowPopup(false);\n }, []);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide]\n );\n\n const handlePopupIconClick = useCallback(\n (event: MouseEvent<HTMLSpanElement>) => {\n if (shouldShowPopup) {\n setShouldShowPopup(false);\n\n return;\n }\n\n const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n if (typeof newInternalAlignment !== 'number') {\n if (top < emojiPickerSize.height + 16) {\n if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.BottomRight;\n } else {\n newInternalAlignment = PopupAlignment.BottomLeft;\n }\n } else if (left < emojiPickerSize.width + 16) {\n newInternalAlignment = PopupAlignment.TopRight;\n } else {\n newInternalAlignment = PopupAlignment.TopLeft;\n }\n }\n\n let newPosition: PopupPosition = {};\n\n switch (newInternalAlignment) {\n case PopupAlignment.BottomLeft:\n newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n break;\n case PopupAlignment.BottomRight:\n newPosition = { left: -10, top: 12 + height };\n break;\n case PopupAlignment.TopLeft:\n newPosition = {\n left: 8 + width - emojiPickerSize.width,\n top: -12 - emojiPickerSize.height,\n };\n break;\n case PopupAlignment.TopRight:\n newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n break;\n default:\n break;\n }\n\n setInternalAlignment(newInternalAlignment);\n setPosition(newPosition);\n setShouldShowPopup(true);\n },\n [alignment, shouldShowPopup]\n );\n\n useEffect(() => {\n if (shouldShowPopup) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n useEffect(() => {\n if (typeof onPopupVisibilityChange === 'function') {\n onPopupVisibilityChange(shouldShowPopup);\n }\n }, [onPopupVisibilityChange, shouldShowPopup]);\n\n const exitAndInitialY =\n internalAlignment === PopupAlignment.TopLeft ||\n internalAlignment === PopupAlignment.TopRight\n ? -16\n : 16;\n\n return (\n <LazyMotionWrapper>\n <StyledEmojiPickerPopup>\n <AnimatePresence initial={false}>\n {shouldShowPopup && (\n <StyledMotionEmojiPickerPopupContent\n alignment={internalAlignment}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n key=\"emojiPickerPopupContent\"\n ref={contentRef}\n style={position}\n transition={{ type: 'tween' }}\n >\n <Suspense\n fallback={\n <StyledEmojiPicker>Emojis werden geladen...</StyledEmojiPicker>\n }\n >\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </Suspense>\n </StyledMotionEmojiPickerPopupContent>\n )}\n </AnimatePresence>\n <Icon\n className=\"prevent-lose-focus\"\n icons={['far fa-smile']}\n onClick={handlePopupIconClick}\n size={18}\n />\n </StyledEmojiPickerPopup>\n </LazyMotionWrapper>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const StyledEmojiPickerPopup = _styledComponents.default.div`
|
|
|
16
16
|
position: relative;
|
|
17
17
|
`;
|
|
18
18
|
exports.StyledEmojiPickerPopup = StyledEmojiPickerPopup;
|
|
19
|
-
const StyledMotionEmojiPickerPopupContent = (0, _styledComponents.default)(_framerMotion.
|
|
19
|
+
const StyledMotionEmojiPickerPopupContent = (0, _styledComponents.default)(_framerMotion.m.div)`
|
|
20
20
|
background-color: ${_ref => {
|
|
21
21
|
let {
|
|
22
22
|
theme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmojiPickerPopup.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","StyledEmojiPickerPopup","styled","div","getComputedStyle","document","body","getPropertyValue","exports","StyledMotionEmojiPickerPopupContent","
|
|
1
|
+
{"version":3,"file":"EmojiPickerPopup.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","StyledEmojiPickerPopup","styled","div","getComputedStyle","document","body","getPropertyValue","exports","StyledMotionEmojiPickerPopupContent","m","_ref","theme","_ref2","text","_ref3","alignment","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { m } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\n\nexport const StyledEmojiPickerPopup = styled.div`\n align-items: center;\n display: flex;\n height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n position: relative;\n`;\n\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n m.div\n)<StyledMotionEmojiPickerPopupContentProps>`\n background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => 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 color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n position: absolute;\n z-index: 0;\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 ${({ alignment }) => {\n switch (alignment) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 12px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 12px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 12px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 12px;\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"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getRootFontFamily: () => string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getRootFontFamily = void 0;
|
|
7
|
+
const getRootFontFamily = () => {
|
|
8
|
+
const rootElement = document.querySelector(':root');
|
|
9
|
+
if (!rootElement) {
|
|
10
|
+
return '';
|
|
11
|
+
}
|
|
12
|
+
return window.getComputedStyle(rootElement).getPropertyValue('font-family');
|
|
13
|
+
};
|
|
14
|
+
exports.getRootFontFamily = getRootFontFamily;
|
|
15
|
+
//# sourceMappingURL=font.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"font.js","names":["getRootFontFamily","rootElement","document","querySelector","window","getComputedStyle","getPropertyValue","exports"],"sources":["../../src/utils/font.ts"],"sourcesContent":["export const getRootFontFamily = () => {\n const rootElement = document.querySelector(':root');\n\n if (!rootElement) {\n return '';\n }\n\n return window.getComputedStyle(rootElement).getPropertyValue('font-family');\n};\n"],"mappings":";;;;;;AAAO,MAAMA,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,WAAW,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAEnD,IAAI,CAACF,WAAW,EAAE;IACd,OAAO,EAAE;EACb;EAEA,OAAOG,MAAM,CAACC,gBAAgB,CAACJ,WAAW,CAAC,CAACK,gBAAgB,CAAC,aAAa,CAAC;AAC/E,CAAC;AAACC,OAAA,CAAAP,iBAAA,GAAAA,iBAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/emoji-input",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.87",
|
|
4
4
|
"description": "Input field that supports HTML elements and emojis",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"typescript": "^4.9.5"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
55
|
+
"@chayns-components/core": "^5.0.0-beta.86",
|
|
56
56
|
"@chayns/colors": "^2.0.0",
|
|
57
57
|
"clsx": "^1.2.1",
|
|
58
58
|
"emojilib": "^3.0.8",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"publishConfig": {
|
|
69
69
|
"access": "public"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "4a8c401cc875dc518dc990e2e5ac87fdf8008cda"
|
|
72
72
|
}
|