@antscorp/antsomi-ui 1.3.5-beta.774 → 1.3.5-beta.775

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/EmojiCollections/CommonCollection/constants.d.ts

@@ -0,0 +1,53 @@
+export declare const COMMON_COLLECTION_KEYS: {
+    readonly SMILEYS_BODY: "smileys_body";
+    readonly ANIMALS_NATURE: "animals_nature";
+    readonly FOOD_DRINK: "food_drink";
+    readonly TRAVEL_PLACES: "travel_places";
+    readonly ACTITVITIES: "activities";
+    readonly OBJECTS: "objects";
+    readonly SYMBOLS: "symbols";
+    readonly FLAGS: "flags";
+};
+export declare const SMILEYS_BODY: "smileys_body", ANIMALS_NATURE: "animals_nature", FOOD_DRINK: "food_drink", TRAVEL_PLACES: "travel_places", ACTITVITIES: "activities", OBJECTS: "objects", SYMBOLS: "symbols", FLAGS: "flags";
+export declare const COMMON_TAB_COLLECTION: {
+    readonly smileys_body: {
+        readonly value: "smileys_body";
+        readonly label: "Smileys & Body";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly animals_nature: {
+        readonly value: "animals_nature";
+        readonly label: "Animals & Nature";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly food_drink: {
+        readonly value: "food_drink";
+        readonly label: "Food & Drink";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly travel_places: {
+        readonly value: "travel_places";
+        readonly label: "Travel & Places";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly activities: {
+        readonly value: "activities";
+        readonly label: "Activities";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly objects: {
+        readonly value: "objects";
+        readonly label: "Objects";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly symbols: {
+        readonly value: "symbols";
+        readonly label: "Symbols";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+    readonly flags: {
+        readonly value: "flags";
+        readonly label: "Flags";
+        readonly icon: import("react/jsx-runtime").JSX.Element;
+    };
+};

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmojiAirportShuttleIcon, EmojiBallIcon, EmojiElectricBoltIcon, EmojiFlagIcon, EmojiLightBulbIcon, EmojiPetFootIcon, EmojiRamenDiningIcon, EmojiReactionIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+export const COMMON_COLLECTION_KEYS = {
+    SMILEYS_BODY: 'smileys_body',
+    ANIMALS_NATURE: 'animals_nature',
+    FOOD_DRINK: 'food_drink',
+    TRAVEL_PLACES: 'travel_places',
+    ACTITVITIES: 'activities',
+    OBJECTS: 'objects',
+    SYMBOLS: 'symbols',
+    FLAGS: 'flags',
+};
+export const { SMILEYS_BODY, ANIMALS_NATURE, FOOD_DRINK, TRAVEL_PLACES, ACTITVITIES, OBJECTS, SYMBOLS, FLAGS, } = COMMON_COLLECTION_KEYS;
+export const COMMON_TAB_COLLECTION = {
+    [SMILEYS_BODY]: {
+        value: SMILEYS_BODY,
+        label: 'Smileys & Body',
+        icon: _jsx(EmojiReactionIcon, {}),
+    },
+    [ANIMALS_NATURE]: {
+        value: ANIMALS_NATURE,
+        label: 'Animals & Nature',
+        icon: _jsx(EmojiPetFootIcon, {}),
+    },
+    [FOOD_DRINK]: {
+        value: FOOD_DRINK,
+        label: 'Food & Drink',
+        icon: _jsx(EmojiRamenDiningIcon, {}),
+    },
+    [TRAVEL_PLACES]: {
+        value: TRAVEL_PLACES,
+        label: 'Travel & Places',
+        icon: _jsx(EmojiAirportShuttleIcon, {}),
+    },
+    [ACTITVITIES]: {
+        value: ACTITVITIES,
+        label: 'Activities',
+        icon: _jsx(EmojiBallIcon, {}),
+    },
+    [OBJECTS]: {
+        value: OBJECTS,
+        label: 'Objects',
+        icon: _jsx(EmojiLightBulbIcon, {}),
+    },
+    [SYMBOLS]: {
+        value: SYMBOLS,
+        label: 'Symbols',
+        icon: _jsx(EmojiElectricBoltIcon, {}),
+    },
+    [FLAGS]: {
+        value: FLAGS,
+        label: 'Flags',
+        icon: _jsx(EmojiFlagIcon, {}),
+    },
+};

package/es/components/molecules/EmojiCollections/CommonCollection/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/CommonCollection/index.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { useImmer } from 'use-immer';
+import _ from 'lodash';
+// Components & Styled
+import { Emoji, EmojiList, WrapperCollection } from '../styled';
+import { Empty, Flex, Input, Scrollbars, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ICON_EMOJI_COMMON, Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { EmojiSmileIcon, SearchIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+// Constants
+import { COMMON_TAB_COLLECTION, SMILEYS_BODY } from './constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { Text } = Typography;
+const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
+const CommonCollection = ({ onEmojiClick }) => {
+    // States
+    const [state, setState] = useImmer({
+        collectionActive: SMILEYS_BODY,
+        txtSearch: '',
+    });
+    const txtSearchDebounce = useDebounce(state.txtSearch, 300);
+    // Memoizations
+    const collectionOptions = useMemo(() => Object.values(COMMON_TAB_COLLECTION), []);
+    const emojiCollection = useMemo(() => {
+        if (!_.isArray(emojiListParsed))
+            return [];
+        const listFiltered = emojiListParsed.filter(item => item.slug === state.collectionActive);
+        let result = _.get(listFiltered, '[0].emojis', []);
+        if (txtSearchDebounce) {
+            result = result.filter(item => {
+                const { emoji = '', name = '' } = item;
+                const isEmoji = emoji.toLowerCase().includes(txtSearchDebounce.toLowerCase());
+                const isName = name.toLowerCase().includes(txtSearchDebounce.toLowerCase());
+                return isEmoji || isName;
+            });
+        }
+        return result;
+    }, [state.collectionActive, txtSearchDebounce]);
+    const handleChangeInput = useCallback((e) => {
+        if (e.target) {
+            setState(draft => {
+                draft.txtSearch = e.target.value.trim();
+            });
+        }
+    }, [setState]);
+    const handleChangeSelect = useCallback((newCollection) => {
+        setState(draft => {
+            draft.collectionActive = newCollection;
+        });
+    }, [setState]);
+    useEffect(() => () => {
+        setState(() => ({
+            collectionActive: SMILEYS_BODY,
+            txtSearch: '',
+        }));
+    }, [setState]);
+    const renderOption = useCallback((rawOption) => {
+        const icon = _.get(rawOption, 'data.icon', null);
+        return (_jsxs(Flex, { gap: 6, align: "center", children: [_jsx("span", { style: {
+                        color: globalToken?.bw8,
+                        fontSize: '20px',
+                        display: 'flex',
+                        alignItems: 'center',
+                    }, children: icon }), _jsx(Text, { style: { color: globalToken?.colorText }, children: rawOption?.label })] }));
+    }, []);
+    const renderCommonCollection = useCallback(() => {
+        if (!_.isArray(emojiCollection) ||
+            (_.isArray(emojiCollection) && emojiCollection.length === 0)) {
+            return (_jsx(Empty, { image: _jsx(EmojiSmileIcon, { width: 30, height: 30, color: globalToken?.bw8 }), description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "Emoji not found" }) }));
+        }
+        const content = emojiCollection.map((item) => {
+            const { emoji, slug = '', unicode_version: unicodeVersion = '' } = item;
+            const key = `${slug}-${unicodeVersion}`;
+            return (_jsx(Emoji, { type: "text", onClick: () => onEmojiClick(emoji), children: _jsx("span", { style: { fontSize: '30px' }, children: emoji }) }, key));
+        });
+        return (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiCollection, onEmojiClick]);
+    return (_jsxs(WrapperCollection, { children: [_jsxs(Flex, { gap: 20, justify: "space-between", align: "flex-end", children: [_jsx(Input, { placeholder: "Search...", suffix: _jsx(SearchIcon, { color: globalToken?.bw8 }), styles: { affixWrapper: { minWidth: 280 } }, onChange: handleChangeInput }), _jsx(Select, { placeholder: "Select collection", value: state.collectionActive, style: { width: 200 }, options: collectionOptions, optionRender: renderOption, onChange: handleChangeSelect })] }), _jsx(EmojiList, { children: renderCommonCollection() })] }));
+};
+CommonCollection.defaultProps = {
+    onEmojiClick: () => { },
+};
+export default memo(CommonCollection);

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

@@ -0,0 +1,138 @@
+export declare const PRODUCT_ID_EMOJIS: readonly [{
+    readonly id: "5ac2213e040ab15980c9b447";
+    readonly total: 182;
+}, {
+    readonly id: "5ac21a8c040ab15980c9b43f";
+    readonly total: 149;
+}, {
+    readonly id: "5ac21c4e031a6752fb806d5b";
+    readonly total: 161;
+}, {
+    readonly id: "5ac21e6c040ab15980c9b444";
+    readonly total: 222;
+}, {
+    readonly id: "5ac1bfd5040ab15980c9b435";
+    readonly total: 250;
+}, {
+    readonly id: "5ac22e85040ab15980c9b44f";
+    readonly total: 209;
+}, {
+    readonly id: "5ac22775040ab15980c9b44c";
+    readonly total: 247;
+}, {
+    readonly id: "5ac2197b040ab15980c9b43d";
+    readonly total: 201;
+}, {
+    readonly id: "5ac21d59031a6752fb806d5d";
+    readonly total: 212;
+}, {
+    readonly id: "5ac221ca040ab15980c9b449";
+    readonly total: 167;
+}, {
+    readonly id: "5ac22bad031a6752fb806d67";
+    readonly total: 214;
+}, {
+    readonly id: "5ac2211e031a6752fb806d61";
+    readonly total: 250;
+}, {
+    readonly id: "5ac21b4f031a6752fb806d59";
+    readonly total: 149;
+}, {
+    readonly id: "5ac21cce040ab15980c9b443";
+    readonly total: 161;
+}, {
+    readonly id: "5ac21fda040ab15980c9b446";
+    readonly total: 140;
+}, {
+    readonly id: "5ac22224031a6752fb806d62";
+    readonly total: 251;
+}, {
+    readonly id: "5ac22c9e031a6752fb806d68";
+    readonly total: 198;
+}, {
+    readonly id: "5ac222bf031a6752fb806d64";
+    readonly total: 250;
+}, {
+    readonly id: "5ac21869040ab15980c9b43b";
+    readonly total: 199;
+}, {
+    readonly id: "5ac2280f031a6752fb806d65";
+    readonly total: 250;
+}, {
+    readonly id: "5ac22293031a6752fb806d63";
+    readonly total: 184;
+}, {
+    readonly id: "5ac2173d031a6752fb806d56";
+    readonly total: 240;
+}, {
+    readonly id: "5ac21542031a6752fb806d55";
+    readonly total: 248;
+}, {
+    readonly id: "5ac2216f040ab15980c9b448";
+    readonly total: 188;
+}, {
+    readonly id: "5ac21f52040ab15980c9b445";
+    readonly total: 183;
+}, {
+    readonly id: "5ac21ef5031a6752fb806d5e";
+    readonly total: 150;
+}, {
+    readonly id: "5ac223c6040ab15980c9b44a";
+    readonly total: 157;
+}, {
+    readonly id: "5ac22b23040ab15980c9b44d";
+    readonly total: 247;
+}, {
+    readonly id: "5ac22def040ab15980c9b44e";
+    readonly total: 250;
+}, {
+    readonly id: "5ac21c46040ab15980c9b442";
+    readonly total: 221;
+}, {
+    readonly id: "5ac22d62031a6752fb806d69";
+    readonly total: 196;
+}, {
+    readonly id: "5ac21a13031a6752fb806d57";
+    readonly total: 149;
+}, {
+    readonly id: "5ac21a18040ab15980c9b43e";
+    readonly total: 239;
+}, {
+    readonly id: "5ac21ba5040ab15980c9b441";
+    readonly total: 161;
+}, {
+    readonly id: "5ac2264e040ab15980c9b44b";
+    readonly total: 252;
+}, {
+    readonly id: "5ac2206d031a6752fb806d5f";
+    readonly total: 252;
+}, {
+    readonly id: "5ac220c2031a6752fb806d60";
+    readonly total: 246;
+}, {
+    readonly id: "5ac22a8c031a6752fb806d66";
+    readonly total: 210;
+}, {
+    readonly id: "5ac1de17040ab15980c9b438";
+    readonly total: 194;
+}, {
+    readonly id: "5ac21bf9031a6752fb806d5a";
+    readonly total: 161;
+}, {
+    readonly id: "5ac21cc5031a6752fb806d5c";
+    readonly total: 170;
+}, {
+    readonly id: "5ac21ae3040ab15980c9b440";
+    readonly total: 149;
+}, {
+    readonly id: "5ac218e3040ab15980c9b43c";
+    readonly total: 221;
+}, {
+    readonly id: "5ac21184040ab15980c9b43a";
+    readonly total: 234;
+}];
+export declare const TAB_LINE_MESSAGE_EMOJIS: readonly {
+    key: "5ac2213e040ab15980c9b447" | "5ac21a8c040ab15980c9b43f" | "5ac21c4e031a6752fb806d5b" | "5ac21e6c040ab15980c9b444" | "5ac1bfd5040ab15980c9b435" | "5ac22e85040ab15980c9b44f" | "5ac22775040ab15980c9b44c" | "5ac2197b040ab15980c9b43d" | "5ac21d59031a6752fb806d5d" | "5ac221ca040ab15980c9b449" | "5ac22bad031a6752fb806d67" | "5ac2211e031a6752fb806d61" | "5ac21b4f031a6752fb806d59" | "5ac21cce040ab15980c9b443" | "5ac21fda040ab15980c9b446" | "5ac22224031a6752fb806d62" | "5ac22c9e031a6752fb806d68" | "5ac222bf031a6752fb806d64" | "5ac21869040ab15980c9b43b" | "5ac2280f031a6752fb806d65" | "5ac22293031a6752fb806d63" | "5ac2173d031a6752fb806d56" | "5ac21542031a6752fb806d55" | "5ac2216f040ab15980c9b448" | "5ac21f52040ab15980c9b445" | "5ac21ef5031a6752fb806d5e" | "5ac223c6040ab15980c9b44a" | "5ac22b23040ab15980c9b44d" | "5ac22def040ab15980c9b44e" | "5ac21c46040ab15980c9b442" | "5ac22d62031a6752fb806d69" | "5ac21a13031a6752fb806d57" | "5ac21a18040ab15980c9b43e" | "5ac21ba5040ab15980c9b441" | "5ac2264e040ab15980c9b44b" | "5ac2206d031a6752fb806d5f" | "5ac220c2031a6752fb806d60" | "5ac22a8c031a6752fb806d66" | "5ac1de17040ab15980c9b438" | "5ac21bf9031a6752fb806d5a" | "5ac21cc5031a6752fb806d5c" | "5ac21ae3040ab15980c9b440" | "5ac218e3040ab15980c9b43c" | "5ac21184040ab15980c9b43a";
+    value: string;
+}[];
+export declare const LINE_MESSAGE_EMOJIS: Readonly<{}>;

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

@@ -0,0 +1,209 @@
+/* eslint-disable consistent-return */
+// Utils
+import { getLinkLineURLImage } from '@antscorp/antsomi-ui/es/components/molecules/TagifyInput';
+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,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import _ from 'lodash';
+import { useImmer } from 'use-immer';
+// Components & Styled
+import { Emoji, EmojiList, EmojiImage, WrapperCollection } from '../styled';
+import { Empty, 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, TAB_LINE_MESSAGE_EMOJIS } from './constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const LineCollection = ({ onEmojiClick }) => {
+    // States
+    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;
+        });
+    }, [setState]);
+    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(Empty, { image: _jsx(EmojiSmileIcon, { width: 50, height: 50, color: globalToken?.bw8 }), description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "Emoji not found" }) }));
+        }
+        const content = emojiList.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, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiList, state.collectionActive, onEmojiClick]);
+    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,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-param-reassign */
+// Libraries
+import { memo, useCallback, useEffect, useMemo } 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, WrapperCollection } from '../styled';
+import { Empty, 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 ViberCollection = ({ onEmojiClick }) => {
+    // States
+    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]);
+    useEffect(() => () => {
+        setState(draft => {
+            draft.txtSearch = '';
+        });
+    }, [setState]);
+    const renderViberCollection = useCallback(() => {
+        if (_.isArray(listEmojiMemoized) && !listEmojiMemoized.length) {
+            return (_jsx(Empty, { image: _jsx(EmojiSmileIcon, { width: 30, height: 30, color: globalToken?.bw8 }), description: _jsx("span", { style: { color: globalToken?.bw8 }, children: "Emoji not found" }) }));
+        }
+        const content = listEmojiMemoized.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, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [listEmojiMemoized, onEmojiClick]);
+    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);