@chayns-components/emoji-input 5.5.30 → 5.5.33-alpha.0

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

@@ -1,27 +1,59 @@
-import { AreaProvider, Icon, Popup } from '@chayns-components/core';
+import { AreaProvider, Icon, Popup, useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import React, { useCallback, useEffect, useRef } from 'react';
 import EmojiPicker from '../emoji-picker/EmojiPicker';
 import { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';
+import { useTranslation } from '@chayns/textstrings';
+import textStrings from '../../constants/textStrings';
 const EmojiPickerPopup = ({
   accessToken,
   container,
+  isDisabled,
   onPopupVisibilityChange,
   onSelect,
-  personId
+  onSelectWithKeyboard,
+  personId,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const {
+    t
+  } = useTranslation();
   const popupRef = useRef(null);
+  const triggerRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isDisabled ? false : shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(triggerRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 4
+  });
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Escape' && !event.shiftKey) {
       popupRef.current?.hide();
     }
   }, []);
+  const handleTriggerKeyDown = useCallback(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      popupRef.current?.show();
+    }
+  }, [isDisabled]);
+  const handleSelect = useCallback((emoji, shouldRestoreInputFocus) => {
+    onSelect(emoji);
+    if (shouldRestoreInputFocus) {
+      onSelectWithKeyboard?.(emoji);
+    }
+  }, [onSelect, onSelectWithKeyboard]);
   useEffect(() => {
     document.addEventListener('keydown', handleKeyPress);
     return () => {
       document.removeEventListener('keydown', handleKeyPress);
     };
   }, [handleKeyPress]);
-  return /*#__PURE__*/React.createElement(StyledEmojiPickerPopup, null, /*#__PURE__*/React.createElement(Popup, {
+  return /*#__PURE__*/React.createElement(StyledEmojiPickerPopup, {
+    "aria-hidden": isDisabled
+  }, /*#__PURE__*/React.createElement(Popup, {
     container: container,
     ref: popupRef,
     onHide: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(false) : undefined,
@@ -30,14 +62,26 @@ const EmojiPickerPopup = ({
       shouldChangeColor: false
     }, /*#__PURE__*/React.createElement(EmojiPicker, {
       accessToken: accessToken,
-      onSelect: onSelect,
+      onSelect: handleSelect,
       personId: personId
     }))
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-label": t(textStrings.emojiPickerPopup.accessibility.open),
     className: "prevent-lose-focus",
+    disabled: isDisabled,
+    onClick: event => {
+      if (isDisabled) {
+        event.stopPropagation();
+      }
+    },
+    onKeyDown: handleTriggerKeyDown,
+    ref: triggerRef,
+    tabIndex: isDisabled ? -1 : 0,
+    type: "button"
+  }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['far fa-smile'],
     size: 18
-  })));
+  }))));
 };
 EmojiPickerPopup.displayName = 'EmojiPickerPopup';
 export default EmojiPickerPopup;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["AreaProvider","Icon","Popup","React","useCallback","useEffect","useRef","EmojiPicker","StyledEmojiPickerPopup","EmojiPickerPopup","accessToken","container","onPopupVisibilityChange","onSelect","personId","popupRef","handleKeyPress","event","key","shiftKey","current","hide","document","addEventListener","removeEventListener","createElement","ref","onHide","undefined","onShow","content","shouldChangeColor","className","icons","size","displayName"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { AreaProvider, Icon, Popup, PopupAlignment, type PopupRef } from '@chayns-components/core';\nimport React, { FC, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } 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     * The DOM element that should receive the popup portal.\n     */\n    container?: Element;\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\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n    accessToken,\n    container,\n    onPopupVisibilityChange,\n    onSelect,\n    personId,\n}) => {\n    const popupRef = useRef<PopupRef>(null);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.key === 'Escape' && !event.shiftKey) {\n            popupRef.current?.hide();\n        }\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>\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={onSelect}\n                            personId={personId}\n                        />\n                    </AreaProvider>\n                }\n            >\n                <Icon className=\"prevent-lose-focus\" icons={['far fa-smile']} size={18} />\n            </Popup>\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAuC,yBAAyB;AAClG,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACjE,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,sBAAsB,QAAQ,2BAA2B;AA2BlE,MAAMC,gBAA2C,GAAGA,CAAC;EACjDC,WAAW;EACXC,SAAS;EACTC,uBAAuB;EACvBC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,QAAQ,GAAGT,MAAM,CAAW,IAAI,CAAC;EAEvC,MAAMU,cAAc,GAAGZ,WAAW,CAAEa,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAI,CAACD,KAAK,CAACE,QAAQ,EAAE;MAC3CJ,QAAQ,CAACK,OAAO,EAAEC,IAAI,CAAC,CAAC;IAC5B;EACJ,CAAC,EAAE,EAAE,CAAC;EAENhB,SAAS,CAAC,MAAM;IACZiB,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEP,cAAc,CAAC;IAEpD,OAAO,MAAM;MACTM,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAER,cAAc,CAAC;IAC3D,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACIb,KAAA,CAAAsB,aAAA,CAACjB,sBAAsB,qBACnBL,KAAA,CAAAsB,aAAA,CAACvB,KAAK;IACFS,SAAS,EAAEA,SAAU;IACrBe,GAAG,EAAEX,QAAS;IACdY,MAAM,EAAEA,CAAA,KACJ,OAAOf,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,KAAK,CAAC,GAC9BgB,SACT;IACDC,MAAM,EAAEA,CAAA,KACJ,OAAOjB,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,IAAI,CAAC,GAC7BgB,SACT;IACDE,OAAO,eACH3B,KAAA,CAAAsB,aAAA,CAACzB,YAAY;MAAC+B,iBAAiB,EAAE;IAAM,gBACnC5B,KAAA,CAAAsB,aAAA,CAAClB,WAAW;MACRG,WAAW,EAAEA,WAAY;MACzBG,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA;IAAS,CACtB,CACS;EACjB,gBAEDX,KAAA,CAAAsB,aAAA,CAACxB,IAAI;IAAC+B,SAAS,EAAC,oBAAoB;IAACC,KAAK,EAAE,CAAC,cAAc,CAAE;IAACC,IAAI,EAAE;EAAG,CAAE,CACtE,CACa,CAAC;AAEjC,CAAC;AAEDzB,gBAAgB,CAAC0B,WAAW,GAAG,kBAAkB;AAEjD,eAAe1B,gBAAgB","ignoreList":[]}
