@chayns-components/emoji-input 5.5.36 → 5.5.39

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

@@ -4,7 +4,7 @@ import EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategori
 import EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';
 import { StyledEmojiPicker } from './EmojiPicker.styles';
 import textStrings from '../../constants/textStrings';
-import { Translation, TextStringProvider } from '@chayns/textstrings';
+import { Translation, TextStringProviderSSR } from '@chayns/textstrings';
 const FirstEmojiSlug = 'smileys_emotion';
 const EmojiPicker = ({
   accessToken,
@@ -20,8 +20,9 @@ const EmojiPicker = ({
   const handleSearchChange = useCallback(event => {
     setSearchString(event.target.value);
   }, []);
-  return /*#__PURE__*/React.createElement(StyledEmojiPicker, null, /*#__PURE__*/React.createElement(TextStringProvider, {
-    libraries: "@chayns-component-emoji-input"
+  return /*#__PURE__*/React.createElement(StyledEmojiPicker, null, /*#__PURE__*/React.createElement(TextStringProviderSSR, {
+    libraries: "@chayns-component-emoji-input",
+    id: "emoji-picker"
   }, /*#__PURE__*/React.createElement(Input, {
     onChange: handleSearchChange,
     placeholder: /*#__PURE__*/React.createElement(Translation, {

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","names":["Input","React","useCallback","useState","EmojiPickerCategories","EmojiPickerEmojis","StyledEmojiPicker","textStrings","Translation","TextStringProvider","FirstEmojiSlug","EmojiPicker","accessToken","onSelect","personId","searchString","setSearchString","selectedCategory","setSelectedCategory","handleCategorySelect","category","handleSearchChange","event","target","value","createElement","libraries","onChange","placeholder","textString","components","emojiPicker","input","displayName"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\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';\nimport textStrings from '../../constants/textStrings';\nimport { Translation, TextStringProvider } from '@chayns/textstrings';\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, shouldRestoreInputFocus?: 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\nconst FirstEmojiSlug = 'smileys_emotion';\n\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(FirstEmojiSlug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <TextStringProvider libraries=\"@chayns-component-emoji-input\">\n                <Input\n                    onChange={handleSearchChange}\n                    placeholder={\n                        <Translation\n                            textString={textStrings.components.emojiPicker.input.placeholder}\n                        />\n                    }\n                    value={searchString}\n                />\n            </TextStringProvider>\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAErE,OAAOC,qBAAqB,MAAM,iDAAiD;AACnF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,qBAAqB;AAkBrE,MAAMC,cAAc,GAAG,iBAAiB;AAExC,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAK;EAC/E,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGb,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACc,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGf,QAAQ,CAACO,cAA0B,CAAC;EAEpF,MAAMS,oBAAoB,GAAGjB,WAAW,CAAEkB,QAAkB,IAAK;IAC7DJ,eAAe,CAAC,EAAE,CAAC;IACnBE,mBAAmB,CAACE,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGnB,WAAW,CAAEoB,KAAoC,IAAK;IAC7EN,eAAe,CAACM,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIvB,KAAA,CAAAwB,aAAA,CAACnB,iBAAiB,qBACdL,KAAA,CAAAwB,aAAA,CAAChB,kBAAkB;IAACiB,SAAS,EAAC;EAA+B,gBACzDzB,KAAA,CAAAwB,aAAA,CAACzB,KAAK;IACF2B,QAAQ,EAAEN,kBAAmB;IAC7BO,WAAW,eACP3B,KAAA,CAAAwB,aAAA,CAACjB,WAAW;MACRqB,UAAU,EAAEtB,WAAW,CAACuB,UAAU,CAACC,WAAW,CAACC,KAAK,CAACJ;IAAY,CACpE,CACJ;IACDJ,KAAK,EAAET;EAAa,CACvB,CACe,CAAC,eACrBd,KAAA,CAAAwB,aAAA,CAACpB,iBAAiB;IACdO,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,eACFhB,KAAA,CAAAwB,aAAA,CAACrB,qBAAqB;IAClBS,QAAQ,EAAEM,oBAAqB;IAC/BJ,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CACc,CAAC;AAE5B,CAAC;AAEDN,WAAW,CAACsB,WAAW,GAAG,aAAa;AAEvC,eAAetB,WAAW","ignoreList":[]}
+{"version":3,"file":"EmojiPicker.js","names":["Input","React","useCallback","useState","EmojiPickerCategories","EmojiPickerEmojis","StyledEmojiPicker","textStrings","Translation","TextStringProviderSSR","FirstEmojiSlug","EmojiPicker","accessToken","onSelect","personId","searchString","setSearchString","selectedCategory","setSelectedCategory","handleCategorySelect","category","handleSearchChange","event","target","value","createElement","libraries","id","onChange","placeholder","textString","components","emojiPicker","input","displayName"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\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';\nimport textStrings from '../../constants/textStrings';\nimport { Translation, TextStringProviderSSR } from '@chayns/textstrings';\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, shouldRestoreInputFocus?: 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\nconst FirstEmojiSlug = 'smileys_emotion';\n\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(FirstEmojiSlug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <TextStringProviderSSR libraries=\"@chayns-component-emoji-input\" id=\"emoji-picker\">\n                <Input\n                    onChange={handleSearchChange}\n                    placeholder={\n                        <Translation\n                            textString={textStrings.components.emojiPicker.input.placeholder}\n                        />\n                    }\n                    value={searchString}\n                />\n            </TextStringProviderSSR>\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAErE,OAAOC,qBAAqB,MAAM,iDAAiD;AACnF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,qBAAqB;AAkBxE,MAAMC,cAAc,GAAG,iBAAiB;AAExC,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAK;EAC/E,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGb,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACc,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGf,QAAQ,CAACO,cAA0B,CAAC;EAEpF,MAAMS,oBAAoB,GAAGjB,WAAW,CAAEkB,QAAkB,IAAK;IAC7DJ,eAAe,CAAC,EAAE,CAAC;IACnBE,mBAAmB,CAACE,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGnB,WAAW,CAAEoB,KAAoC,IAAK;IAC7EN,eAAe,CAACM,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIvB,KAAA,CAAAwB,aAAA,CAACnB,iBAAiB,qBACdL,KAAA,CAAAwB,aAAA,CAAChB,qBAAqB;IAACiB,SAAS,EAAC,+BAA+B;IAACC,EAAE,EAAC;EAAc,gBAC9E1B,KAAA,CAAAwB,aAAA,CAACzB,KAAK;IACF4B,QAAQ,EAAEP,kBAAmB;IAC7BQ,WAAW,eACP5B,KAAA,CAAAwB,aAAA,CAACjB,WAAW;MACRsB,UAAU,EAAEvB,WAAW,CAACwB,UAAU,CAACC,WAAW,CAACC,KAAK,CAACJ;IAAY,CACpE,CACJ;IACDL,KAAK,EAAET;EAAa,CACvB,CACkB,CAAC,eACxBd,KAAA,CAAAwB,aAAA,CAACpB,iBAAiB;IACdO,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,eACFhB,KAAA,CAAAwB,aAAA,CAACrB,qBAAqB;IAClBS,QAAQ,EAAEM,oBAAqB;IAC/BJ,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CACc,CAAC;AAE5B,CAAC;AAEDN,WAAW,CAACuB,WAAW,GAAG,aAAa;AAEvC,eAAevB,WAAW","ignoreList":[]}

package/lib/esm/components/emoji-picker-popup/EmojiPickerPopup.js

@@ -2,9 +2,9 @@ import { AreaProvider, Icon, Popup, useFocusRingPortal, useKeyboardFocusHighligh
 import React, { useCallback, useEffect, useRef } from 'react';
 import EmojiPicker from '../emoji-picker/EmojiPicker';
 import { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';
-import { useTranslation } from '@chayns/textstrings';
+import { TextStringProviderSSR, useTranslation } from '@chayns/textstrings';
 import textStrings from '../../constants/textStrings';
-const EmojiPickerPopup = ({
+const EmojiPickerPopupContent = ({
   accessToken,
   container,
   isDisabled,
@@ -77,12 +77,19 @@ const EmojiPickerPopup = ({
     onKeyDown: handleTriggerKeyDown,
     ref: triggerRef,
     tabIndex: isDisabled ? -1 : 0,
-    type: "button"
+    type: "button",
+    style: {
+      display: 'flex'
+    }
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['far fa-smile'],
     size: 18
   }))));
 };
+const EmojiPickerPopup = props => /*#__PURE__*/React.createElement(TextStringProviderSSR, {
+  libraries: "@chayns-component-emoji-input",
+  id: "emoji-picker-popup"
+}, /*#__PURE__*/React.createElement(EmojiPickerPopupContent, props));
 EmojiPickerPopup.displayName = 'EmojiPickerPopup';
 export default EmojiPickerPopup;
 //# sourceMappingURL=EmojiPickerPopup.js.map

package/lib/esm/components/emoji-picker-popup/EmojiPickerPopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["AreaProvider","Icon","Popup","useFocusRingPortal","useKeyboardFocusHighlighting","React","useCallback","useEffect","useRef","EmojiPicker","StyledEmojiPickerPopup","useTranslation","textStrings","EmojiPickerPopup","accessToken","container","isDisabled","onPopupVisibilityChange","onSelect","onSelectWithKeyboard","personId","shouldEnableKeyboardHighlighting","t","popupRef","triggerRef","shouldShowKeyboardHighlighting","isEnabled","shape","padding","handleKeyPress","event","key","shiftKey","current","hide","handleTriggerKeyDown","preventDefault","show","handleSelect","emoji","shouldRestoreInputFocus","document","addEventListener","removeEventListener","createElement","ref","onHide","undefined","onShow","content","shouldChangeColor","emojiPickerPopup","accessibility","open","className","disabled","onClick","stopPropagation","onKeyDown","tabIndex","type","icons","size","displayName"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import {\n    AreaProvider,\n    Icon,\n    Popup,\n    PopupAlignment,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n    type PopupRef,\n} from '@chayns-components/core';\nimport React, { FC, KeyboardEventHandler, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../constants/textStrings';\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     * The DOM element that should receive the popup portal.\n     */\n    container?: Element;\n    /**\n     * Whether the picker trigger is disabled.\n     */\n    isDisabled?: boolean;\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     * Enables keyboard-only focus highlighting for the picker trigger.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Receives focus after an emoji is selected with the keyboard.\n     */\n    onSelectWithKeyboard?: (emoji: string) => void;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n    accessToken,\n    container,\n    isDisabled,\n    onPopupVisibilityChange,\n    onSelect,\n    onSelectWithKeyboard,\n    personId,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { t } = useTranslation();\n    const popupRef = useRef<PopupRef>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        isDisabled ? false : shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(triggerRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 4,\n    });\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.key === 'Escape' && !event.shiftKey) {\n            popupRef.current?.hide();\n        }\n    }, []);\n\n    const handleTriggerKeyDown = useCallback<KeyboardEventHandler<HTMLButtonElement>>(\n        (event) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                popupRef.current?.show();\n            }\n        },\n        [isDisabled],\n    );\n\n    const handleSelect = useCallback(\n        (emoji: string, shouldRestoreInputFocus?: boolean) => {\n            onSelect(emoji);\n\n            if (shouldRestoreInputFocus) {\n                onSelectWithKeyboard?.(emoji);\n            }\n        },\n        [onSelect, onSelectWithKeyboard],\n    );\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return (\n        <StyledEmojiPickerPopup aria-hidden={isDisabled}>\n            <Popup\n                container={container}\n                ref={popupRef}\n                onHide={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(false)\n                        : undefined\n                }\n                onShow={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(true)\n                        : undefined\n                }\n                content={\n                    <AreaProvider shouldChangeColor={false}>\n                        <EmojiPicker\n                            accessToken={accessToken}\n                            onSelect={handleSelect}\n                            personId={personId}\n                        />\n                    </AreaProvider>\n                }\n            >\n                <button\n                    aria-label={t(textStrings.emojiPickerPopup.accessibility.open)}\n                    className=\"prevent-lose-focus\"\n                    disabled={isDisabled}\n                    onClick={(event) => {\n                        if (isDisabled) {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onKeyDown={handleTriggerKeyDown}\n                    ref={triggerRef}\n                    tabIndex={isDisabled ? -1 : 0}\n                    type=\"button\"\n                >\n                    <Icon icons={['far fa-smile']} size={18} />\n                </button>\n            </Popup>\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"EmojiPickerPopup.js","names":["AreaProvider","Icon","Popup","useFocusRingPortal","useKeyboardFocusHighlighting","React","useCallback","useEffect","useRef","EmojiPicker","StyledEmojiPickerPopup","TextStringProviderSSR","useTranslation","textStrings","EmojiPickerPopupContent","accessToken","container","isDisabled","onPopupVisibilityChange","onSelect","onSelectWithKeyboard","personId","shouldEnableKeyboardHighlighting","t","popupRef","triggerRef","shouldShowKeyboardHighlighting","isEnabled","shape","padding","handleKeyPress","event","key","shiftKey","current","hide","handleTriggerKeyDown","preventDefault","show","handleSelect","emoji","shouldRestoreInputFocus","document","addEventListener","removeEventListener","createElement","ref","onHide","undefined","onShow","content","shouldChangeColor","emojiPickerPopup","accessibility","open","className","disabled","onClick","stopPropagation","onKeyDown","tabIndex","type","style","display","icons","size","EmojiPickerPopup","props","libraries","id","displayName"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import {\n    AreaProvider,\n    Icon,\n    Popup,\n    PopupAlignment,\n    useFocusRingPortal,\n    useKeyboardFocusHighlighting,\n    type PopupRef,\n} from '@chayns-components/core';\nimport React, { FC, KeyboardEventHandler, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';\nimport { TextStringProviderSSR, useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../constants/textStrings';\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     * The DOM element that should receive the popup portal.\n     */\n    container?: Element;\n    /**\n     * Whether the picker trigger is disabled.\n     */\n    isDisabled?: boolean;\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     * Enables keyboard-only focus highlighting for the picker trigger.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Receives focus after an emoji is selected with the keyboard.\n     */\n    onSelectWithKeyboard?: (emoji: string) => void;\n};\n\nconst EmojiPickerPopupContent: FC<EmojiPickerPopupProps> = ({\n    accessToken,\n    container,\n    isDisabled,\n    onPopupVisibilityChange,\n    onSelect,\n    onSelectWithKeyboard,\n    personId,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const { t } = useTranslation();\n    const popupRef = useRef<PopupRef>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        isDisabled ? false : shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(triggerRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 4,\n    });\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.key === 'Escape' && !event.shiftKey) {\n            popupRef.current?.hide();\n        }\n    }, []);\n\n    const handleTriggerKeyDown = useCallback<KeyboardEventHandler<HTMLButtonElement>>(\n        (event) => {\n            if (isDisabled) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                popupRef.current?.show();\n            }\n        },\n        [isDisabled],\n    );\n\n    const handleSelect = useCallback(\n        (emoji: string, shouldRestoreInputFocus?: boolean) => {\n            onSelect(emoji);\n\n            if (shouldRestoreInputFocus) {\n                onSelectWithKeyboard?.(emoji);\n            }\n        },\n        [onSelect, onSelectWithKeyboard],\n    );\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return (\n        <StyledEmojiPickerPopup aria-hidden={isDisabled}>\n            <Popup\n                container={container}\n                ref={popupRef}\n                onHide={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(false)\n                        : undefined\n                }\n                onShow={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(true)\n                        : undefined\n                }\n                content={\n                    <AreaProvider shouldChangeColor={false}>\n                        <EmojiPicker\n                            accessToken={accessToken}\n                            onSelect={handleSelect}\n                            personId={personId}\n                        />\n                    </AreaProvider>\n                }\n            >\n                <button\n                    aria-label={t(textStrings.emojiPickerPopup.accessibility.open)}\n                    className=\"prevent-lose-focus\"\n                    disabled={isDisabled}\n                    onClick={(event) => {\n                        if (isDisabled) {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onKeyDown={handleTriggerKeyDown}\n                    ref={triggerRef}\n                    tabIndex={isDisabled ? -1 : 0}\n                    type=\"button\"\n                    style={{\n                        display: 'flex',\n                    }}\n                >\n                    <Icon icons={['far fa-smile']} size={18} />\n                </button>\n            </Popup>\n        </StyledEmojiPickerPopup>\n    );\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = (props) => (\n    <TextStringProviderSSR libraries=\"@chayns-component-emoji-input\" id=\"emoji-picker-popup\">\n        <EmojiPickerPopupContent {...props} />\n    </TextStringProviderSSR>\n);\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/emoji.test.js

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { convertEmojisToUnicode } from './emoji';
+import { regShortnames, shortNameList } from './emojiShortList';
+describe('convertEmojisToUnicode', () => {
+  it('does not replace shortnames adjacent to letters or numbers', () => {
+    expect(convertEmojisToUnicode('x:smile:', regShortnames, shortNameList)).toBe('x:smile:');
+    expect(convertEmojisToUnicode(':smile:x', regShortnames, shortNameList)).toBe(':smile:x');
+    expect(convertEmojisToUnicode('x:smile:1', regShortnames, shortNameList)).toBe('x:smile:1');
+  });
+  it('replaces shortnames next to spaces or punctuation', () => {
+    const emoji = convertEmojisToUnicode(':smile:', regShortnames, shortNameList);
+    expect(convertEmojisToUnicode(' :smile: ', regShortnames, shortNameList)).toBe(` ${emoji} `);
+    expect(convertEmojisToUnicode('(:smile:),', regShortnames, shortNameList)).toBe(`(${emoji}),`);
+  });
+});
+//# sourceMappingURL=emoji.test.js.map

package/lib/esm/utils/emoji.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji.test.js","names":["describe","expect","it","convertEmojisToUnicode","regShortnames","shortNameList","toBe","emoji"],"sources":["../../../src/utils/emoji.test.ts"],"sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { convertEmojisToUnicode } from './emoji';\nimport { regAscii } from '../constants/emoji';\nimport { regShortnames, shortNameList } from './emojiShortList';\n\ndescribe('convertEmojisToUnicode', () => {\n    it('does not replace shortnames adjacent to letters or numbers', () => {\n        expect(convertEmojisToUnicode('x:smile:', regShortnames, shortNameList)).toBe('x:smile:');\n        expect(convertEmojisToUnicode(':smile:x', regShortnames, shortNameList)).toBe(':smile:x');\n        expect(convertEmojisToUnicode('x:smile:1', regShortnames, shortNameList)).toBe('x:smile:1');\n    });\n\n    it('replaces shortnames next to spaces or punctuation', () => {\n        const emoji = convertEmojisToUnicode(':smile:', regShortnames, shortNameList);\n\n        expect(convertEmojisToUnicode(' :smile: ', regShortnames, shortNameList)).toBe(\n            ` ${emoji} `,\n        );\n        expect(convertEmojisToUnicode('(:smile:),', regShortnames, shortNameList)).toBe(\n            `(${emoji}),`,\n        );\n    });\n});\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,QAAQ;AAC7C,SAASC,sBAAsB,QAAQ,SAAS;AAEhD,SAASC,aAAa,EAAEC,aAAa,QAAQ,kBAAkB;AAE/DL,QAAQ,CAAC,wBAAwB,EAAE,MAAM;EACrCE,EAAE,CAAC,4DAA4D,EAAE,MAAM;IACnED,MAAM,CAACE,sBAAsB,CAAC,UAAU,EAAEC,aAAa,EAAEC,aAAa,CAAC,CAAC,CAACC,IAAI,CAAC,UAAU,CAAC;IACzFL,MAAM,CAACE,sBAAsB,CAAC,UAAU,EAAEC,aAAa,EAAEC,aAAa,CAAC,CAAC,CAACC,IAAI,CAAC,UAAU,CAAC;IACzFL,MAAM,CAACE,sBAAsB,CAAC,WAAW,EAAEC,aAAa,EAAEC,aAAa,CAAC,CAAC,CAACC,IAAI,CAAC,WAAW,CAAC;EAC/F,CAAC,CAAC;EAEFJ,EAAE,CAAC,mDAAmD,EAAE,MAAM;IAC1D,MAAMK,KAAK,GAAGJ,sBAAsB,CAAC,SAAS,EAAEC,aAAa,EAAEC,aAAa,CAAC;IAE7EJ,MAAM,CAACE,sBAAsB,CAAC,WAAW,EAAEC,aAAa,EAAEC,aAAa,CAAC,CAAC,CAACC,IAAI,CAC1E,IAAIC,KAAK,GACb,CAAC;IACDN,MAAM,CAACE,sBAAsB,CAAC,YAAY,EAAEC,aAAa,EAAEC,aAAa,CAAC,CAAC,CAACC,IAAI,CAC3E,IAAIC,KAAK,IACb,CAAC;EACL,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/esm/utils/emojiShortList.js

@@ -3675,5 +3675,5 @@ let shortnameRegexp = '';
 Object.keys(shortNameList).forEach((shortname, index) => {
   shortnameRegexp += `${index !== 0 ? '|' : ''}${shortname}`;
 });
-export const regShortnames = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${shortnameRegexp})`, 'gi');
+export const regShortnames = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(?<![\\p{L}\\p{N}])(${shortnameRegexp})(?![\\p{L}\\p{N}])`, 'giu');
 //# sourceMappingURL=emojiShortList.js.map