@antscorp/antsomi-ui 1.3.6-beta.71 → 1.3.6-beta.72

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

@@ -520,21 +520,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>`;
     }, []);
     /*
@@ -959,35 +959,35 @@ 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: 5px;
-              z-index: 10000
-          }
-          .tagify__tooltip_content {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-          }
-          .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: 5px;
+              z-index: 10000
+          }
+          .tagify__tooltip_content {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+          }
+          .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

@@ -381,15 +381,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,
@@ -483,10 +483,10 @@ export const generateTagContent = (params) => {
     dataAttrs.forEach((value, key) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
-    return `
-    <div ${dataAttrsString} class="tagify__tag-content">
-      ${content}
-    </div>
+    return `
+    <div ${dataAttrsString} class="tagify__tag-content">
+      ${content}
+    </div>
   `;
 };
 /**

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

@@ -4,41 +4,41 @@ import { isString } from 'lodash';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { DETECT_LINK, EMOJI, ERROR_TAG, MIN_H_WRAPPER, READONLY_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, WARNING_TAG, TAG_TYPE_LIST, PREPARING_ST, } from './constants';
-export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
+export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   ${$maxHeight &&
-    css `
-    max-height: ${$maxHeight}px;
-    overflow-y: auto;
-  `}
-
-  &:not(.tagify--empty) {
+    css `
+    max-height: ${$maxHeight}px;
+    overflow-y: auto;
+  `}
+
+  &:not(.tagify--empty) {
     ${$tagifyFullWidth &&
-    css `
-      width: 100%;
-    `}
-  }
-
-  /* Setting for readonly */
-  &[readonly] {
-    .tagify__tag {
-      &__removeBtn {
-        display: none !important;
-      }
-    }
-  }
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  min-height: ${MIN_H_WRAPPER}px;
-  float: left;
-  border: none;
-  font-size: var(--input-font-size);
-  background: transparent;
+    css `
+      width: 100%;
+    `}
+  }
+
+  /* Setting for readonly */
+  &[readonly] {
+    .tagify__tag {
+      &__removeBtn {
+        display: none !important;
+      }
+    }
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: ${MIN_H_WRAPPER}px;
+  float: left;
+  border: none;
+  font-size: var(--input-font-size);
+  background: transparent;
 `;
-export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceholder, $isSingleLineText, }) => css `
-  // Because $placeholder depends on $minWidth to display
-  ${css `
+export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceholder, $isSingleLineText, }) => css `
+  // Because $placeholder depends on $minWidth to display
+  ${css `
     min-width: ${(() => {
     // Primary check for $minWidth
     if ($minWidth) {
@@ -50,24 +50,24 @@ export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceho
     }
     // Fallback value
     return 'unset';
-})()} !important;
-  `}
-
+})()} !important;
+  `}
+
   ${$isSingleLineText &&
-    css `
-    white-space: nowrap;
-    overflow: auto;
-
-    br {
-      display: none;
-    }
-
-    div,
-    p {
-      display: inline-block;
-      white-space: nowrap;
-    }
-  `}
+    css `
+    white-space: nowrap;
+    overflow: auto;
+
+    br {
+      display: none;
+    }
+
+    div,
+    p {
+      display: inline-block;
+      white-space: nowrap;
+    }
+  `}
 `;
 const getBackgroundColor = (tag) => {
     const { type } = tag;
@@ -97,182 +97,182 @@ const backgroundStyles = TAG_TYPE_LIST.map(type => {
     const background = getBackgroundColor({ type });
     if (!background)
         return '';
-    return `
-    &[data-tag-type~='${type}'] {
-      background: ${background};
-    }
-
-    &[data-priority-color-type~='${type}'][data-bg-color-personalize-type~='${type}'] {
-      background: ${background};
-    }
+    return `
+    &[data-tag-type~='${type}'] {
+      background: ${background};
+    }
+
+    &[data-priority-color-type~='${type}'][data-bg-color-personalize-type~='${type}'] {
+      background: ${background};
+    }
   `;
 }).join(' ');
-export const getStyledTags = () => `
-    // For case unknown tag
-    &[data-tag-type]:not(:is(
-      ${tagListString}
-    )) {
-      background: ${globalToken?.accent7};
-    };
-
-    ${backgroundStyles}
-
-    &[data-tag-type~='${EMOJI}'],
-    &[data-tag-type~='${DETECT_LINK}'] {
-      padding: 0;
-    };
-
-    &[data-tag-type~='${DETECT_LINK}'] {
-      border-radius: unset;
-      max-height: fit-content;
-
-      .tagify__tag-text {
-        max-width: fit-content;
-        white-space: normal;
-      }
-    };
-
-    &[data-tag-type~='${TAG_TYPE.SHORT_LINK}'] {
-      &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
+export const getStyledTags = () => `
+    // For case unknown tag
+    &[data-tag-type]:not(:is(
+      ${tagListString}
+    )) {
+      background: ${globalToken?.accent7};
+    };
+
+    ${backgroundStyles}
+
+    &[data-tag-type~='${EMOJI}'],
+    &[data-tag-type~='${DETECT_LINK}'] {
+      padding: 0;
+    };
+
+    &[data-tag-type~='${DETECT_LINK}'] {
+      border-radius: unset;
+      max-height: fit-content;
+
+      .tagify__tag-text {
+        max-width: fit-content;
+        white-space: normal;
+      }
+    };
+
+    &[data-tag-type~='${TAG_TYPE.SHORT_LINK}'] {
+      &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
         background: ${getBackgroundColor({
     type: TAG_TYPE.SHORT_LINK,
     shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
-})};
-      };
-
-      &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
+})};
+      };
+
+      &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
         background: ${getBackgroundColor({
     type: TAG_TYPE.SHORT_LINK,
     shortlinkType: SHORT_LINK_TYPE.GENERAL,
-})};
-      };
-    }
-    
-    &[data-tag-type~='${TAG_TYPE.SHORT_LINK_V2}'] {
-      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
+})};
+      };
+    }
+    
+    &[data-tag-type~='${TAG_TYPE.SHORT_LINK_V2}'] {
+      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
         background: ${getBackgroundColor({
     type: TAG_TYPE.SHORT_LINK_V2,
     shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
-})};
-      };
-
-      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
+})};
+      };
+
+      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
         background: ${getBackgroundColor({
     type: TAG_TYPE.SHORT_LINK_V2,
     shortlinkType: SHORT_LINK_TYPE.GENERAL,
-})};
-      };
-    }
+})};
+      };
+    }
   `;
-export const getTagifyTagStyled = (_wrapperProps) => css `
-  &[type='${DETECT_LINK}'] {
-    max-width: fit-content;
-    height: fit-content;
-  }
-
-  &[${READONLY_TAG}='true'],
-  &[${PREPARING_ST}='true'] {
-    cursor: not-allowed;
-  }
-
-  &[${ERROR_TAG}='true'] {
+export const getTagifyTagStyled = (_wrapperProps) => css `
+  &[type='${DETECT_LINK}'] {
+    max-width: fit-content;
+    height: fit-content;
+  }
+
+  &[${READONLY_TAG}='true'],
+  &[${PREPARING_ST}='true'] {
+    cursor: not-allowed;
+  }
+
+  &[${ERROR_TAG}='true'] {
     ${({ $tagErrorIcon }) => $tagErrorIcon &&
-    css `
-        > div {
-          padding-right: 22px;
-          position: relative;
-
-          > span {
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 5px;
-              transform: translateY(calc(-50%));
-              width: 14px;
-              height: 14px;
-              display: inline-block;
-              background-image: url(${$tagErrorIcon});
-              background-size: contain;
-              background-repeat: no-repeat;
-            }
-          }
-        }
-        > div[data-tag-type] {
-          background-color: white !important;
-          border: 1px solid red;
-        }
-      `}
-  }
-
-  &[${WARNING_TAG}='true'] {
+    css `
+        > div {
+          padding-right: 22px;
+          position: relative;
+
+          > span {
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 5px;
+              transform: translateY(calc(-50%));
+              width: 14px;
+              height: 14px;
+              display: inline-block;
+              background-image: url(${$tagErrorIcon});
+              background-size: contain;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+        > div[data-tag-type] {
+          background-color: white !important;
+          border: 1px solid red;
+        }
+      `}
+  }
+
+  &[${WARNING_TAG}='true'] {
     ${({ $tagInvalidIcon }) => $tagInvalidIcon &&
-    css `
-        > div {
-          padding-right: 22px;
-          position: relative;
-
-          > span {
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 5px;
-              transform: translateY(calc(-50%));
-              width: 14px;
-              height: 14px;
-              display: inline-block;
-              background-image: url(${$tagInvalidIcon});
-              background-size: contain;
-              background-repeat: no-repeat;
-            }
-          }
-        }
-        > div[data-tag-type] {
-          background-color: white !important;
-          border: 1px solid red;
-        }
-      `}
-  }
-
-  height: ${TAG_H}px;
-  cursor: pointer;
-
-  > div {
-    max-height: ${TAG_H}px;
-    align-items: center;
-
-    /* Set background color for selected tags */
-    ${getStyledTags()}
-
-    > * {
-      white-space: nowrap;
-    }
-  }
-
-  &__removeBtn {
-    transition: all 0.2s ease;
-    position: absolute;
-    top: 50%;
-    right: 0px;
-    transform: translateY(-50%);
-    width: 16px;
-    height: 16px;
-    font-size: 16px;
-    line-height: 16px;
-    font-family: ${globalToken?.fontFamily};
-
-    display: none;
-
-    &:hover {
-      color: ${globalToken?.colorPrimary};
-    }
-  }
-
-  &:hover .tagify__tag__removeBtn {
-    display: flex;
-    z-index: 100;
-  }
+    css `
+        > div {
+          padding-right: 22px;
+          position: relative;
+
+          > span {
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 5px;
+              transform: translateY(calc(-50%));
+              width: 14px;
+              height: 14px;
+              display: inline-block;
+              background-image: url(${$tagInvalidIcon});
+              background-size: contain;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+        > div[data-tag-type] {
+          background-color: white !important;
+          border: 1px solid red;
+        }
+      `}
+  }
+
+  height: ${TAG_H}px;
+  cursor: pointer;
+
+  > div {
+    max-height: ${TAG_H}px;
+    align-items: center;
+
+    /* Set background color for selected tags */
+    ${getStyledTags()}
+
+    > * {
+      white-space: nowrap;
+    }
+  }
+
+  &__removeBtn {
+    transition: all 0.2s ease;
+    position: absolute;
+    top: 50%;
+    right: 0px;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    font-family: ${globalToken?.fontFamily};
+
+    display: none;
+
+    &:hover {
+      color: ${globalToken?.colorPrimary};
+    }
+  }
+
+  &:hover .tagify__tag__removeBtn {
+    display: flex;
+    z-index: 100;
+  }
 `;
 export const getBackgroundInputStatus = (status) => {
     switch (status) {