react-input-emoji 5.6.2 → 5.6.3

package/dist/src/components/emoji-picker-button.d.ts

@@ -0,0 +1,21 @@
+export default EmojiPickerButton;
+export type Props = {
+    showPicker: boolean;
+    toggleShowPicker: (event: React.MouseEvent) => void;
+    buttonElement?: HTMLDivElement | undefined;
+    buttonRef?: React.MutableRefObject<any> | undefined;
+};
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {(event: React.MouseEvent) => void} toggleShowPicker
+ * @property {HTMLDivElement=} buttonElement
+ * @property {React.MutableRefObject=} buttonRef
+ */
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+declare function EmojiPickerButton({ showPicker, toggleShowPicker, buttonElement, buttonRef }: Props): JSX.Element;
+import React from "react";

package/dist/src/components/emoji-picker-container.d.ts

@@ -0,0 +1,26 @@
+export default EmojiPickerContainer;
+export type Props = {
+    showPicker: boolean;
+    theme: 'light' | 'dark' | 'auto';
+    handleSelectEmoji: (emoji: import("../types/types").EmojiMartItem) => void;
+    disableRecent: boolean;
+    customEmojis?: any[] | undefined;
+    position?: ('above' | 'below') | undefined;
+    language?: import('../types/types').Languages | undefined;
+};
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
+ * @property {boolean} disableRecent
+ * @property {any[]=} customEmojis
+ * @property {('above' | 'below')=} position
+ * @property {import('../types/types').Languages=} language
+ */
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+declare function EmojiPickerContainer({ showPicker, theme, handleSelectEmoji, disableRecent, customEmojis, position, language }: Props): JSX.Element;

package/dist/src/components/emoji-picker-wrapper.d.ts

@@ -0,0 +1,37 @@
+export default EmojiPickerWrapper;
+export type SanitizeFn = import('../types/types').SanitizeFn;
+export type PolluteFn = import('../types/types').PolluteFn;
+export type Props = {
+    theme: 'light' | 'dark' | 'auto';
+    keepOpened: boolean;
+    disableRecent: boolean;
+    customEmojis?: any[] | undefined;
+    addSanitizeFn: (fn: SanitizeFn) => void;
+    addPolluteFn: (fn: PolluteFn) => void;
+    appendContent: (html: string) => void;
+    buttonElement?: HTMLDivElement | undefined;
+    buttonRef?: React.MutableRefObject<any> | undefined;
+    language?: import('../types/types').Languages | undefined;
+};
+/**
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
+ */
+/**
+ * @typedef {import('../types/types').PolluteFn} PolluteFn
+ */
+/**
+ * @typedef {Object} Props
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {boolean} keepOpened
+ * @property {boolean} disableRecent
+ * @property {any[]=} customEmojis
+ * @property {(fn: SanitizeFn) => void} addSanitizeFn
+ * @property {(fn: PolluteFn) => void} addPolluteFn
+ * @property {(html: string) => void} appendContent
+ * @property {HTMLDivElement=} buttonElement
+ * @property {React.MutableRefObject=} buttonRef
+ * @property {import('../types/types').Languages=} language
+ */
+/** @type {React.FC<Props>} */
+declare const EmojiPickerWrapper: React.FC<Props>;
+import React from "react";

package/dist/src/components/emoji-picker.d.ts

@@ -0,0 +1,23 @@
+declare const _default: React.MemoExoticComponent<typeof EmojiPicker>;
+export default _default;
+export type Props = {
+    theme: 'light' | 'dark' | 'auto';
+    onSelectEmoji: (arg0: import("../types/types").EmojiMartItem) => void;
+    disableRecent: boolean;
+    customEmojis?: any[] | undefined;
+    language?: import('../types/types').Languages | undefined;
+};
+/**
+ * @typedef {object} Props
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
+ * @property {boolean} disableRecent
+ * @property {any[]=} customEmojis
+ * @property {import('../types/types').Languages=} language
+ */
+/**
+ * Emoji Picker Component
+ * @param {Props} props
+ */
+declare function EmojiPicker(props: Props): JSX.Element;
+import React from "react";

package/dist/src/components/mention-user-list.d.ts

