@chayns-components/emoji-input 5.5.37 → 5.5.40

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

@@ -87,7 +87,10 @@ const EmojiPickerPopupContent = ({
     onKeyDown: handleTriggerKeyDown,
     ref: triggerRef,
     tabIndex: isDisabled ? -1 : 0,
-    type: "button"
+    type: "button",
+    style: {
+      display: 'flex'
+    }
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     icons: ['far fa-smile'],
     size: 18

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPicker","_interopRequireDefault","_EmojiPickerPopup","_textstrings","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerPopupContent","accessToken","container","isDisabled","onPopupVisibilityChange","onSelect","onSelectWithKeyboard","personId","shouldEnableKeyboardHighlighting","useTranslation","popupRef","useRef","triggerRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleKeyPress","useCallback","event","key","shiftKey","_popupRef$current","current","hide","handleTriggerKeyDown","_popupRef$current2","preventDefault","show","handleSelect","emoji","shouldRestoreInputFocus","useEffect","document","addEventListener","removeEventListener","createElement","StyledEmojiPickerPopup","Popup","ref","onHide","undefined","onShow","content","AreaProvider","shouldChangeColor","textStrings","emojiPickerPopup","accessibility","open","className","disabled","onClick","stopPropagation","onKeyDown","tabIndex","type","Icon","icons","size","EmojiPickerPopup","props","TextStringProviderSSR","libraries","id","displayName","_default","exports"],"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                >\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":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AASA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAH,sBAAA,CAAAJ,OAAA;AAAsD,SAAAI,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAuCtD,MAAMgB,uBAAkD,GAAGA,CAAC;EACxDC,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,uBAAuB;EACvBC,QAAQ;EACRC,oBAAoB;EACpBC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM;IAAExB;EAAE,CAAC,GAAG,IAAAyB,2BAAc,EAAC,CAAC;EAC9B,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EACvC,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAoB,IAAI,CAAC;EAClD,MAAME,8BAA8B,GAAG,IAAAC,kCAA4B,EAC/DX,UAAU,GAAG,KAAK,GAAGK,gCACzB,CAAC;EAED,IAAAO,wBAAkB,EAACH,UAAU,EAAE;IAC3BI,SAAS,EAAEH,8BAA8B;IACzCI,KAAK,EAAE,QAAQ;IACfC,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAG,IAAAC,kBAAW,EAAEC,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAI,CAACD,KAAK,CAACE,QAAQ,EAAE;MAAA,IAAAC,iBAAA;MAC3C,CAAAA,iBAAA,GAAAd,QAAQ,CAACe,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,IAAI,CAAC,CAAC;IAC5B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,oBAAoB,GAAG,IAAAP,kBAAW,EACnCC,KAAK,IAAK;IACP,IAAIlB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAIkB,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAAA,IAAAM,kBAAA;MAC5CP,KAAK,CAACQ,cAAc,CAAC,CAAC;MACtB,CAAAD,kBAAA,GAAAlB,QAAQ,CAACe,OAAO,cAAAG,kBAAA,eAAhBA,kBAAA,CAAkBE,IAAI,CAAC,CAAC;IAC5B;EACJ,CAAC,EACD,CAAC3B,UAAU,CACf,CAAC;EAED,MAAM4B,YAAY,GAAG,IAAAX,kBAAW,EAC5B,CAACY,KAAa,EAAEC,uBAAiC,KAAK;IAClD5B,QAAQ,CAAC2B,KAAK,CAAC;IAEf,IAAIC,uBAAuB,EAAE;MACzB3B,oBAAoB,aAApBA,oBAAoB,eAApBA,oBAAoB,CAAG0B,KAAK,CAAC;IACjC;EACJ,CAAC,EACD,CAAC3B,QAAQ,EAAEC,oBAAoB,CACnC,CAAC;EAED,IAAA4B,gBAAS,EAAC,MAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEjB,cAAc,CAAC;IAEpD,OAAO,MAAM;MACTgB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAElB,cAAc,CAAC;IAC3D,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACI7C,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAC5D,iBAAA,CAAA6D,sBAAsB;IAAC,eAAapC;EAAW,gBAC5C7B,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAClE,KAAA,CAAAoE,KAAK;IACFtC,SAAS,EAAEA,SAAU;IACrBuC,GAAG,EAAE/B,QAAS;IACdgC,MAAM,EAAEA,CAAA,KACJ,OAAOtC,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,KAAK,CAAC,GAC9BuC,SACT;IACDC,MAAM,EAAEA,CAAA,KACJ,OAAOxC,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,IAAI,CAAC,GAC7BuC,SACT;IACDE,OAAO,eACHvE,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAClE,KAAA,CAAA0E,YAAY;MAACC,iBAAiB,EAAE;IAAM,gBACnCzE,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAC9D,YAAA,CAAAO,OAAW;MACRkB,WAAW,EAAEA,WAAY;MACzBI,QAAQ,EAAE0B,YAAa;MACvBxB,QAAQ,EAAEA;IAAS,CACtB,CACS;EACjB,gBAEDjC,MAAA,CAAAS,OAAA,CAAAuD,aAAA;IACI,cAAYtD,CAAC,CAACgE,oBAAW,CAACC,gBAAgB,CAACC,aAAa,CAACC,IAAI,CAAE;IAC/DC,SAAS,EAAC,oBAAoB;IAC9BC,QAAQ,EAAElD,UAAW;IACrBmD,OAAO,EAAGjC,KAAK,IAAK;MAChB,IAAIlB,UAAU,EAAE;QACZkB,KAAK,CAACkC,eAAe,CAAC,CAAC;MAC3B;IACJ,CAAE;IACFC,SAAS,EAAE7B,oBAAqB;IAChCc,GAAG,EAAE7B,UAAW;IAChB6C,QAAQ,EAAEtD,UAAU,GAAG,CAAC,CAAC,GAAG,CAAE;IAC9BuD,IAAI,EAAC;EAAQ,gBAEbpF,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAClE,KAAA,CAAAuF,IAAI;IAACC,KAAK,EAAE,CAAC,cAAc,CAAE;IAACC,IAAI,EAAE;EAAG,CAAE,CACtC,CACL,CACa,CAAC;AAEjC,CAAC;AAED,MAAMC,gBAA2C,GAAIC,KAAK,iBACtDzF,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAAC3D,YAAA,CAAAqF,qBAAqB;EAACC,SAAS,EAAC,+BAA+B;EAACC,EAAE,EAAC;AAAoB,gBACpF5F,MAAA,CAAAS,OAAA,CAAAuD,aAAA,CAACtC,uBAAuB,EAAK+D,KAAQ,CAClB,CAC1B;AAEDD,gBAAgB,CAACK,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtF,OAAA,GAEnC+E,gBAAgB","ignoreList":[]}
+{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPicker","_interopRequireDefault","_EmojiPickerPopup","_textstrings","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerPopupContent","accessToken","container","isDisabled","onPopupVisibilityChange","onSelect","onSelectWithKeyboard","personId","shouldEnableKeyboardHighlighting","useTranslation","popupRef","useRef","triggerRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleKeyPress","useCallback","event","key","shiftKey","_popupRef$current","current","hide","handleTriggerKeyDown","_popupRef$current2","preventDefault","show","handleSelect","emoji","shouldRestoreInputFocus","useEffect","document","addEventListener","removeEventListener","createElement","StyledEmojiPickerPopup","Popup","ref","onHide","undefined","onShow","content","AreaProvider","shouldChangeColor","textStrings","emojiPickerPopup","accessibility","open","className","disabled","onClick","stopPropagation","onKeyDown","tabIndex","type","style","display","Icon","icons","size","EmojiPickerPopup","props","TextStringProviderSSR","libraries","id","displayName","_default","exports"],"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/components/emoji-picker-popup/EmojiPickerPopup.js

@@ -77,7 +77,10 @@ const EmojiPickerPopupContent = ({
     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

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","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","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                >\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":[]}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.5.37",
+    "version": "5.5.40",
     "description": "Input field that supports HTML elements and emojis",
     "sideEffects": false,
     "browserslist": [
@@ -75,7 +75,7 @@
         "vitest": "^1.6.1"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.37",
+        "@chayns-components/core": "^5.5.40",
         "@chayns/textstrings": "^1.0.1",
         "emojilib": "^3.0.12",
         "react-compiler-runtime": "^1.0.0",
@@ -91,5 +91,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d54ff7f9ff20ebb76f33a5539cbb610b107a0cc7"
+    "gitHead": "6dbae57c63a1acb4aad518450bc6bc3d911a1d3e"
 }