@antscorp/antsomi-ui 1.3.5-beta.784 → 1.3.5-beta.785

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

@@ -21,8 +21,7 @@ import { acceptablePatternChecking, getCachedRegex, getPersonalizeTagInfo, patte
 import { EMOJI, PERSONALIZE_PTN, SHORT_LINK, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, readonly, disabled, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
-    console.count('------------ re-render ------------');
+    const { initialValue, status, readonly, disabled, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 450);
     // Refs
@@ -86,10 +85,23 @@ const TagifyInput = forwardRef((props, ref) => {
                 // Check readonly
                 if (readonly)
                     return;
+                const currentTagData = tagifyRef.current.getSetTagData(currentTagEle);
+                const currentTagValue = currentTagData?.value;
+                const newTagValue = newTag.value;
+                const spaceEle = tagifyRef.current.insertAfterTag(currentTagEle, '\u00A0'); //  <- adds space after the tag to keep valid caret positioning
                 tagifyRef.current.replaceTag(currentTagEle, newTag);
+                // Only update data if value is changed
+                if (currentTagValue !== newTagValue) {
+                    // Change data out
+                    const inputValue = tagifyRef.current.getInputValue();
+                    const convertedValue = convertInputStringToOriginal(inputValue);
+                    onChange(convertedValue);
+                }
+                tagifyRef.current.placeCaretAfterNode(spaceEle); // <- restore the caret after the edited tag
             }
         },
     }), [onChange]);
+    console.log('tagifyRef', tagifyRef);
     const onTagItemClick = useCallback((event) => {
         if (event.detail && onTagClick) {
             const { tagify } = event.detail;
@@ -291,7 +303,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, []);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
+    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
 });
 TagifyInput.defaultProps = tagifyDefaultProps;
 export default memo(TagifyInput);

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

@@ -1,12 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import { useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 export const useSettingsTagify = (tagifyInstance, settings) => {
     const { readonly, disabled, placeholder, maxPersonalizeTags } = settings;
     // Set read only
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (tagifyInstance && typeof readonly !== 'undefined') {
             tagifyInstance.setReadonly(readonly);
+            console.log('newReadonly', readonly, tagifyInstance);
         }
     }, [readonly]);
     // Set disabled

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

@@ -1,9 +1,10 @@
-import type { TagifyInputProps } from './types';
+import type { StatusType, TagifyInputProps } from './types';
 export declare const WrapperPlaceHolder: import("styled-components").StyledComponent<"div", any, {
     $isShow?: boolean | undefined;
 }, never>;
 export declare const TagifyWrapper: import("styled-components").StyledComponent<"div", any, {
     $cssTagifyVariables?: TagifyInputProps['cssTagifyVariables'];
+    $status?: StatusType | undefined;
 }, never>;
 export declare const TagInput: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const TagTextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MIN_H_WRAPPER, TAG_H } from './constants';
 // Utils
-import { getStyledTags } from './utils';
+import { getBackgroundInputStatus, getStyledTags } from './utils';
 export const WrapperPlaceHolder = styled.div `
   ${({ $isShow }) => $isShow
     ? css `
@@ -17,7 +17,7 @@ export const WrapperPlaceHolder = styled.div `
 `;
 export const TagifyWrapper = styled.div `
   background: ${globalToken?.bw0};
-  border-bottom: 1px solid ${globalToken?.blue1 || '#B8CFE6'};
+  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
   min-height: ${MIN_H_WRAPPER}px;
   width: 100%;
 

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

@@ -3,6 +3,7 @@
 import { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
 import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_TYPE } from './constants';
 export type MapAttributesProps = Record<string, Record<string, any>>;
+export type StatusType = 'error' | 'success' | 'warning';
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -37,6 +38,7 @@ export interface TagifyInputProps {
      * Helps enforce constraints by limiting the number of tags a user can input.
      */
     maxPersonalizeTags?: TagifySettings['maxTags'];
+    status?: StatusType;
     /**
      * Defines acceptable patterns or validation rules for tags.
      * Ensures only tags matching specified patterns can be added, enforcing content rules.

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

@@ -1,4 +1,4 @@
-import { AcceptablePattern, EmojiCollection, EmojiTag, TagType } from './types';
+import { AcceptablePattern, EmojiCollection, EmojiTag, StatusType, TagType } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -45,3 +45,4 @@ export declare const emojiManufacturer: (text: string, collectionType: EmojiColl
 export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
 export declare const getStyledTags: () => string;
 export declare const isPersonalizeTagType: (type: TagType) => boolean;
+export declare const getBackgroundInputStatus: (status?: StatusType) => string;

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

@@ -3,6 +3,7 @@ import stringReplaceToArray from 'string-replace-to-array';
 // Constants
 import { CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
 import { iconsViber } from './iconsViber';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { acceptablePatternChecking, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
 /**
@@ -327,3 +328,16 @@ export const getStyledTags = () => {
     return styledTags.join('');
 };
 export const isPersonalizeTagType = (type) => [CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, OBJECT_WIDGET, CUSTOM_FN].includes(type);
+export const getBackgroundInputStatus = (status) => {
+    switch (status) {
+        case 'error':
+            return globalToken?.colorError || '#EF3340';
+        case 'warning':
+            return globalToken?.colorWarning || '#faad14';
+        case 'success':
+            return globalToken?.colorSuccess || '#12B800';
+        default: {
+            return globalToken?.blue1 || '#B8CFE6';
+        }
+    }
+};

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/es/locales/en/google-sheet.json

@@ -2642,5 +2642,5 @@
     "_COOKIE_DM_INSTRUCTION_1_DES_1": "This is the base domain for all subdomains you want to track. ",
     "_COOKIE_DM_INSTRUCTION_1_DES_2": "Example: {{x}}",
     "_COOKIE_DM_INSTRUCTION_2_SUM": "Configure the Cookie Domain:",
-    "_COOKIE_DM_INSTRUCTION_2_DES_1": "Input {{x}} to track data across all subdomains (eg: shop.antsomi.com or blog.antsomi.com)"
+    "_COOKIE_DM_INSTRUCTION_2_DES_1": "Input {{x}} to track data across all subdomains (eg: {{y}} or {{y}})"
 }