@antscorp/antsomi-ui 2.0.6 → 2.0.8-3.text-editor-beta.1

package/es/components/molecules/EmojiCollections/LineCollection/constants.js

@@ -0,0 +1,210 @@
+/* eslint-disable consistent-return */
+// Utils
+import { getLinkLineURLImage } from '@antscorp/antsomi-ui/es/components/molecules/TagifyInput';
+export const MIN_VISIBLE_COUNT = 40; // ROW: 4, COLUMN: 10 => 4 x 10
+export const PRODUCT_ID_EMOJIS = [
+    {
+        id: '5ac2213e040ab15980c9b447',
+        total: 182,
+    },
+    {
+        id: '5ac21a8c040ab15980c9b43f',
+        total: 149,
+    },
+    {
+        id: '5ac21c4e031a6752fb806d5b',
+        total: 161,
+    },
+    {
+        id: '5ac21e6c040ab15980c9b444',
+        total: 222,
+    },
+    {
+        id: '5ac1bfd5040ab15980c9b435',
+        total: 250,
+    },
+    {
+        id: '5ac22e85040ab15980c9b44f',
+        total: 209,
+    },
+    {
+        id: '5ac22775040ab15980c9b44c',
+        total: 247,
+    },
+    {
+        id: '5ac2197b040ab15980c9b43d',
+        total: 201,
+    },
+    {
+        id: '5ac21d59031a6752fb806d5d',
+        total: 212,
+    },
+    {
+        id: '5ac221ca040ab15980c9b449',
+        total: 167,
+    },
+    {
+        id: '5ac22bad031a6752fb806d67',
+        total: 214,
+    },
+    {
+        id: '5ac2211e031a6752fb806d61',
+        total: 250,
+    },
+    {
+        id: '5ac21b4f031a6752fb806d59',
+        total: 149,
+    },
+    {
+        id: '5ac21cce040ab15980c9b443',
+        total: 161,
+    },
+    {
+        id: '5ac21fda040ab15980c9b446',
+        total: 140,
+    },
+    {
+        id: '5ac22224031a6752fb806d62',
+        total: 251,
+    },
+    {
+        id: '5ac22c9e031a6752fb806d68',
+        total: 198,
+    },
+    {
+        id: '5ac222bf031a6752fb806d64',
+        total: 250,
+    },
+    {
+        id: '5ac21869040ab15980c9b43b',
+        total: 199,
+    },
+    {
+        id: '5ac2280f031a6752fb806d65',
+        total: 250,
+    },
+    {
+        id: '5ac22293031a6752fb806d63',
+        total: 184,
+    },
+    {
+        id: '5ac2173d031a6752fb806d56',
+        total: 240,
+    },
+    {
+        id: '5ac21542031a6752fb806d55',
+        total: 248,
+    },
+    {
+        id: '5ac2216f040ab15980c9b448',
+        total: 188,
+    },
+    {
+        id: '5ac21f52040ab15980c9b445',
+        total: 183,
+    },
+    {
+        id: '5ac21ef5031a6752fb806d5e',
+        total: 150,
+    },
+    {
+        id: '5ac223c6040ab15980c9b44a',
+        total: 157,
+    },
+    {
+        id: '5ac22b23040ab15980c9b44d',
+        total: 247,
+    },
+    {
+        id: '5ac22def040ab15980c9b44e',
+        total: 250,
+    },
+    {
+        id: '5ac21c46040ab15980c9b442',
+        total: 221,
+    },
+    {
+        id: '5ac22d62031a6752fb806d69',
+        total: 196,
+    },
+    {
+        id: '5ac21a13031a6752fb806d57',
+        total: 149,
+    },
+    {
+        id: '5ac21a18040ab15980c9b43e',
+        total: 239,
+    },
+    {
+        id: '5ac21ba5040ab15980c9b441',
+        total: 161,
+    },
+    {
+        id: '5ac2264e040ab15980c9b44b',
+        total: 252,
+    },
+    {
+        id: '5ac2206d031a6752fb806d5f',
+        total: 252,
+    },
+    {
+        id: '5ac220c2031a6752fb806d60',
+        total: 246,
+    },
+    {
+        id: '5ac22a8c031a6752fb806d66',
+        total: 210,
+    },
+    {
+        id: '5ac1de17040ab15980c9b438',
+        total: 194,
+    },
+    {
+        id: '5ac21bf9031a6752fb806d5a',
+        total: 161,
+    },
+    {
+        id: '5ac21cc5031a6752fb806d5c',
+        total: 170,
+    },
+    {
+        id: '5ac21ae3040ab15980c9b440',
+        total: 149,
+    },
+    {
+        id: '5ac218e3040ab15980c9b43c',
+        total: 221,
+    },
+    {
+        id: '5ac21184040ab15980c9b43a',
+        total: 234,
+    },
+];
+const generateStringArray = (length = 0) => {
+    const result = [];
+    for (let i = 1; i <= length; i += 1) {
+        // Use String.prototype.padStart to ensure leading zeros
+        const str = i.toString().padStart(3, '0');
+        result.push(str);
+    }
+    return result;
+};
+export const TAB_LINE_MESSAGE_EMOJIS = Object.freeze(PRODUCT_ID_EMOJIS.map(({ id }) => ({
+    key: id,
+    value: getLinkLineURLImage(id, '001'),
+})));
+const generateLineEmojis = () => {
+    const results = {};
+    try {
+        PRODUCT_ID_EMOJIS.forEach(({ id, total }) => {
+            results[id] = generateStringArray(total);
+        });
+        return results;
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }
+    return results;
+};
+export const LINE_MESSAGE_EMOJIS = Object.freeze(generateLineEmojis());

