@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.8

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, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, extractTagValues, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
@@ -25,7 +25,7 @@ const { CUSTOM_TAG } = TAG_TYPE;
 const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, readonlyWhenNotEmpty, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, readonlyWhenNotEmpty, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onAddTag, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -471,7 +471,7 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [onTagClick]);
     const onTagifyRemoveTag = useCallback((event) => {
         if (event.detail && onTagRemove) {
-            onTagRemove(event.detail);
+            onTagRemove(event.detail, extractTagValues(event.detail.tagify));
         }
     }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
@@ -780,14 +780,10 @@ const TagifyInput = forwardRef((props, ref) => {
             const hasContent = cleanValue.length > 0;
             inputEl.setAttribute('contenteditable', hasContent ? 'false' : 'true');
         }
-        else if (typeof readonlyText === 'function') {
-            const isReadonlyText = readonlyText(tagifyRef.current.getCleanValue());
-            inputEl.setAttribute('contenteditable', isReadonlyText ? 'false' : 'true');
-        }
         else if (typeof readonlyText !== 'undefined') {
             inputEl.setAttribute('contenteditable', readonlyText ? 'false' : 'true');
         }
-    }, [readonlyText, readonlyWhenNotEmpty, tagLength]);
+    }, [readonlyText, readonlyWhenNotEmpty]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -874,8 +870,11 @@ const TagifyInput = forwardRef((props, ref) => {
                     try {
                         node.dataset.__removed_by_mutation = 'true';
                         const tagData = tagifyRef.current?.getSetTagData(node);
-                        if (tagData && tagData.type === CUSTOM_TAG && !tagData?.__removed) {
-                            onTagRemove({ data: tagData });
+                        if (tagifyRef.current &&
+                            tagData &&
+                            tagData.type === CUSTOM_TAG &&
+                            !tagData?.__removed) {
+                            onTagRemove({ data: tagData }, extractTagValues(tagifyRef.current));
                         }
                     }
                     catch (error) {
@@ -987,6 +986,8 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('change', onTagifyChangedDebounce);
             tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (onAddTag)
+                tagifyInstance.on('add', onAddTag);
             if (onBlur)
                 tagifyInstance.on('blur', onBlur);
         }
@@ -998,11 +999,14 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('remove', onTagifyRemoveTag);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (onAddTag)
+                    tagifyInstance.off('add', onAddTag);
                 if (onBlur)
                     tagifyInstance.off('blur', onBlur);
             }
         };
     }, [
+        onAddTag,
         onBlur,
         onTagItemClick,
         onInputTagifyDebounce,

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

@@ -15,6 +15,10 @@ export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
+export interface TagValues {
+    listTags: TagDataCustomize[];
+    value: string;
+}
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -134,11 +138,16 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is added.
+     * Receives the tag detail as parameter, allowing custom actions on tag addition.
+     */
+    onAddTag?: (event: CustomEvent<Tagify.AddEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when a tag is removed.
      * Receives the tag detail as parameter, allowing custom actions on tag removal.
      */
-    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>, values: TagValues) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -159,7 +168,7 @@ export interface TagifyInputProps {
     /**
      * Defines whether the input text is read but not the whole tags.
      */
-    readonlyText?: boolean | ((listTags: TagDataCustomize[]) => boolean);
+    readonlyText?: boolean;
     /**
      * When true, automatically sets the input text to readonly (contenteditable='false')
      * when the input is not empty (has tags or content).

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

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType, TagValues } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -202,3 +202,4 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare const extractTagValues: (tagify: Tagify<TagDataCustomize>) => TagValues;

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

@@ -796,3 +796,11 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export const extractTagValues = (tagify) => {
+    if (!tagify)
+        return { listTags: [], value: '' };
+    return {
+        listTags: tagify.getCleanValue(),
+        value: tagify.getInputValue(),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.7",
+  "version": "1.3.7-beta.8",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -14,6 +14,9 @@
     "es",
     "dist"
   ],
+  "engines": {
+    "node": "20.x"
+  },
   "main": "es/index.js",
   "module": "es/index.js",
   "unpkg": "dist/index.js",