+{"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":[]}

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

@@ -4,5 +4,19 @@ export const StyledEmojiPickerPopup = styled.div`
     display: flex;
     height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};
     position: relative;
+
+    button {
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        padding: 0;
+
+        &:disabled {
+            cursor: default;
+            opacity: 0.5;
+        }
+    }
 `;
 //# sourceMappingURL=EmojiPickerPopup.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.styles.js","names":["styled","StyledEmojiPickerPopup","div","getComputedStyle","document","body","getPropertyValue"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\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"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,sBAAsB,GAAGD,MAAM,CAACE,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"EmojiPickerPopup.styles.js","names":["styled","StyledEmojiPickerPopup","div","getComputedStyle","document","body","getPropertyValue"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\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    button {\n        background: none;\n        border: 0;\n        color: inherit;\n        cursor: pointer;\n        font: inherit;\n        padding: 0;\n\n        &:disabled {\n            cursor: default;\n            opacity: 0.5;\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,sBAAsB,GAAGD,MAAM,CAACE,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/constants/textStrings.js

@@ -3,11 +3,19 @@ export default {
     emojiPicker: {
       input: {
         placeholder: {
-          stringName: 'txt_chayns_components_emoji_input_components_emojiPicker_input_placeholder',
+          stringName: 'chayns_components_emoji_input_components_emojiPicker_input_placeholder',
           fallback: 'Suchen'
         }
       }
     }
+  },
+  emojiPickerPopup: {
+    accessibility: {
+      open: {
+        stringName: 'chayns_components_emoji_input_emojiPickerPopup_accessibility_open',
+        fallback: 'Emoji-Auswahl öffnen'
+      }
+    }
   }
 };
 //# sourceMappingURL=textStrings.js.map

package/lib/esm/constants/textStrings.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStrings.js","names":["components","emojiPicker","input","placeholder","stringName","fallback"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        emojiPicker: {\n            input: {\n                placeholder: {\n                    stringName:\n                        'txt_chayns_components_emoji_input_components_emojiPicker_input_placeholder',\n                    fallback: 'Suchen',\n                },\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,WAAW,EAAE;MACTC,KAAK,EAAE;QACHC,WAAW,EAAE;UACTC,UAAU,EACN,4EAA4E;UAChFC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"textStrings.js","names":["components","emojiPicker","input","placeholder","stringName","fallback","emojiPickerPopup","accessibility","open"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        emojiPicker: {\n            input: {\n                placeholder: {\n                    stringName:\n                        'chayns_components_emoji_input_components_emojiPicker_input_placeholder',\n                    fallback: 'Suchen',\n                },\n            },\n        },\n    },\n    emojiPickerPopup: {\n        accessibility: {\n            open: {\n                stringName: 'chayns_components_emoji_input_emojiPickerPopup_accessibility_open',\n                fallback: 'Emoji-Auswahl öffnen',\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,WAAW,EAAE;MACTC,KAAK,EAAE;QACHC,WAAW,EAAE;UACTC,UAAU,EACN,wEAAwE;UAC5EC,QAAQ,EAAE;QACd;MACJ;IACJ;EACJ,CAAC;EACDC,gBAAgB,EAAE;IACdC,aAAa,EAAE;MACXC,IAAI,EAAE;QACFJ,UAAU,EAAE,mEAAmE;QAC/EC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/components/emoji-input/EmojiInput.d.ts