package/es/components/molecules/EmojiCollections/LineCollection/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EmojiCollectionProps } from '../types';
+declare const _default: React.NamedExoticComponent<EmojiCollectionProps>;
+export default _default;

package/es/components/molecules/EmojiCollections/LineCollection/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
+import { useImmer } from 'use-immer';
+// Components & Styled
+import { Emoji, EmojiList, EmojiImage, WrapperCollection, EmptyEmoji } from '../styled';
+import { Button, Flex, Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
+import { getLinkLineURLImage, PREFIX_PATTERN_LINE_MESSAGE, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EmojiSmileIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Constants
+import { LINE_MESSAGE_EMOJIS, MIN_VISIBLE_COUNT, TAB_LINE_MESSAGE_EMOJIS } from './constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const LineCollection = ({ onEmojiClick }) => {
+    // States
+    const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
+    const [state, setState] = useImmer({
+        collectionActive: TAB_LINE_MESSAGE_EMOJIS[0]?.key || '',
+    });
+    // Memoizations
+    const emojiList = useMemo(() => (LINE_MESSAGE_EMOJIS ? LINE_MESSAGE_EMOJIS[state.collectionActive] : []), [state.collectionActive]);
+    const handleClickCollection = useCallback((newCollection) => {
+        setState(draft => {
+            draft.collectionActive = newCollection;
+        });
+        setVisibleCount(prev => prev + 10);
+    }, [setState]);
+    const onScroll = useCallback((e, collectionLength) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+            setVisibleCount(prev => {
+                const newCount = prev + 30;
+                if (newCount >= collectionLength)
+                    return collectionLength > MIN_VISIBLE_COUNT ? collectionLength : collectionLength;
+                return newCount;
+            });
+        }
+    }, []);
+    useEffect(() => () => {
+        setState(draft => {
+            draft.collectionActive = TAB_LINE_MESSAGE_EMOJIS[0]?.key || '';
+        });
+    }, [setState]);
+    const renderLineCategory = useCallback(() => {
+        const content = TAB_LINE_MESSAGE_EMOJIS.map(emoji => {
+            const { key, value } = emoji;
+            return (_jsx(Emoji, { type: "text", "$width": 40, "$height": 40, "$active": key === state.collectionActive, icon: _jsx(EmojiImage, { src: value, alt: key, style: { width: 20 } }), onClick: () => handleClickCollection(key) }, key));
+        });
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 40, children: _jsx(Flex, { wrap: "nowrap", children: content }) }));
+    }, [state.collectionActive, handleClickCollection]);
+    const renderLineEmoji = useCallback(() => {
+        if (_.isArray(emojiList) && !emojiList.length) {
+            return (_jsx(EmptyEmoji, { image: _jsx(Button, { type: "text", shape: "round", icon: _jsx(EmojiSmileIcon, { color: globalToken?.bw5, style: { width: 30, height: 30 } }), style: { width: 60, height: 60, background: globalToken?.bw2 } }), imageStyle: { height: 60, marginBottom: 15 }, description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "No emoji matches your keyword" }) }));
+        }
+        const list = emojiList.slice(0, Math.min(visibleCount, emojiList.length));
+        const content = list.map((emojiId) => {
+            const src = getLinkLineURLImage(state.collectionActive, emojiId);
+            const code = `$((${PREFIX_PATTERN_LINE_MESSAGE}:${state.collectionActive}:${emojiId}))`;
+            return (_jsx(Emoji, { type: "text", icon: _jsx(EmojiImage, { src: src, alt: emojiId }), onClick: () => onEmojiClick(code) }, emojiId));
+        });
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiList.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiList, visibleCount, state.collectionActive, onEmojiClick, onScroll]);
+    return (_jsx(WrapperCollection, { children: _jsxs(Flex, { vertical: true, children: [renderLineCategory(), _jsx(EmojiList, { children: renderLineEmoji() })] }) }));
+};
+LineCollection.defaultProps = {
+    onEmojiClick: () => { },
+};
+export default memo(LineCollection);