@@ -0,0 +1,15 @@
+export default MentionUserListWithRef;
+export type MentionUser = import('../types/types').MentionUser;
+export type TextInputListeners = import('../types/types').TextInputListeners;
+export type Props = {
+    users: MentionUser[];
+    mentionSearchText: string | null;
+    onSelect: (user: MentionUser) => void;
+    addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
+};
+export type Ref = {
+    prevUser: () => void;
+    nextUser: () => void;
+};
+declare const MentionUserListWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>;
+import React from "react";

package/dist/src/components/mention-wrapper.d.ts

@@ -0,0 +1,29 @@
+export default MentionWrapper;
+export type MetionUser = import('../types/types').MentionUser;
+export type TextInputListeners = import('../types/types').TextInputListeners;
+export type SanitizeFn = import('../types/types').SanitizeFn;
+export type Props = {
+    searchMention?: (text: string) => Promise<MetionUser[]>;
+    addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
+    appendContent: (html: string) => void;
+    addSanitizeFn: (fn: SanitizeFn) => void;
+};
+/**
+ * @typedef {import('../types/types').MentionUser} MetionUser
+ */
+/**
+ * @typedef {import('../types/types').TextInputListeners} TextInputListeners
+ */
+/**
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
+ */
+/**
+ * @typedef {Object} Props
+ * @property {(text: string) => Promise<MetionUser[]>=} searchMention
+ * @property {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void} addEventListener
+ * @property {(html: string) => void} appendContent
+ * @property {(fn: SanitizeFn) => void} addSanitizeFn
+ */
+/** @type {React.FC<Props>} */
+declare const MentionWrapper: React.FC<Props>;
+import React from "react";

package/dist/src/components/mention-wrapper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/use-emit.d.ts

@@ -0,0 +1,10 @@
+/**
+ * useEmit
+ * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
+ * @param {(size: {width: number, height: number}) => void} onResize
+ * @param {(text: string) => void} onChange
+ */
+export function useEmit(textInputRef: React.MutableRefObject<import('../text-input').Ref | null>, onResize: (size: {
+    width: number;
+    height: number;
+}) => void, onChange: (text: string) => void): (sanitizedText: any) => void;

