forstok-ui-lib 8.7.0 → 8.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.7.0",
+  "version": "8.7.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/javascripts/function.ts

@@ -1269,3 +1269,17 @@ export const getFileType = (file?: File | null): string => {
       return mimeType.includes("application/") ? "document" : "";
   }
 };
+
+export function capitalizeWords(text: string, ignoreWords = []): string {
+  const ignoreSet = new Set<string>(ignoreWords);
+
+  return text.replace(/\S+/g, (word, offset) => {
+    const lower = word.toLowerCase();
+
+    if (ignoreSet.has(lower) && offset !== 0) {
+      return lower;
+    }
+
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+  });
+}

package/src/assets/stylesheets/bases.styles.ts

@@ -1,24 +1,24 @@
-import { css } from 'styled-components'
+import { css } from "styled-components";
 
-import IconEditWhite from '../../assets/images/icons/edit-white.svg'
-import IconLoadingRed from '../../assets/images/icons/loading-red.svg'
+import IconEditWhite from "../../assets/images/icons/edit-white.svg";
+import IconLoadingRed from "../../assets/images/icons/loading-red.svg";
 
 export const clearList = css`
   list-style: none;
   padding: 0;
   margin: 0;
-`
-export const responseWidth = css `
+`;
+export const responseWidth = css`
   width: 100%;
-`
-export const elipsis = css `
+`;
+export const elipsis = css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
   max-width: 100%;
   width: auto;
-`
+`;
 export const multiElipsis = css`
   display: -webkit-box !important;
   -webkit-line-clamp: 2;
@@ -28,7 +28,7 @@ export const multiElipsis = css`
   overflow-wrap: anywhere;
   word-break: break-all;
   line-height: 16px;
-`
+`;
 export const thirdElipsis = css`
   display: -webkit-box !important;
   -webkit-line-clamp: 3 !important;
@@ -38,46 +38,55 @@ export const thirdElipsis = css`
   overflow-wrap: anywhere !important;
   word-break: break-word !important;
   line-height: 16px;
-`
+`;
 export const dropBase = css`
   background-color: var(--sec-clr-bg);
   border: 1px solid var(--sec-clr-ln);
   box-shadow: var(--sec-shd-bx);
   border-radius: var(--sec-rd);
-`
+`;
 export const headTable = css`
   font-size: 12px;
   font-weight: 600;
   text-transform: capitalize;
-`
+`;
 export const formLabel = css`
   color: var(--hd-clr);
   font-weight: 600;
   font-size: 13px;
   text-transform: capitalize;
-`
+`;
 export const buttonStyle = css`
   border: none;
-  border-radius: .5rem;
-  box-shadow: 0rem -.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .1) inset, 0rem .03125rem 0rem .09375rem #FFF inset;
+  border-radius: 0.5rem;
+  box-shadow:
+    0rem -0.0625rem 0rem 0rem #b5b5b5 inset,
+    0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset,
+    0rem 0.03125rem 0rem 0.09375rem #fff inset;
   color: rgba(74, 74, 74, 1);
   cursor: pointer;
   user-select: none;
   touch-action: manipulation;
-  background-color: #ffffff; 
-`
+  background-color: #ffffff;
+`;
 export const buttonHoverStyle = css`
   color: rgba(48, 48, 48, 1);
   background-color: rgba(250, 250, 250, 1);
-`
+`;
 export const buttonActiveStyle = css`
   color: rgba(48, 48, 48, 1);
   background: rgba(247, 247, 247, 1);
-  box-shadow: -.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset;
-`
+  box-shadow:
+    -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;
+`;
 export const buttonActiveShadowStyle = css`
-  box-shadow: -.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset;
-`
+  box-shadow:
+    -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset,
+    0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;
+`;
 export const commonCSSLists = css`
   .table-image-figure {
     display: block;
@@ -89,7 +98,9 @@ export const commonCSSLists = css`
     border: 1px solid var(--pri-clr-ln);
     background-color: var(--pri-clr-bg);
     border-radius: var(--ter-rd);
-    &.edit, &.add, &.loading {
+    &.edit,
+    &.add,
+    &.loading {
       width: 70px;
       height: 70px;
       cursor: pointer;
@@ -113,10 +124,10 @@ export const commonCSSLists = css`
       }
     }
     &.edit {
-      border: 1px solid rgba(0, 0, 0, .04);
+      border: 1px solid rgba(0, 0, 0, 0.04);
       &:hover {
         position: relative;
-        span { 
+        span {
           width: 100%;
           height: 100%;
           position: absolute;
@@ -125,7 +136,7 @@ export const commonCSSLists = css`
           z-index: 1;
           background-color: var(--ov-clr-bg);
         }
-        &::after { 
+        &::after {
           content: url(${IconEditWhite});
           height: 14px;
           width: 14px;
@@ -140,9 +151,9 @@ export const commonCSSLists = css`
       }
     }
     &.loading {
-      border: 1px solid rgba(0, 0, 0, .04);
+      border: 1px solid rgba(0, 0, 0, 0.04);
       cursor: default;
-      &::after { 
+      &::after {
         content: url(${IconLoadingRed});
         height: 14px;
         width: 14px;
@@ -163,19 +174,7 @@ export const commonCSSLists = css`
     }
   }
   .remove {
-    font-style: normal;
-    position: absolute;
     top: -6px;
     right: -6px;
-    background: #000;
-    color: var(--sec-clr);
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    padding: 3px 5px;
-    font-weight: 600;
-    font-size: 7px;
-    z-index: 1;
-    cursor: pointer;
   }
-`
+`;

package/src/components/upload/drag.drop.tsx

@@ -277,7 +277,7 @@ const UploadDragDropComponent = ({
               </UploadDragDropFilePreviewCard>
               {evRemove !== undefined && (
                 <i
-                  className="remove"
+                  className="remove-button remove"
                   onClick={handleRemove}
                   title="Remove File"
                 >

package/src/components/upload/styles.tsx

@@ -117,23 +117,6 @@ export const UploadDragDropImagePreview = styled.div`
     object-fit: cover;
     border-radius: 4px;
   }
-  .remove {
-    font-style: normal;
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    background: #444;
-    color: var(--sec-clr);
-    border-radius: 50%;
-    width: 15px;
-    height: 15px;
-    padding: 3px 5px;
-    font-weight: 700;
-    font-size: 8px;
-    z-index: 1;
-    cursor: pointer;
-    line-height: 9px;
-  }
 `;
 export const UploadDragDropFilePreviewCard = styled.div<{
   $backgroundSrc?: string;