@@ -91,6 +91,15 @@ export type EmojiInputProps = {
      * Prevents the EmojiPickerPopup icon from being displayed
      */
     shouldPreventEmojiPicker?: boolean;
+    /**
+     * Enables keyboard-only focus highlighting.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
+    /**
+     * Disables keyboard-only focus highlighting for the editor while preserving it for child controls.
+     * @optional
+     */
+    shouldDisableEditorKeyboardHighlighting?: boolean;
     /**
      * The plain text value of the input field. Instead of HTML elements BB codes must be used at
      * this point. These are then converted by the input field into corresponding HTML elements.

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

@@ -8,7 +8,7 @@ export type EmojiPickerProps = {
      * Function executed when an emoji is selected in the popup
      * @param {string} emoji - Emoji that was selected
      */
-    onSelect: (emoji: string) => void;
+    onSelect: (emoji: string, shouldRestoreInputFocus?: boolean) => void;
     /**
      * Person id of the logged-in user. Is needed to load and save the history of the emojis.
      */

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import type { Category } from '../../../types/category';
 export type EmojiPickerEmojisProps = {
     accessToken?: string;
-    onSelect: (emoji: string) => void;
+    onSelect: (emoji: string, shouldRestoreInputFocus?: boolean) => void;
     personId?: string;
     searchString: string;
     selectedCategory: Category;

package/lib/types/components/emoji-picker-popup/EmojiPickerPopup.d.ts

@@ -8,6 +8,10 @@ export type EmojiPickerPopupProps = {
      * The DOM element that should receive the popup portal.
      */
     container?: Element;
+    /**
+     * Whether the picker trigger is disabled.
+     */
+    isDisabled?: boolean;
     /**
      * Function that is executed when the visibility of the popup changes.
      * @param {boolean} isVisible - Whether the popup is visible or not
@@ -22,6 +26,14 @@ export type EmojiPickerPopupProps = {
      * @param {string} emoji - Emoji that was selected
      */
     onSelect: (emoji: string) => void;
+    /**
+     * Enables keyboard-only focus highlighting for the picker trigger.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
+    /**
+     * Receives focus after an emoji is selected with the keyboard.
+     */
+    onSelectWithKeyboard?: (emoji: string) => void;
 };
 declare const EmojiPickerPopup: FC<EmojiPickerPopupProps>;
 export default EmojiPickerPopup;

package/lib/types/constants/textStrings.d.ts

@@ -3,11 +3,19 @@ declare const _default: {
         readonly emojiPicker: {
             readonly input: {
                 readonly placeholder: {
-                    readonly stringName: "txt_chayns_components_emoji_input_components_emojiPicker_input_placeholder";
+                    readonly stringName: "chayns_components_emoji_input_components_emojiPicker_input_placeholder";
                     readonly fallback: "Suchen";
                 };
             };
         };
     };
+    readonly emojiPickerPopup: {
+        readonly accessibility: {
+            readonly open: {
+                readonly stringName: "chayns_components_emoji_input_emojiPickerPopup_accessibility_open";
+                readonly fallback: "Emoji-Auswahl öffnen";
+            };
+        };
+    };
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.5.30",
+    "version": "5.5.33-alpha.0",
     "description": "Input field that supports HTML elements and emojis",
     "sideEffects": false,
     "browserslist": [
@@ -75,8 +75,8 @@
         "vitest": "^1.6.1"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.30",
-        "@chayns-components/textstring": "^5.5.28",
+        "@chayns-components/core": "^5.5.31-alpha.0",
+        "@chayns/textstrings": "^1.0.1",
         "emojilib": "^3.0.12",
         "react-compiler-runtime": "^1.0.0",
         "unicode-emoji-json": "^0.9.0"
@@ -91,5 +91,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b90fd1685e1067d28e29580095f3d290be892769"
+    "gitHead": "0f3671424b04650c8c56d8b90b4a0397a60e78ba"
 }