package/es/components/molecules/EmojiCollections/ViberCollection/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EmojiCollectionProps } from '../types';
+declare const _default: React.NamedExoticComponent<EmojiCollectionProps>;
+export default _default;

package/es/components/molecules/EmojiCollections/ViberCollection/index.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useImmer } from 'use-immer';
+import _ from 'lodash';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+// Components & styled
+import { Emoji, EmojiImage, EmojiList, EmptyEmoji, WrapperCollection } from '../styled';
+import { Button, Flex, Input, Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
+import { getImageSourceViberEmoji, iconsViber } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EmojiSmileIcon, SearchIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const listEmoji = Object.values(iconsViber);
+const MIN_VISIBLE_COUNT = 40; // ROW: 4, COLUMN: 10 => 4 x 10
+const ViberCollection = ({ onEmojiClick }) => {
+    // States
+    const [visibleCount, setVisibleCount] = useState(MIN_VISIBLE_COUNT);
+    const [state, setState] = useImmer({
+        txtSearch: '',
+    });
+    const txtSearchDebounce = useDebounce(state.txtSearch, 300);
+    // Memoizations
+    const listEmojiMemoized = useMemo(() => {
+        if (!txtSearchDebounce)
+            return listEmoji;
+        return listEmoji.filter(emojiFileName => {
+            const [emoji] = emojiFileName.split('.');
+            return emoji.toLowerCase().includes(txtSearchDebounce.toLowerCase());
+        });
+    }, [txtSearchDebounce]);
+    const handleChangeInput = useCallback((e) => {
+        if (e.target) {
+            setState(draft => {
+                draft.txtSearch = e.target.value.trim();
+            });
+        }
+    }, [setState]);
+    const onScroll = useCallback((e, collectionLength) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+            setVisibleCount(prev => {
+                const newCount = prev + 30;
+                if (newCount >= collectionLength)
+                    return collectionLength > MIN_VISIBLE_COUNT ? collectionLength : MIN_VISIBLE_COUNT;
+                return newCount;
+            });
+        }
+    }, []);
+    useEffect(() => () => {
+        setState(draft => {
+            draft.txtSearch = '';
+        });
+    }, [setState]);
+    const renderViberCollection = useCallback(() => {
+        if (_.isArray(listEmojiMemoized) && !listEmojiMemoized.length) {
+            return (_jsx(EmptyEmoji, { image: _jsx(Button, { type: "text", shape: "round", icon: _jsx(EmojiSmileIcon, { color: globalToken?.bw5, style: { width: 30, height: 30 } }), style: { width: 60, height: 60, background: globalToken?.bw2 } }), imageStyle: { height: 60, marginBottom: 15 }, description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "No emoji matches your keyword" }) }));
+        }
+        const list = listEmojiMemoized.slice(0, Math.min(visibleCount, listEmojiMemoized.length));
+        const content = list.map(emojiFileName => {
+            const src = getImageSourceViberEmoji(emojiFileName);
+            const [emoji] = emojiFileName.split('.');
+            const code = `(${emoji})`;
+            return (_jsx(Emoji, { type: "text", icon: _jsx(EmojiImage, { src: src, alt: emojiFileName }), onClick: () => onEmojiClick(code) }, emojiFileName));
+        });
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, listEmojiMemoized.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [listEmojiMemoized, visibleCount, onEmojiClick, onScroll]);
+    return (_jsx(WrapperCollection, { children: _jsxs(Flex, { vertical: true, children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), onChange: handleChangeInput }), _jsx(EmojiList, { children: renderViberCollection() })] }) }));
+};
+ViberCollection.defaultProps = {
+    onEmojiClick: () => { },
+};
+export default memo(ViberCollection);

