@antscorp/antsomi-ui 2.0.45 → 2.0.47

package/es/components/molecules/ProcessLoading/ProcessLoading.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 // Atoms
 import { Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Molecules
 import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
 import { ProcessLoadingContent } from './styled';
@@ -17,7 +19,10 @@ export const ProcessLoading = ({ ...restProps }) => {
     const { second = 7, message: timeOutMessage = (_jsxs("div", { children: ["This might take a little longer than usual. ", _jsx("br", {}), "Thank you for waiting!"] })), show: showTimeOutMessage = true, } = timeout || {};
     // Effects
     /* Base timeout second to show timeout message */
-    useEffect(() => {
+    useDeepCompareEffect(() => {
+        if (timeoutShowAlert && timeoutShowAlert.current) {
+            clearTimeout(timeoutShowAlert.current);
+        }
         if (open) {
             timeoutShowAlert.current = setTimeout(() => {
                 setShowAlert(true);

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

@@ -84,7 +84,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 +114,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) {

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

@@ -179,6 +179,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

@@ -434,7 +434,7 @@ export const generateTagContent = (params) => {
  * unescapeString('Hello "world" with spaces');
  * // returns 'Hello "world" with spaces'
  */
-export const unescapeString = (str) => str.replace(/"| |nbsp;|'/gm, (match) => {
+export const unescapeString = (str) => str.replace(/"| |nbsp;|'|&/gm, (match) => {
     switch (match) {
         case ''':
             return "'";
@@ -443,6 +443,8 @@ export const unescapeString = (str) => str.replace(/"| |nbsp;|'/g
         case ' ':
         case 'nbsp;':
             return ' ';
+        case '&':
+            return '&';
         default:
             return match;
     }
@@ -622,9 +624,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
@@ -638,5 +641,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/package.json

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