@antscorp/antsomi-ui 1.3.5-beta.831 → 1.3.5-beta.832

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

@@ -1,7 +1,7 @@
 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 { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import _ from 'lodash';
 // Components & Styled
@@ -18,6 +18,7 @@ const { Text } = Typography;
 const emojiListParsed = JSON.parse(JSON.stringify(ICON_EMOJI_COMMON));
 const CommonCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         collectionActive: SMILEYS_BODY,
         txtSearch: '',
@@ -47,10 +48,22 @@ const CommonCollection = ({ onEmojiClick }) => {
             });
         }
     }, [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;
+                return newCount;
+            });
+        }
+    }, []);
     const handleChangeSelect = useCallback((newCollection) => {
         setState(draft => {
             draft.collectionActive = newCollection;
         });
+        setVisibleCount(prev => prev + 10);
     }, [setState]);
     useEffect(() => () => {
         setState(() => ({
@@ -72,13 +85,14 @@ const CommonCollection = ({ onEmojiClick }) => {
             (_.isArray(emojiCollection) && emojiCollection.length === 0)) {
             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 content = emojiCollection.map((item) => {
+        const list = emojiCollection.slice(0, Math.min(visibleCount, emojiCollection.length));
+        const content = list.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 (_jsx(Scrollbars, { autoHeight: true, autoHeightMax: 150, onScroll: e => onScroll(e, emojiCollection.length), children: _jsx(Flex, { wrap: "wrap", children: content }) }));
+    }, [emojiCollection, visibleCount, onScroll, 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 = {

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

@@ -1,7 +1,7 @@
 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 { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
 import { useImmer } from 'use-immer';
 // Components & Styled
@@ -14,6 +14,7 @@ import { LINE_MESSAGE_EMOJIS, TAB_LINE_MESSAGE_EMOJIS } from './constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const LineCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         collectionActive: TAB_LINE_MESSAGE_EMOJIS[0]?.key || '',
     });
@@ -23,7 +24,19 @@ const LineCollection = ({ onEmojiClick }) => {
         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;
+                return newCount;
+            });
+        }
+    }, []);
     useEffect(() => () => {
         setState(draft => {
             draft.collectionActive = TAB_LINE_MESSAGE_EMOJIS[0]?.key || '';
@@ -40,13 +53,14 @@ const LineCollection = ({ onEmojiClick }) => {
         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 content = emojiList.map((emojiId) => {
+        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, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
-    }, [emojiList, state.collectionActive, onEmojiClick]);
+        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 = {

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

@@ -1,7 +1,7 @@
 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 { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useImmer } from 'use-immer';
 import _ from 'lodash';
 // Hooks
@@ -16,6 +16,7 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const listEmoji = Object.values(iconsViber);
 const ViberCollection = ({ onEmojiClick }) => {
     // States
+    const [visibleCount, setVisibleCount] = useState(40);
     const [state, setState] = useImmer({
         txtSearch: '',
     });
@@ -36,6 +37,17 @@ const ViberCollection = ({ onEmojiClick }) => {
             });
         }
     }, [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;
+                return newCount;
+            });
+        }
+    }, []);
     useEffect(() => () => {
         setState(draft => {
             draft.txtSearch = '';
@@ -45,14 +57,15 @@ const ViberCollection = ({ onEmojiClick }) => {
         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 content = listEmojiMemoized.map(emojiFileName => {
+        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, children: _jsx(Flex, { wrap: "wrap", children: content }) }));
-    }, [listEmojiMemoized, onEmojiClick]);
+        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 = {

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

@@ -66,7 +66,7 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
             children: renderCollection(collection.key),
         }));
     }, [collections, renderCollection]);
-    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), placement: "topLeft", trigger: "click", 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) })) }));
+    return (_jsx(EmojiPopoverStyled, { content: _jsx(EmojiTabs, { activeKey: state.collectionActive, onTabClick: handleClickCollection, items: emojiCollections }), 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,

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -17,7 +17,7 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectTextRange, isTagClickable, findURLInTextNodes, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, INVALID_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, SHORT_LINK, SHORT_LINK_PTN, defaultCssVariables, tagifyDefaultProps, } from './constants';
@@ -120,22 +120,34 @@ const TagifyInput = forwardRef((props, ref) => {
                     // If the last range is lost, need to select the last text node of the input
                     const { input: inputElement } = tagifyRef.current.DOM;
                     if (inputElement) {
-                        // Get all child nodes that are of type TEXT_NODE
-                        const textNodes = Array.from(inputElement.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
-                        // In case have text nodes
-                        // -> need to place the caret at the end of the last text
-                        if (textNodes.length) {
-                            const lastTextNode = textNodes[textNodes.length - 1];
-                            if (lastTextNode?.textContent) {
-                                const textNodeLength = lastTextNode.textContent.length;
+                        // Get all child nodes that are of type TEXT_NODE or ELEMENT_NODE with nodeName TAG
+                        const nodeList = Array.from(inputElement.childNodes).filter((node) => {
+                            if (node.nodeType === Node.ELEMENT_NODE) {
+                                return node.nodeName === 'TAG';
+                            }
+                            return node.nodeType === Node.TEXT_NODE;
+                        });
+                        if (nodeList.length && selection) {
+                            const lastNode = nodeList[nodeList.length - 1];
+                            // In case have the last text nodes
+                            // -> need to place the caret at the end of the last text
+                            if (lastNode.nodeType === Node.TEXT_NODE && lastNode?.textContent) {
+                                const textNodeLength = lastNode.textContent.length;
                                 // Place the caret at the end of the last text
-                                selectTextRange(lastTextNode, textNodeLength, textNodeLength);
+                                selectRange(lastNode, textNodeLength, textNodeLength);
+                                onSyncSelectionStateTagify();
+                            }
+                            else if (lastNode.nodeType === Node.ELEMENT_NODE && lastNode?.nodeName === 'TAG') {
+                                // In case no text nodes but have an element node
+                                const lastNodeExceptBrLength = inputElement.childNodes.length - 1; // Exclude the last <br>
+                                // Place the caret at the end of the last element node
+                                selectRange(inputElement, lastNodeExceptBrLength, lastNodeExceptBrLength);
                                 onSyncSelectionStateTagify();
                             }
                         }
                         else if (DOM?.scope?.classList?.contains(empty)) {
                             // In case no text nodes and the input is empty
-                            selectTextRange(inputElement, 0, 0);
+                            selectRange(inputElement, 0, 0);
                             onSyncSelectionStateTagify();
                         }
                     }

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

@@ -82,31 +82,34 @@ export declare const isValidTagType: (str: string) => boolean;
  */
 export declare const hasLineBreak: (str: string) => boolean;
 /**
- * Selects a range of text within a given text node.
+ * Selects a range of text within a given DOM node.
  *
- * @param {Node} textNode - The text node containing the text to be selected.
- * @param {number} start - The starting index of the selection within the text node.
- * @param {number} end - The ending index of the selection within the text node.
- *
- * @throws {Error} If there's an issue creating the range or applying the selection.
+ * @param {Node} node - The DOM node containing the text to be selected.
+ * @param {number} start - The starting index position of the selection.
+ * @param {number} end - The ending index position of the selection.
  *
  * @example
  * const paragraph = document.querySelector('p');
- * const textNode = paragraph.firstChild;
- * selectTextRange(textNode, 5, 10);
+ * if (paragraph.firstChild) {
+ *   selectRange(paragraph.firstChild, 5, 10);
+ * }
  *
  * @description
- * This function creates a new range from the given start and end positions within
- * the provided text node. It then applies this range to the current window selection,
- * effectively selecting the specified text. If any errors occur during this process,
- * they are caught and logged to the console along with the input parameters.
- *
- * Note: This function will only visually select the text. It does not copy the text
- * or perform any actions on it. The selection may not be visible if the containing
- * element is not focusable or if the browser prevents programmatic selection for
- * security reasons.
+ * Creates a new DOM Range from the given start and end positions within the provided node
+ * and applies it to the current window selection. This visually selects the specified
+ * portion of text in the browser.
+ *
+ * Important considerations:
+ * - The node should be a text node or a node that can contain text content
+ * - The start and end indices must be valid positions within the node's text content
+ * - The selection may not be visible if the containing element is not focusable
+ * - Some browsers may prevent programmatic selection for security reasons
+ * - Any errors during selection are caught and logged to the console
+ *
+ * Note that this function only creates a visual selection - it does not copy the text
+ * or modify it in any way.
  */
-export declare function selectTextRange(textNode: Node, start: number, end: number): void;
+export declare function selectRange(node: Node, start: number, end: number): void;
 /**
  * Determines whether a tag is clickable based on its properties and the Tagify instance settings.
  *

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

@@ -458,35 +458,38 @@ export const isValidTagType = (str) => Object.values(TAG_TYPE).includes(str);
  */
 export const hasLineBreak = (str) => str.includes('\n');
 /**
- * Selects a range of text within a given text node.
+ * Selects a range of text within a given DOM node.
  *
- * @param {Node} textNode - The text node containing the text to be selected.
- * @param {number} start - The starting index of the selection within the text node.
- * @param {number} end - The ending index of the selection within the text node.
- *
- * @throws {Error} If there's an issue creating the range or applying the selection.
+ * @param {Node} node - The DOM node containing the text to be selected.
+ * @param {number} start - The starting index position of the selection.
+ * @param {number} end - The ending index position of the selection.
  *
  * @example
  * const paragraph = document.querySelector('p');
- * const textNode = paragraph.firstChild;
- * selectTextRange(textNode, 5, 10);
+ * if (paragraph.firstChild) {
+ *   selectRange(paragraph.firstChild, 5, 10);
+ * }
  *
  * @description
- * This function creates a new range from the given start and end positions within
- * the provided text node. It then applies this range to the current window selection,
- * effectively selecting the specified text. If any errors occur during this process,
- * they are caught and logged to the console along with the input parameters.
- *
- * Note: This function will only visually select the text. It does not copy the text
- * or perform any actions on it. The selection may not be visible if the containing
- * element is not focusable or if the browser prevents programmatic selection for
- * security reasons.
+ * Creates a new DOM Range from the given start and end positions within the provided node
+ * and applies it to the current window selection. This visually selects the specified
+ * portion of text in the browser.
+ *
+ * Important considerations:
+ * - The node should be a text node or a node that can contain text content
+ * - The start and end indices must be valid positions within the node's text content
+ * - The selection may not be visible if the containing element is not focusable
+ * - Some browsers may prevent programmatic selection for security reasons
+ * - Any errors during selection are caught and logged to the console
+ *
+ * Note that this function only creates a visual selection - it does not copy the text
+ * or modify it in any way.
  */
-export function selectTextRange(textNode, start, end) {
+export function selectRange(node, start, end) {
     try {
         const range = document.createRange();
-        range.setStart(textNode, start);
-        range.setEnd(textNode, end);
+        range.setStart(node, start);
+        range.setEnd(node, end);
         const selection = window.getSelection();
         if (selection) {
             selection.removeAllRanges();
@@ -495,7 +498,7 @@ export function selectTextRange(textNode, start, end) {
     }
     catch (error) {
         // eslint-disable-next-line no-console
-        console.log('Error selecting text range', error, { textNode, start, end });
+        console.log('Error selecting range', error, { node, start, end });
     }
 }
 /**

package/es/locales/en/google-sheet.json

@@ -1288,7 +1288,7 @@
     "_TITL_TOTAL_TESTING_INPUT": "Total testing input",
     "_TITL_TRACKED_TIME": "Tracked time",
     "_TITL_TREAT_AS_CONVERSION_OBECJT": "Treat as Conversion Object",
-    "_TOOLTIP__TITL_TREAT_AS_CONVERSION_OBECJT": "Coi như đối tượng chuyển đổi",
+    "_TOOLTIP__TITL_TREAT_AS_CONVERSION_OBECJT": "Loading...",
     "_TITL_TRIGGER_EVENT": "{{trigger_event_name}}, where:",
     "_TITL_TRIGGER_TIME": "Trigger time",
     "_TITL_UNTITLED_MEASURE": "Untitled Measure",