@antscorp/antsomi-ui 1.3.5-beta.926 → 1.3.5-beta.928

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/TagifyInput/TagifyInput.js

@@ -26,6 +26,7 @@ const TagifyInput = forwardRef((props, ref) => {
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
+    const [labelTagRefreshness, setLabelTagRefreshness] = useState(1);
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -84,7 +85,8 @@ const TagifyInput = forwardRef((props, ref) => {
                 throw new Error('Tagify instance is not initialized');
             }
             const { scope } = tagifyRef.current?.DOM;
-            const isValidSelection = isAnchorNodeChildOfElement(scope);
+            const anchorNodeInstance = _.get(tagifyRef.current, 'state.selection.anchorNode', null);
+            const isValidSelection = isAnchorNodeChildOfElement(scope, anchorNodeInstance);
             if (isValidSelection) {
                 const selection = window.getSelection();
                 if (!selection?.rangeCount)
@@ -113,17 +115,20 @@ const TagifyInput = forwardRef((props, ref) => {
             }
             const { settings, DOM } = tagifyRef.current;
             const rangeInstance = _.get(tagifyRef.current, 'state.selection.range', null);
+            const anchorNodeInstance = _.get(tagifyRef.current, 'state.selection.anchorNode', null);
             const { empty } = settings.classNames;
-            const isValidSelection = isAnchorNodeChildOfElement(DOM.scope);
+            const isValidAnchor = isAnchorNodeChildOfElement(DOM.scope, anchorNodeInstance);
             const selection = window.getSelection();
+            const isValidRange = selection?.rangeCount && rangeInstance;
+            const hasValidSelection = isValidRange && isValidAnchor;
             // In case not have the selection yet or lost the selection,
-            if (!selection?.rangeCount || !isValidSelection || !rangeInstance) {
+            if (!hasValidSelection) {
                 // need to restore the last range before inject a new tag if the last range exists
                 if (lastRange.current) {
                     selection?.removeAllRanges();
                     selection?.addRange(lastRange.current);
                 }
-                else {
+                else if (!isValidRange) {
                     // If the last range is lost, need to select the last text node of the input
                     const { input: inputElement } = tagifyRef.current.DOM;
                     if (inputElement) {
@@ -426,6 +431,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyRef.current.loadOriginalValues(newContent);
             }
         },
+        onLabelTagRefreshness() {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            setLabelTagRefreshness(prev => prev + 1);
+        },
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -518,7 +529,7 @@ const TagifyInput = forwardRef((props, ref) => {
      * Any map attribute change will sync label of the tags
      */
     const makeValidLabelTags = useCallback((attributes, errorAttributes) => {
-        if (tagifyRef.current) {
+        if (tagifyRef.current && labelTagRefreshness) {
             const tagElements = tagifyRef.current.getTagElms();
             const { pattern, name: cachePatternName, acceptablePattern: acceptableType, } = patternHandlers[PERSONALIZE_PTN];
             tagElements.forEach(tagElement => {
@@ -633,7 +644,7 @@ const TagifyInput = forwardRef((props, ref) => {
             });
             setTooltipRefresher(prev => prev + 1);
         }
-    }, [acceptableTagPattern]);
+    }, [acceptableTagPattern, labelTagRefreshness]);
     const initializeTagify = useCallback(() => {
         if (inputRef.current && !tagifyRef.current) {
             tagifyRef.current = new Tagify(inputRef.current, {

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

@@ -130,6 +130,7 @@ export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
     onReload: (newValue: string) => void;
+    onLabelTagRefreshness: () => void;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];

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

@@ -180,6 +180,7 @@ export declare const getAttributesString: (map: Map<string, string | boolean | n
  * is a child of a specific DOM element.
  *
  * @param {HTMLElement} element - The parent element to check against
+ * @param {HTMLElement} anchorNodeInstance - The anchor node of the Tagify instance
  * @returns {boolean} True if the anchor node is a child of the element, false otherwise
  */
-export declare const isAnchorNodeChildOfElement: (element: Node) => boolean;
+export declare const isAnchorNodeChildOfElement: (element: Node, anchorNodeInstance: Node | null) => boolean;

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

@@ -628,9 +628,10 @@ export const getAttributesString = (map) => Array.from(map.entries())
  * is a child of a specific DOM element.
  *
  * @param {HTMLElement} element - The parent element to check against
+ * @param {HTMLElement} anchorNodeInstance - The anchor node of the Tagify instance
  * @returns {boolean} True if the anchor node is a child of the element, false otherwise
  */
-export const isAnchorNodeChildOfElement = (element) => {
+export const isAnchorNodeChildOfElement = (element, anchorNodeInstance) => {
     // Get the current selection
     const selection = window.getSelection();
     // Check if there's an active selection
@@ -644,5 +645,5 @@ export const isAnchorNodeChildOfElement = (element) => {
         return false;
     }
     // Use Node.contains() to check if the element contains the anchor node
-    return element.contains(anchorNode);
+    return element.contains(anchorNode) && element.contains(anchorNodeInstance);
 };

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,5 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

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