@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -538,21 +538,21 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         const additionalTagAttrs = getAttributesString(additionalAttributes);
-        return `
-        <tag
-          contenteditable='false'
-          spellcheck='false'
-          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
-          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
-          ${tagify.getAttributes(tagData)}
-          ${additionalTagAttrs}
-        >
-          ${closeIcon}
-
+        return `
+        <tag
+          contenteditable='false'
+          spellcheck='false'
+          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
+          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+          ${tagify.getAttributes(tagData)}
+          ${additionalTagAttrs}
+        >
+          ${closeIcon}
+
           ${generateTagContent({
             tagData,
             content: visibleTagContent,
-        })}
+        })}
         </tag>`;
     }, []);
     /*
@@ -900,44 +900,44 @@ const TagifyInput = forwardRef((props, ref) => {
         if (!tagifyTooltip) {
             const style = document.createElement('style');
             style.type = 'text/css';
-            style.appendChild(document.createTextNode(`
-          .tagify__tooltip {
-            display: none;
-            position: fixed;
-            background-color: #595959;
-            border-radius: 10px;
-            color: #ffffff;
-            padding: 6px;
-            z-index: 10000;
-            max-width: 280px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-          }
-
-          .tagify__tooltip_content {
-            width: 100%;
-            max-width: 250px;
-            height: auto;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-            line-height: 16px;
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-          }
-
-          .tagify__tooltip_content:before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 50%;
-            left: auto;
-            background-color: #595959;
-            width: 10px;
-            height: 10px;
-            transform: rotate(45deg) translate(50%,-50%);
-            border-radius: 1px;
-          }
+            style.appendChild(document.createTextNode(`
+          .tagify__tooltip {
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          }
+
+          .tagify__tooltip_content {
+            width: 100%;
+            max-width: 250px;
+            height: auto;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+          }
+
+          .tagify__tooltip_content:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 50%;
+            left: auto;
+            background-color: #595959;
+            width: 10px;
+            height: 10px;
+            transform: rotate(45deg) translate(50%,-50%);
+            border-radius: 1px;
+          }
         `));
             document.head.appendChild(style);
             const tooltipWrapper = document.createElement('div');

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

@@ -5,49 +5,49 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MIN_H_WRAPPER } from './constants';
 // Utils
 import { getBackgroundInputStatus, getTagifyInputStyled, getTagifyStyled, getTagifyTagStyled, } from './utils.style';
-export const WrapperPlaceHolder = styled.div `
+export const WrapperPlaceHolder = styled.div `
   ${({ $isShow }) => $isShow
-    ? css `
-          display: block;
-          float: right;
-          min-height: ${MIN_H_WRAPPER}px;
+    ? css `
+          display: block;
+          float: right;
+          min-height: ${MIN_H_WRAPPER}px;
         `
-    : css `
-          display: none;
-        `};
+    : css `
+          display: none;
+        `};
 `;
-export const TagifyWrapper = styled.div `
-  cursor: text;
-  background: ${globalToken?.bw0};
-  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
-  min-height: ${MIN_H_WRAPPER}px;
-  width: 100%;
-
-  &::after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-
-  .tagify {
+export const TagifyWrapper = styled.div `
+  cursor: text;
+  background: ${globalToken?.bw0};
+  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
+  min-height: ${MIN_H_WRAPPER}px;
+  width: 100%;
+
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .tagify {
     ${({ $cssTagifyVariables }) => $cssTagifyVariables &&
     Object.entries($cssTagifyVariables)
         .map(([key, value]) => `${key}: ${value};`)
-        .join('\n')}
-
-    // --- Section tagify style ---
-    ${getTagifyStyled}
-
-    // --- Section input style ---
-    &__input {
-      ${getTagifyInputStyled}
-    }
-
-    // --- Section tag style ---
-    &__tag {
-      ${getTagifyTagStyled}
-    }
-  }
+        .join('\n')}
+
+    // --- Section tagify style ---
+    ${getTagifyStyled}
+
+    // --- Section input style ---
+    &__input {
+      ${getTagifyInputStyled}
+    }
+
+    // --- Section tag style ---
+    &__tag {
+      ${getTagifyTagStyled}
+    }
+  }
 `;
 export const TagInput = styled.input ``;
 export const TagTextArea = styled.textarea ``;

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

@@ -379,15 +379,15 @@ export const emojiManufacturer = (text, collectionType) => {
         return [];
     }
 };
-export const getEmojiTag = ({ src, emoji, code }) => `
-  <img
-    src="${src}"
-    data-emoji="${emoji}"
-    data-emoji-code="${code}"
-    alt="${emoji}"
-    width="16px"
-    height="16px"
-    style="transform: translateY(3.5px); cursor: text;"
+export const getEmojiTag = ({ src, emoji, code }) => `
+  <img
+    src="${src}"
+    data-emoji="${emoji}"
+    data-emoji-code="${code}"
+    alt="${emoji}"
+    width="16px"
+    height="16px"
+    style="transform: translateY(3.5px); cursor: text;"
   />`;
 export const isPersonalizeTagType = (type) => [
     CUSTOMER,
@@ -418,10 +418,10 @@ export const generateTagContent = (params) => {
     dataAttrs.forEach((value, key) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
-    return `
-    <div ${dataAttrsString}>
-      ${content}
-    </div>
+    return `
+    <div ${dataAttrsString}>
+      ${content}
+    </div>
   `;
 };
 /**