@antscorp/antsomi-ui 2.0.101 → 2.0.103

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, INVALID_TAG, MIN_H_WRAPPER, NO_VIEW_TAG, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, } 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,25 +50,25 @@ 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;
-        overflow: auto
-        overflow-y: hidden;
-      }
-`}
+    css `
+      white-space: nowrap;
+      overflow: auto;
+
+      br {
+        display: none;
+      }
+
+      div, p {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: auto
+        overflow-y: hidden;
+      }
+`}
 `;
 export const getStyledTags = () => {
     const getBackgroundColor = (tag) => {
@@ -100,193 +100,193 @@ export const getStyledTags = () => {
         const background = getBackgroundColor({ type });
         if (!background)
             return '';
-        return `
-        &[data-tag-type~='${type}'] {
-          background: ${getBackgroundColor({ type })};
-        };
+        return `
+        &[data-tag-type~='${type}'] {
+          background: ${getBackgroundColor({ type })};
+        };
       `;
     })
         .join(' ');
-    return `
-    // For case unknown tag
-    &[data-tag-type]:not(:is(
-      ${tagTypes.map(tagType => `[data-tag-type~='${tagType}']`).join(',')}
-    )) {
-      background: ${globalToken?.accent7};
-    };
-
-    ${backgroundStyles}
-
-    &[data-tag-type~='${EMOJI}'],
-    &[data-tag-type~='${DETECT_LINK}'] {
-      padding: 0;
-    };
-
-    &[data-tag-type~='${TAG_TYPE.SHORT_LINK}'] {
-      &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
+    return `
+    // For case unknown tag
+    &[data-tag-type]:not(:is(
+      ${tagTypes.map(tagType => `[data-tag-type~='${tagType}']`).join(',')}
+    )) {
+      background: ${globalToken?.accent7};
+    };
+
+    ${backgroundStyles}
+
+    &[data-tag-type~='${EMOJI}'],
+    &[data-tag-type~='${DETECT_LINK}'] {
+      padding: 0;
+    };
+
+    &[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 `
-  &[${READONLY_TAG}='true'] {
-    cursor: not-allowed;
-  }
-
-  &[${REMOVED_TAG}='true'] {
+export const getTagifyTagStyled = (_wrapperProps) => css `
+  &[${READONLY_TAG}='true'] {
+    cursor: not-allowed;
+  }
+
+  &[${REMOVED_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;
-        }
-      `}
-  }
-  &[${NO_VIEW_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;
+        }
+      `}
+  }
+  &[${NO_VIEW_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;
-        }
-      `}
-  }
-
-  &[${INVALID_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(${$tagInvalidIcon});
+              background-size: contain;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+        > div[data-tag-type] {
+          background-color: white !important;
+          border: 1px solid red;
+        }
+      `}
+  }
+
+  &[${INVALID_TAG}='true'] {
     ${({ $tagInvalidIcon }) => $tagInvalidIcon &&
-    css `
-        > div {
-          padding-right: 22px;
-          position: relative;
-
-          > span {
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 5px;
-              transform: translateY(calc(-50% - 1px));
-              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% - 1px));
+              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) {

package/es/components/molecules/TemplateSaveAs/components/Category/Category.js

@@ -4,11 +4,11 @@ import { Tooltip, Button, Flex, Typography, Dropdown } from '@antscorp/antsomi-u
 import Icon from '@antscorp/icons';
 const { Text } = Typography;
 /* Styled Components */
-const DropdownMenuContent = styled.div `
-  > ul {
-    max-height: 400px;
-    overflow: auto;
-  }
+const DropdownMenuContent = styled.div `
+  > ul {
+    max-height: 400px;
+    overflow: auto;
+  }
 `;
 export const Category = props => {
     const { categoryKey, categoryChildren, label, selected, onRemoveCategory, onAddCategory } = props;