package/dist/src/hooks/use-event-listeners.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @typedef {import('../types/types').TextInputListeners} TextInputListeners
+ */
+/** */
+export function useEventListeners(): {
+    addEventListener: (event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void;
+    listeners: import("../types/types").TextInputListeners;
+};
+export type TextInputListeners = import('../types/types').TextInputListeners;

package/dist/src/hooks/use-event-listeners.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/use-expose.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @typedef {Object} Props
+ * @property {React.Ref<any>} ref
+ * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
+ * @property {(value: string) => void} setValue
+ * @property {() => void} emitChange
+ */
+/**
+ *
+ * @param {Props} props
+ */
+export function useExpose({ ref, textInputRef, setValue, emitChange }: Props): void;
+export type Props = {
+    ref: React.Ref<any>;
+    textInputRef: React.MutableRefObject<import('../text-input').Ref | null>;
+    setValue: (value: string) => void;
+    emitChange: () => void;
+};

package/dist/src/hooks/use-mention.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @typedef {import('../types/types').MentionUser} MentionUser
+ */
+/**
+ *
+ * @param {(text: string) => Promise<MentionUser[]>=} searchMention
+ * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
+ */
+export function useMention(searchMention?: (text: string) => Promise<MentionUser[]>): {
+    mentionSearchText: string | null;
+    mentionUsers: MentionUser[];
+    onKeyUp: (event: React.KeyboardEvent) => void;
+    onFocus: () => void;
+    onSelectUser: () => void;
+    loading: boolean;
+};
+export type MentionUser = import('../types/types').MentionUser;

package/dist/src/hooks/use-mention.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/hooks/use-sanitize.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @typedef {import('../types/types').SanitizeFn} SanitizeFn
+ */
+/**
+ * @param {boolean} shouldReturn
+ */
+export function useSanitize(shouldReturn: boolean): {
+    addSanitizeFn: (fn: SanitizeFn) => void;
+    sanitize: (html: string) => string;
+    sanitizedTextRef: import("react").MutableRefObject<string>;
+};
+/**
+ *
+ * @param {string} html
+ * @param {boolean} shouldReturn
+ * @return {string}
+ */
+export function replaceAllHtmlToString(html: string, shouldReturn: boolean): string;
+export type SanitizeFn = import('../types/types').SanitizeFn;

package/dist/src/hooks/user-pollute.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @typedef {import('../types/types').PolluteFn} PolluteFn
+ */
+/** */
+export function usePollute(): {
+    addPolluteFn: (fn: PolluteFn) => void;
+    pollute: (html: string) => string;
+};
+export type PolluteFn = import('../types/types').PolluteFn;

package/dist/src/index.d.ts

@@ -0,0 +1,48 @@
+export default InputEmojiWithRef;
+export type MetionUser = import('./types/types').MentionUser;
+export type ListenerObj = import('./types/types').ListenerObj<any>;
+export type Props = {
+    value: string;
+    onChange: (value: string) => void;
+    theme: "light" | "dark" | "auto";
+    cleanOnEnter: boolean;
+    onEnter: (text: string) => void;
+    placeholder: string;
+    onResize: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur?: (() => void) | undefined;
+    shouldReturn: boolean;
+    maxLength: number;
+    keepOpened: boolean;
+    onKeyDown: (event: KeyboardEvent) => void;
+    inputClass: string;
+    disableRecent: boolean;
+    tabIndex: number;
+    height: number;
+    borderRadius: number;
+    borderColor: string;
+    fontSize: number;
+    fontFamily: string;
+    customEmojis?: {
+        id: string;
+        name: string;
+        emojis: {
+            id: string;
+            name: string;
+            keywords: string[];
+            skins: {
+                src: string;
+            }[];
+        };
+    }[] | undefined;
+    language?: import('./types/types').Languages | undefined;
+    searchMention?: (text: string) => Promise<MetionUser[]>;
+    buttonElement?: HTMLDivElement | undefined;
+    buttonRef?: React.MutableRefObject<any> | undefined;
+};
+declare const InputEmojiWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+import React from "react";

package/dist/src/text-input.d.ts

@@ -0,0 +1,30 @@
+export default TextInputWithRef;
+export type Props = {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    onKeyUp: (event: React.KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    onChange?: (sanitizedText: string) => void;
+    onArrowUp: (event: React.KeyboardEvent) => void;
+    onArrowDown: (event: React.KeyboardEvent) => void;
+    onEnter: (event: React.KeyboardEvent) => void;
+    shouldReturn: boolean;
+    onCopy: (event: React.ClipboardEvent) => void;
+    onPaste: (event: React.ClipboardEvent) => void;
+    placeholder: string;
+    style: React.CSSProperties;
+    tabIndex: number;
+    className: string;
+};
+export type Ref = {
+    appendContent: (html: string) => void;
+    html: string;
+    text: string;
+    size: {
+        width: number;
+        height: number;
+    };
+    focus: () => void;
+};
+declare const TextInputWithRef: React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>;
+import React from "react";

package/dist/src/utils/emoji-utils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Replace all text with emoji with an image html tag
+ * @param {string} text
+ * @return {string}
+ */
+export function replaceAllTextEmojis(text: string): string;
+/**
+ *
+ * @param { import("../types/types").EmojiMartItem } emoji
+ * @return {string}
+ */
+export function getImageEmoji(emoji: import("../types/types").EmojiMartItem): string;
+/**
+ *
+ * @param {string} html
+ * @return {string}
+ */
+export function replaceAllTextEmojiToString(html: string): string;
+export const TRANSPARENT_GIF: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+export const EMOJI_STYLE: "";

package/dist/src/utils/input-event-utils.d.ts

@@ -0,0 +1,95 @@
+/**
+ * Handle copy of current selected text
+ * @param {React.ClipboardEvent} event
+ */
+export function handleCopy(event: React.ClipboardEvent): void;
+/**
+ *
+ * @param {string} html
+ */
+export function handlePasteHtmlAtCaret(html: string): void;
+/**
+ * Handle past on input
+ * @param {React.ClipboardEvent} event
+ */
+export function handlePaste(event: React.ClipboardEvent): void;
+/**
+ * @typedef {object} HandleKeyDownOptions
+ * @property {HTMLDivElement} placeholderEl
+ * @property {number} maxLength
+ * @property {HTMLDivElement} inputEl
+ * @property {React.MutableRefObject<string>} cleanedTextRef
+ * @property {React.MutableRefObject<HTMLDivElement>} textInputRef
+ * @property {boolean} cleanOnEnter
+ * @property {function(): void} emitChange
+ * @property {(function(string): void)=} onEnter
+ * @property {(function(KeyboardEvent): void)=} onKeyDown
+ * @property {(function(string): void)} updateHTML
+ */
+/**
+ * @typedef {Object} HandleSelectEmojiProps
+ * @property {import("../types/types").EmojiMartItem} emoji
+ * @property {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @property {boolean} keepOpened
+ * @property {() => void} toggleShowPicker
+ * @property {number=} maxLength
+ */
+/**
+ *
+ * @param {HandleSelectEmojiProps} props
+ */
+export function handleSelectEmoji({ emoji, textInputRef, keepOpened, toggleShowPicker, maxLength }: HandleSelectEmojiProps): void;
+/**
+ *
+ * @param {{text: string, html: string}} props
+ * @return {number}
+ */
+export function totalCharacters({ text, html }: {
+    text: string;
+    html: string;
+}): number;
+/**
+ * Handle keyup event
+ * @param {() => void} emitChange
+ * @param {(event: KeyboardEvent) => void} onKeyDownMention
+ * @param {React.MutableRefObject<string>} cleanedTextRef
+ * @param {React.MutableRefObject<HTMLDivElement>} textInputRef
+ * @return {(event: KeyboardEvent) => void}
+ */
+export function handleKeyup(emitChange: () => void, onKeyDownMention: (event: KeyboardEvent) => void, cleanedTextRef: React.MutableRefObject<string>, textInputRef: React.MutableRefObject<HTMLDivElement>): (event: KeyboardEvent) => void;
+/**
+ * Handle focus event
+ * @param {function(FocusEvent): void} onFocus
+ * @return {function(FocusEvent): void}
+ */
+export function handleFocus(onFocus: (arg0: FocusEvent) => void): (arg0: FocusEvent) => void;
+/**
+ * Set caret to the end of text value
+ * @param {React.MutableRefObject<HTMLDivElement| null>} input
+ */
+export function moveCaretToEnd(input: React.MutableRefObject<HTMLDivElement | null>): void;
+/**
+ *
+ * @param {HTMLDivElement} inputDiv
+ * @return {string}
+ */
+export function removeHtmlExceptBr(inputDiv: HTMLDivElement): string;
+export type HandleKeyDownOptions = {
+    placeholderEl: HTMLDivElement;
+    maxLength: number;
+    inputEl: HTMLDivElement;
+    cleanedTextRef: React.MutableRefObject<string>;
+    textInputRef: React.MutableRefObject<HTMLDivElement>;
+    cleanOnEnter: boolean;
+    emitChange: () => void;
+    onEnter?: ((arg0: string) => void) | undefined;
+    onKeyDown?: ((arg0: KeyboardEvent) => void) | undefined;
+    updateHTML: ((arg0: string) => void);
+};
+export type HandleSelectEmojiProps = {
+    emoji: import("../types/types").EmojiMartItem;
+    textInputRef: React.MutableRefObject<import('../text-input').Ref>;
+    keepOpened: boolean;
+    toggleShowPicker: () => void;
+    maxLength?: number | undefined;
+};

package/dist/src/utils/mention-utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ * @return {string | null}
+ */
+export function getTextFromAtToCaret(): string | null;
+/** */
+export function deleteTextFromAtToCaret(): void;
+/**
+ *
+ * @return {{element: Node, caretOffset: number}}
+ */
+export function getElementWithFocus(): {
+    element: Node;
+    caretOffset: number;
+};

package/dist/src/utils/observer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @template T
+ * @returns {import('../types/types').ListenerObj<T>}
+ */
+export function createObserver<T>(): import("../types/types").ListenerObj<T>;

package/dist/src/utils/use-debounce.d.ts

@@ -0,0 +1 @@
+export default function useDebounce(callback: any, delay: any): ((...args: any[]) => void)[];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-input-emoji",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "description": "A React input with an option to add an emoji with language support.",
   "homepage": "https://cesarwbr.github.io/react-input-emoji/",
   "author": "cesarwbr",
   "license": "MIT",
   "repository": "cesarwbr/react-input-emoji",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "keywords": [
     "emoji",
     "react",
@@ -23,14 +23,14 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
-    "build": "rollup -c",
+    "build": "tsc && rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
     "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build"
+    "deploy": "gh-pages -d example/build",
+    "gen:types": "tsc"
   },
   "peerDependencies": {
-    "prop-types": ">=15.7.2",
     "react": ">=17.0.x",
     "react-dom": ">=17.0.x"
   },