@antscorp/antsomi-ui 2.0.78 → 2.0.80

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -126,5 +126,5 @@ export const DrawerDetail = props => {
                     onClose(e);
                 }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
                     ...(!showMenu && { background: '#ffffff' }),
-                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { "data-test": "close-btn", onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
+                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { "data-test": "close-btn", ...restOfCloseIcon, onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
 import { useRef, useEffect, useCallback, useMemo, memo, forwardRef, useImperativeHandle, useLayoutEffect, useState, } from 'react';
 import _ from 'lodash';
@@ -16,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, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCaretAtEndOfTextNodeWithNextTag, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, defaultCssVariables, tagifyDefaultProps, } from './constants';
@@ -47,6 +48,12 @@ const TagifyInput = forwardRef((props, ref) => {
         return content;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    const onInputDebounceCallback = useCallback(_.debounce((callback, event) => {
+        callback(event);
+    }, 350), []);
+    const onChangeDebounceCallback = useCallback(_.debounce((callback, event) => {
+        callback(event);
+    }, 500), []);
     const onSyncSelectionStateTagify = useCallback(() => {
         try {
             if (!tagifyRef.current) {
@@ -455,6 +462,10 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
     }, [realtime, detectReplaceURLToTag, onOutputData]);
+    const onInputTagifyDebounce = useCallback(_.partial(onInputDebounceCallback, onTagifyTyping), [
+        onInputDebounceCallback,
+        onTagifyTyping,
+    ]);
     /**
      * Capture to trigger when tagify changed
      */
@@ -469,6 +480,22 @@ const TagifyInput = forwardRef((props, ref) => {
             onOutputData(convertedValue);
         }
     }, [onOutputData]);
+    const onTagifyChangedDebounce = useCallback(_.partial(onChangeDebounceCallback, onTagifyChanged), [onTagifyChanged, onChangeDebounceCallback]);
+    const onKeyDown = useCallback((e) => {
+        if (e.detail.event.key !== 'Enter' ||
+            e.detail.event.shiftKey ||
+            !isCaretAtEndOfTextNodeWithNextTag())
+            return;
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        const currentNode = range.endContainer;
+        const cacheEndOffset = range.endOffset;
+        currentNode.textContent += ' ';
+        range.setEnd(currentNode, cacheEndOffset);
+        range.collapse(false);
+    }, []);
     const customizeTag = useCallback((tagData, tagify) => {
         const { value, collection, label, type } = tagData;
         const { settings } = tagify;
@@ -791,28 +818,22 @@ const TagifyInput = forwardRef((props, ref) => {
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
-        let onInputTagifyDebounce;
-        let onTagifyChangedDebounce;
         if (tagifyInstance) {
-            onInputTagifyDebounce = _.debounce(onTagifyTyping, 350);
-            onTagifyChangedDebounce = _.debounce(onTagifyChanged, 500);
             tagifyInstance.on('click', onTagItemClick);
             tagifyInstance.on('input', onInputTagifyDebounce);
             tagifyInstance.on('change', onTagifyChangedDebounce);
+            tagifyInstance.on('keydown', onKeyDown);
         }
         // Off listen to Tagify events
         return () => {
             if (tagifyInstance) {
                 tagifyInstance.off('click', onTagItemClick);
-                if (onInputTagifyDebounce) {
-                    tagifyInstance.off('input', onInputTagifyDebounce);
-                }
-                if (onTagifyChangedDebounce) {
-                    tagifyInstance.off('change', onTagifyChangedDebounce);
-                }
+                tagifyInstance.off('input', onInputTagifyDebounce);
+                tagifyInstance.off('change', onTagifyChangedDebounce);
+                tagifyInstance.off('keydown', onKeyDown);
             }
         };
-    }, [onTagItemClick, onTagifyTyping, onTagifyChanged]);
+    }, [onTagItemClick, onInputTagifyDebounce, onTagifyChangedDebounce, onKeyDown]);
     // At the first render, need to update URL to tag to show hint in the tooltip with tag
     useEffect(() => {
         detectReplaceURLToTag();

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

@@ -1,5 +1,5 @@
 /// <reference types="yaireo__tagify" />
-import { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
+import Tagify, { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
 import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_TYPE } from './constants';
 import { type CSSProperties } from 'react';
 export type MapAttributesProps = Record<string, Record<string, any>>;
@@ -196,3 +196,4 @@ export interface TagifyWrapperProps {
     $placeholder?: string;
     $isSingleLineText?: TagifyInputProps['isSingleLineText'];
 }
+export type CustomEventTagify = CustomEvent<Tagify.InputEventData<TagDataCustomize>> | CustomEvent<Tagify.ChangeEventData<TagDataCustomize>>;

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

@@ -184,3 +184,4 @@ export declare const getAttributesString: (map: Map<string, string | boolean | n
  * @returns {boolean} True if the anchor node is a child of the element, false otherwise
  */
 export declare const isAnchorNodeChildOfElement: (element: Node, anchorNodeInstance: Node | null) => boolean;
+export declare function isCaretAtEndOfTextNodeWithNextTag(): boolean;

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

@@ -649,3 +649,22 @@ export const isAnchorNodeChildOfElement = (element, anchorNodeInstance) => {
     // Use Node.contains() to check if the element contains the anchor node
     return element.contains(anchorNode) && element.contains(anchorNodeInstance);
 };
+export function isCaretAtEndOfTextNodeWithNextTag() {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return false;
+    const range = selection.getRangeAt(0);
+    const { startContainer, startOffset } = range;
+    // Check if caret is inside a text node
+    if (startContainer.nodeType !== Node.TEXT_NODE)
+        return false;
+    const textNode = startContainer;
+    // Check if caret is at the end of the text node
+    if (startOffset !== textNode.length)
+        return false;
+    // Now check if the next sibling is a tag (element node)
+    const { nextSibling } = textNode;
+    if (!nextSibling)
+        return false;
+    return nextSibling.nodeType === Node.ELEMENT_NODE && nextSibling.nodeName === 'TAG';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.78",
+  "version": "2.0.80",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",