package/es/components/molecules/EmojiCollections/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CommonCollection } from './CommonCollection';
+export { default as ViberCollection } from './ViberCollection';
+export { default as LineCollection } from './LineCollection';
+export * from './types';

package/es/components/molecules/EmojiCollections/index.js

@@ -0,0 +1,6 @@
+// Component
+export { default as CommonCollection } from './CommonCollection';
+export { default as ViberCollection } from './ViberCollection';
+export { default as LineCollection } from './LineCollection';
+// Types
+export * from './types';

package/es/components/molecules/EmojiCollections/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const WrapperCollection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const EmojiList: import("styled-components").StyledComponent<"section", any, {}, never>;
+export declare const Emoji: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {
+    $width?: number | undefined;
+    $height?: number | undefined;
+    $active?: boolean | undefined;
+}, never>;
+export declare const EmojiImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const EmptyEmoji: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Empty/Empty").IEmpty>, any, {}, never>;

package/es/components/molecules/EmojiCollections/styled.js

@@ -0,0 +1,35 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Empty } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const WrapperCollection = styled.section `
+  margin-top: 15px;
+`;
+export const EmojiList = styled.section `
+  margin-top: 20px;
+`;
+export const Emoji = styled(Button) `
+  width: ${({ $width }) => $width || 50}px !important;
+  min-width: ${({ $width }) => $width || 50}px !important;
+  height: ${({ $height }) => $height || 50}px !important;
+
+  ${({ $active }) => $active &&
+    css `
+      background-color: ${globalToken?.blue1_1} !important;
+    `}
+`;
+export const EmojiImage = styled.img `
+  width: 100%;
+  height: 100%;
+  max-width: 30px;
+`;
+export const EmptyEmoji = styled(Empty) `
+  min-height: 133px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;

package/es/components/molecules/EmojiCollections/types.d.ts

@@ -0,0 +1,3 @@
+export interface EmojiCollectionProps {
+    onEmojiClick: (newEmoji: string) => void;
+}

package/es/components/molecules/EmojiCollections/types.js

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

package/es/components/molecules/EmojiPopover/EmojiPopover.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type TagDataCustomize, type EmojiCollection } from '@antscorp/antsomi-ui/es/components/molecules';
+interface CollectionItemProps {
+    key: EmojiCollection;
+    label: React.ReactNode;
+}
+interface EmojiPopoverProps {
+    disabled?: boolean;
+    collections?: CollectionItemProps[];
+    isForceHide?: boolean;
+    children?: React.ReactNode;
+    onEmojiClick?: (emoji: string | TagDataCustomize) => void;
+}
+declare const _default: React.NamedExoticComponent<EmojiPopoverProps>;
+export default _default;

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { useImmer } from 'use-immer';
+// Styled & Components
+import { CommonCollection, LineCollection, ViberCollection } from '../EmojiCollections';
+import { EmojiBearIcon, EmojiLaughIcon, EmojiSmileIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { EMOJI_COLLECTIONS, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EmojiTabs, EmojiPopoverStyled } from './styled';
+// Utils
+import { handleGetTextToReplace } from './utils';
+const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, }) => {
+    const [state, setState] = useImmer({
+        isOpen: false,
+        collectionActive: collections ? collections[0]?.key : EMOJI_COLLECTIONS.COMMON,
+    });
+    const handleClickCollection = useCallback((newCollectionActive) => {
+        setState(draft => {
+            draft.collectionActive = newCollectionActive;
+        });
+    }, [setState]);
+    const handleGetCodeEmoji = useCallback((newEmoji) => {
+        setState(draft => {
+            const newTag = handleGetTextToReplace(draft.collectionActive, newEmoji);
+            if (typeof onEmojiClick === 'function') {
+                onEmojiClick(newTag);
+            }
+            if (isForceHide) {
+                draft.isOpen = false;
+                draft.collectionActive = EMOJI_COLLECTIONS.COMMON;
+            }
+        });
+    }, [onEmojiClick, isForceHide, setState]);
+    const handleOpenChange = useCallback((newOpen) => {
+        setState(draft => {
+            draft.isOpen = newOpen;
+        });
+    }, [setState]);
+    useEffect(() => () => {
+        setState(draft => {
+            draft.isOpen = false;
+            draft.collectionActive = EMOJI_COLLECTIONS.COMMON;
+        });
+    }, [setState]);
+    const renderCollection = useCallback((collectionCurrent = '') => {
+        switch (collectionCurrent) {
+            case EMOJI_COLLECTIONS.VIBER: {
+                return _jsx(ViberCollection, { onEmojiClick: handleGetCodeEmoji });
+            }
+            case EMOJI_COLLECTIONS.LINE: {
+                return _jsx(LineCollection, { onEmojiClick: handleGetCodeEmoji });
+            }
+            default: {
+                return _jsx(CommonCollection, { onEmojiClick: handleGetCodeEmoji });
+            }
+        }
+    }, [handleGetCodeEmoji]);
+    const emojiCollections = useMemo(() => {
+        if (!collections)
+            return [];
+        return collections.map((collection) => ({
+            key: collection.key,
+            label: collection.label,
+            children: renderCollection(collection.key),
+        }));
+    }, [collections, renderCollection]);
+    let content = (_jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }));
+    if (emojiCollections.length <= 1) {
+        content = emojiCollections.at(0)?.children;
+    }
+    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+};
+EmojiPopover.defaultProps = {
+    disabled: false,
+    isForceHide: false,
+    collections: [
+        { key: EMOJI_COLLECTIONS.COMMON, label: _jsx(EmojiSmileIcon, {}) },
+        { key: EMOJI_COLLECTIONS.VIBER, label: _jsx(EmojiLaughIcon, {}) },
+        { key: EMOJI_COLLECTIONS.LINE, label: _jsx(EmojiBearIcon, {}) },
+    ],
+    onEmojiClick: () => { },
+};
+export default memo(EmojiPopover);

package/es/components/molecules/EmojiPopover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmojiPopover } from './EmojiPopover';
+export * from './utils';

package/es/components/molecules/EmojiPopover/index.js

@@ -0,0 +1,2 @@
+export { default as EmojiPopover } from './EmojiPopover';
+export * from './utils';

package/es/components/molecules/EmojiPopover/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;
+export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
+}, any, {}, never>;

package/es/components/molecules/EmojiPopover/styled.js

@@ -0,0 +1,11 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
+export const EmojiTabs = styled(TabsUI) `
+  .antsomi-tabs-tab {
+    padding: 5.5px 20px !important;
+  }
+`;
+export const EmojiPopoverStyled = styled(Popover) ``;

package/es/components/molecules/EmojiPopover/utils.d.ts

@@ -0,0 +1,2 @@
+import { type EmojiCollection, type TagDataCustomize } from '@antscorp/antsomi-ui/es/components/molecules';
+export declare const handleGetTextToReplace: (typeEmoji: EmojiCollection, newEmoji?: string) => string | TagDataCustomize;

package/es/components/molecules/EmojiPopover/utils.js

@@ -0,0 +1,35 @@
+// Constants
+import { EMOJI_COLLECTIONS, TAG_TYPE, } from '@antscorp/antsomi-ui/es/components/molecules';
+export const handleGetTextToReplace = (typeEmoji, newEmoji = '') => {
+    try {
+        switch (typeEmoji) {
+            case EMOJI_COLLECTIONS.COMMON: {
+                return newEmoji;
+            }
+            case EMOJI_COLLECTIONS.VIBER: {
+                return {
+                    value: newEmoji,
+                    label: newEmoji,
+                    type: TAG_TYPE.EMOJI,
+                    collection: EMOJI_COLLECTIONS.VIBER,
+                };
+            }
+            case EMOJI_COLLECTIONS.LINE: {
+                return {
+                    value: newEmoji,
+                    label: newEmoji,
+                    type: TAG_TYPE.EMOJI,
+                    collection: EMOJI_COLLECTIONS.LINE,
+                };
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }
+    return '';
+};

package/es/components/molecules/EmptyData/EmptyData.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import React from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -22,18 +12,8 @@ import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
 import { EMPTY_ICON_SIZE } from './constants';
 const { Text } = Typography;
 export const EmptyData = props => {
-    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children } = props, restOfProps = __rest(props, ["size", "icon", "showIcon", "title", "subTitle", "description", "loading", "className", "image", "imageClassName", "imageStyle", "children"]);
-    return (React.createElement(EmptyWrapper, Object.assign({ className: className }, restOfProps),
-        React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
-            !!showIcon && (React.createElement(React.Fragment, null,
-                !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? (React.createElement(Icon, { type: icon })) : (React.cloneElement(icon, {
-                    size: EMPTY_ICON_SIZE[size],
-                })))),
-                image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
-                    React.createElement("img", { src: image, alt: "" }))))),
-            loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
-                title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
-                subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),
-                description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description))))),
-        children));
+    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children, ...restOfProps } = props;
+    return (_jsxs(EmptyWrapper, { className: className, ...restOfProps, children: [_jsxs(Flex, { vertical: true, align: "center", justify: "center", gap: 15, children: [!!showIcon && (_jsxs(_Fragment, { children: [!image && (_jsx(EmptyIcon, { className: "animate__animated animate__tada", "$size": size, children: isString(icon) ? (_jsx(Icon, { type: icon })) : (React.cloneElement(icon, {
+                                    size: EMPTY_ICON_SIZE[size],
+                                })) })), image && (_jsx(ImageWrapper, { className: imageClassName, style: imageStyle, children: _jsx("img", { src: image, alt: "" }) }))] })), loading ? (_jsx(Spin, { indicator: _jsx(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (_jsxs(Flex, { gap: 5, align: "center", justify: "center", vertical: true, children: [title && _jsx(Text, { className: "title animate__animated animate__fadeInUp", children: title }), subTitle && (_jsx(Text, { className: "subTitle animate__animated animate__fadeInUp", children: subTitle })), description && (_jsx(Text, { className: "description animate__animated animate__fadeInUp", children: description }))] }))] }), children] }));
 };