forstok-ui-lib 8.5.21 → 8.5.23

package/package.json

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

package/src/assets/images/icons/layers.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto">
+<path d="M0 0 C2.74316437 1.00055714 5.48911175 1.993339 8.23519993 2.98583794 C11.57542654 4.19359139 14.91389875 5.4061619 18.25231934 6.61889648 C19.45900772 7.0566037 20.66569611 7.49431091 21.90895081 7.94528198 C25.44569902 9.23799238 28.97366463 10.55164358 32.49841309 11.87670898 C33.49101702 12.24530407 33.49101702 12.24530407 34.50367355 12.62134552 C36.54561318 13.38359305 38.58091376 14.16159424 40.61535645 14.94360352 C42.43467934 15.63487839 42.43467934 15.63487839 44.29075623 16.34011841 C48.87387744 18.53560913 51.89263257 21.54298181 54.49841309 25.87670898 C56.49216196 31.85795561 56.49749885 38.5510492 53.81091309 44.31420898 C50.95419577 49.75725473 46.06356061 52.3080656 40.46496582 54.33105469 C39.26858994 54.76863602 38.07221405 55.20621735 36.83958435 55.65705872 C35.53713948 56.12242924 34.23461134 56.58756673 32.93200684 57.05249023 C31.57429676 57.54486157 30.21688518 58.03805669 28.85975647 58.5320282 C25.28172139 59.83171556 21.69955833 61.11963639 18.11645508 62.40527344 C14.54379357 63.68969555 10.9754625 64.98602989 7.40661621 66.28100586 C-0.55539273 69.16698188 -8.52631859 72.02760088 -16.50158691 74.87670898 C-17.58542664 75.26437439 -18.66926636 75.65203979 -19.78594971 76.05145264 C-22.59447998 77.05387232 -25.40484451 78.05086653 -28.21643066 79.04467773 C-29.00385147 79.3253157 -29.79127228 79.60595367 -30.60255432 79.89509583 C-55.16396009 88.51358917 -78.35409902 76.64407901 -101.27587891 68.09002686 C-105.09402552 66.66647426 -108.91498057 65.25048125 -112.73566151 63.83374786 C-115.71154324 62.73017933 -118.6868445 61.62511365 -121.66093445 60.51672363 C-122.74618912 60.11280396 -123.83144379 59.70888428 -124.94958496 59.29272461 C-126.01357513 58.89545166 -127.07756531 58.49817871 -128.17379761 58.08886719 C-130.52706692 57.2316811 -132.89154866 56.40498736 -135.26321411 55.60009766 C-136.50179169 55.17768799 -137.74036926 54.75527832 -139.01647949 54.32006836 C-140.69934807 53.75999084 -140.69934807 53.75999084 -142.41621399 53.18859863 C-147.47989972 51.03553738 -151.16317551 47.98391215 -153.77502441 43.06811523 C-155.66686299 37.36208597 -155.22105474 31.16207739 -153.43908691 25.50170898 C-148.64847463 19.01120202 -142.97415042 15.81846808 -135.45861816 13.24780273 C-134.58878799 12.93606613 -133.71895782 12.62432953 -132.82276917 12.30314636 C-129.9915086 11.2921643 -127.15316603 10.30299726 -124.31408691 9.31420898 C-122.34433652 8.61627109 -120.37510288 7.91687322 -118.40637207 7.21606445 C-114.39594431 5.78995467 -110.38295848 4.37138785 -106.36828613 2.95727539 C-100.87763257 1.01758656 -95.40744794 -0.97443609 -89.94299316 -2.98657227 C-88.30720899 -3.58685865 -86.67138638 -4.18704032 -85.03552246 -4.78710938 C-82.7329457 -5.6319067 -80.4309761 -6.47813688 -78.13113403 -7.33035278 C-48.90784843 -18.14111616 -28.22302942 -10.31622337 0 0 Z M-81.52502441 12.19311523 C-82.92449951 12.69607525 -84.32404733 13.19883296 -85.72366333 13.70140076 C-88.63029936 14.74583001 -91.53619396 15.79228749 -94.44152832 16.84033203 C-98.14859507 18.17746115 -101.8572971 19.5099853 -105.56653404 20.84108067 C-108.44627929 21.87496406 -111.32525604 22.91097346 -114.20399857 23.94764519 C-115.57121552 24.43977776 -116.93864066 24.93133241 -118.30628586 25.42227364 C-128.0037088 28.89909787 -128.0037088 28.89909787 -137.50158691 32.87670898 C-137.39729536 34.82483592 -137.39729536 34.82483592 -136.50158691 36.87670898 C-134.24914333 38.22260421 -134.24914333 38.22260421 -131.36535645 39.14746094 C-130.2655545 39.54500076 -129.16575256 39.94254059 -128.03262329 40.35212708 C-126.22675247 40.97724434 -126.22675247 40.97724434 -124.38439941 41.61499023 C-123.14350555 42.05884567 -121.90261169 42.50270111 -120.62411499 42.96000671 C-117.30558689 44.14693567 -113.98058254 45.31456649 -110.65380859 46.47814941 C-107.34532237 47.63861983 -104.04273941 48.81560708 -100.73986816 49.99194336 C-96.89307942 51.36097003 -93.04573748 52.72830503 -89.19500732 54.08621216 C-81.12732232 56.93276995 -73.08357201 59.83472805 -65.07510376 62.84407043 C-54.14520276 66.92873012 -45.43661476 66.85606932 -34.40783691 63.02124023 C-33.50964737 62.71519363 -32.61145782 62.40914703 -31.68605042 62.09382629 C-19.34509174 57.84883666 -7.10837726 53.30741926 5.13024902 48.77783203 C7.73990531 47.81323601 10.35110773 46.8528633 12.96231174 45.89246655 C16.10152877 44.73725419 19.23938182 43.5783613 22.37731934 42.41967773 C23.53760147 41.99261032 24.69788361 41.56554291 25.89332581 41.12553406 C26.96642502 40.72784317 28.03952423 40.33015228 29.1451416 39.92041016 C30.5557058 39.39914803 30.5557058 39.39914803 31.99476624 38.86735535 C34.23831512 37.9796249 36.36244521 36.99542815 38.49841309 35.87670898 C38.49841309 34.88670898 38.49841309 33.89670898 38.49841309 32.87670898 C21.21835835 26.18051845 3.83739555 19.77361742 -13.59368896 13.48187256 C-15.86458516 12.66213739 -18.1350533 11.8412154 -20.40509033 11.019104 C-23.63379399 9.85058542 -26.86425755 8.68707751 -30.09533691 7.52514648 C-31.07132843 7.17143982 -32.04731995 6.81773315 -33.05288696 6.45330811 C-33.96086029 6.12816223 -34.86883362 5.80301636 -35.80432129 5.46801758 C-36.98882874 5.04146378 -36.98882874 5.04146378 -38.19726562 4.60629272 C-53.32750712 -0.18417562 -67.35441682 7.07799121 -81.52502441 12.19311523 Z " fill="#000000" transform="translate(177.5015869140625,48.123291015625)"/>
+<path d="M0 0 C1.10582428 0.39109451 2.21164856 0.78218903 3.35098267 1.18513489 C5.71289658 2.02144853 8.0737602 2.86073337 10.43365479 3.70272827 C14.10929508 5.01335543 17.78829453 6.31412511 21.46826172 7.61254883 C31.88023196 11.29151406 42.28143225 14.99339258 52.6328125 18.83984375 C54.7022697 19.60162996 56.77211234 20.36235978 58.84204102 21.12286377 C60.65217491 21.79557094 62.45422051 22.48992046 64.25585938 23.18505859 C78.44705624 28.41283888 88.62489399 25.66710439 102.30969238 20.63378906 C105.08423965 19.61332315 107.86641017 18.61667609 110.65136719 17.625 C118.74261145 14.7353614 126.81131713 11.78417908 134.88134766 8.8359375 C140.03909023 6.95171306 145.20143711 5.0805359 150.36599731 3.21508789 C153.30167724 2.148104 156.22980337 1.06204195 159.15795898 -0.02539062 C160.96438893 -0.68179388 162.77109684 -1.33743286 164.578125 -1.9921875 C165.79572258 -2.45353088 165.79572258 -2.45353088 167.03791809 -2.92419434 C171.93608697 -4.67322873 175.39788476 -5.18814206 180.59375 -3.8671875 C182.83293419 -2.0613938 183.44320187 -0.78364922 183.90625 2.03515625 C184.22470294 7.37919467 184.22470294 7.37919467 181.94223022 10.10540771 C179.22051141 12.45502331 176.91380168 13.39117849 173.52197266 14.57128906 C172.29193512 15.0056427 171.06189758 15.43999634 169.79458618 15.88751221 C168.44905982 16.34967619 167.10346671 16.8116459 165.7578125 17.2734375 C164.35855149 17.76317744 162.95966242 18.25398124 161.56112671 18.74578857 C157.86752299 20.04167266 154.16932867 21.32391541 150.46990967 22.60308838 C146.78985442 23.87773268 143.11371527 25.16354988 139.4375 26.44921875 C135.14995692 27.94837085 130.86222184 29.44692051 126.57232666 30.93933105 C117.36956143 34.14336512 108.19518806 37.41707656 99.05581665 40.79864502 C97.84748672 41.24394562 97.84748672 41.24394562 96.61474609 41.69824219 C95.58466934 42.08094269 95.58466934 42.08094269 94.53378296 42.47137451 C83.39345224 46.26957696 71.61489553 44.96793966 60.75 41.05859375 C59.84649307 40.74533646 58.94298615 40.43207916 58.01210022 40.10932922 C55.20103857 39.13062313 52.39716453 38.13318525 49.59375 37.1328125 C47.8673363 36.52522447 46.14069819 35.91827365 44.41381836 35.31201172 C39.27880926 33.50215648 34.15420878 31.66395543 29.03125 29.8203125 C25.37130547 28.50461854 21.71111396 27.18961363 18.05078125 25.875 C17.1571991 25.55378677 16.26361694 25.23257355 15.34295654 24.90162659 C9.83781172 22.92621278 4.32137792 20.98735349 -1.20703125 19.078125 C-2.51564158 18.62308434 -3.82415763 18.16777245 -5.13256836 17.7121582 C-7.49607176 16.89153464 -9.8626186 16.07960384 -12.23266602 15.27807617 C-13.26705811 14.91689697 -14.3014502 14.55571777 -15.3671875 14.18359375 C-16.25196777 13.88106689 -17.13674805 13.57854004 -18.04833984 13.2668457 C-20.78581835 11.9502597 -22.43375492 10.42802338 -24.40625 8.1328125 C-25.33491509 4.38890283 -24.90999653 1.06834176 -23.09375 -2.3046875 C-16.96982767 -7.97498595 -6.62197781 -2.37599553 0 0 Z " fill="#000000" transform="translate(48.40625,131.8671875)"/>
+<path d="M0 0 C4.17919621 1.09407011 8.20732421 2.54886523 12.265625 4.0234375 C13.45307312 4.44364166 14.64052124 4.86384583 15.86395264 5.29678345 C19.0260813 6.41836138 22.18395364 7.55060869 25.340271 8.68835449 C28.44630829 9.80513418 31.55737869 10.90769571 34.66796875 12.01171875 C54.22255711 18.96567141 54.22255711 18.96567141 62.81845474 22.14594841 C64.73041102 22.85239203 66.64404967 23.55407072 68.55828857 24.25430298 C70.9352755 25.12545178 73.30896072 26.00568664 75.67852783 26.89682007 C84.59605686 30.15045904 92.47430563 32.44225243 101.71875 29.21875 C102.96035889 28.79609863 104.20196777 28.37344727 105.48120117 27.93798828 C106.82097928 27.45915801 108.16057355 26.97981309 109.5 26.5 C110.9204489 26.00741816 112.3414449 25.51641159 113.76293945 25.02685547 C117.66767 23.67478838 121.56205434 22.29503897 125.4541626 20.90710449 C128.10663976 19.96200331 130.76087655 19.02198523 133.41552734 18.08300781 C142.48707922 14.87244247 151.55098708 11.64120855 160.60546875 8.3828125 C161.41741699 8.09113693 162.22936523 7.79946136 163.06591797 7.49894714 C166.77603988 6.1652551 170.48330316 4.82486014 174.18359375 3.46411133 C174.82452469 3.23025726 175.46545563 2.9964032 176.12580872 2.75546265 C177.81255942 2.13972997 179.49754702 1.51917318 181.18237305 0.89819336 C185.1518467 -0.3671817 187.88219511 -0.68630082 192 0 C194.5 1.5 194.5 1.5 196 4 C196.54686219 6.77988279 196.72991469 9.25208587 196 12 C192.63332938 16.28163911 188.6202292 17.54786622 183.64453125 19.25390625 C182.8112178 19.55003311 181.97790436 19.84615997 181.11933899 20.15126038 C179.3337231 20.78463465 177.54634022 21.4130455 175.75738525 22.03692627 C173.02825705 22.99013064 170.30517628 23.95885688 167.58349609 24.93310547 C161.95564701 26.94633456 156.32200811 28.94299662 150.6875 30.9375 C146.89935661 32.27887004 143.11165885 33.62148934 139.32421875 34.96484375 C138.39535858 35.2935849 137.46649841 35.62232605 136.50949097 35.96102905 C131.66067112 37.68153397 126.82313702 39.42795343 121.99853516 41.21533203 C121.01714066 41.57760391 120.03574615 41.93987579 119.02461243 42.31312561 C117.16758167 43.0003241 115.31228115 43.69222543 113.45915222 44.38987732 C92.24075888 52.23304603 76.76352006 46.41052582 56.25 39.1875 C54.35794259 38.52367056 52.46585225 37.85993498 50.57373047 37.19628906 C45.68869156 35.48080097 40.80605023 33.75860025 35.92443848 32.03338623 C33.03822856 31.01350853 30.15145786 29.99523009 27.26464844 28.97705078 C22.73617077 27.37857535 18.21027456 25.77298874 13.68640137 24.16152954 C11.9885091 23.55729821 10.29002793 22.95471898 8.59094238 22.35385132 C6.22794762 21.51730109 3.86758101 20.67372606 1.5078125 19.828125 C0.81702606 19.58498062 0.12623962 19.34183624 -0.58547974 19.09132385 C-10.18741794 15.62516412 -10.18741794 15.62516412 -12 12 C-12.56872038 4.9478673 -12.56872038 4.9478673 -10.5 1.5 C-6.989594 -0.6062436 -3.95191555 -0.48244292 0 0 Z " fill="#000000" transform="translate(36,173)"/>
+</svg>

package/src/components/button/styles.ts

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import { buttonActiveStyle, buttonHoverStyle, buttonStyle } from "../../assets";
 import IconAgent from "../../assets/images/icons/agent.svg";
+import IconManage from "../../assets/images/icons/layers.svg";
 import IconReport from "../../assets/images/icons/report.svg";
 import IconDotted from "../../assets/images/icons/dotted.svg";
 import IconClose from "../../assets/images/icons/close.svg";
@@ -306,6 +307,18 @@ const getButtonModifiedStyled = ({
           height: 16px;
         }
       `;
+    } else if ($iconLeft === "manage") {
+      style += `
+        &:before { 
+          content: url(${IconManage}); 
+          position: absolute;
+          left: 12px;
+          top: 50%;
+          margin-top: -8px;
+          width: 14px;
+          height: 16px;
+        }
+      `;
     } else if ($iconLeft === "report") {
       style += `
         &:before { 

package/src/components/dropdown/index.tsx

@@ -8,6 +8,7 @@ import type { TDropdown } from './typed';
 
 const DEFAULT_TOP_OFFSET = 40;
 const DEFAULT_BOTTOM_OFFSET = 35;
+const MOBILE_BREAKPOINT = 768;
 
 const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externalMinWidth, $internalWidth, $area, $openPosition, $placement, $top, onClick, $alias, type, portalId, $bottom, $isPopup, ...props }: TDropdown) => {
   const buttonRef = useRef<HTMLElement>(null);
@@ -19,6 +20,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
 
   const getViewportHeight = () => window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   const getViewportWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  const isMobileViewport = () => getViewportWidth() < MOBILE_BREAKPOINT;
 
   const getDropdownWrapperElement = (parentEl: ParentNode | null) => parentEl?.querySelector('._refDropdownWrapper') as HTMLElement | null;
   const withNextFrame = (callback: () => void) => window.requestAnimationFrame(() => callback());
@@ -61,6 +63,14 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
     wrapperEl.style.bottom = 'auto';
   };
 
+  const applyMobileDropdownPlacement = (wrapperEl: HTMLElement) => {
+    wrapperEl.style.top = 'auto';
+    wrapperEl.style.bottom = '0';
+    wrapperEl.style.left = '0';
+    wrapperEl.style.right = 'auto';
+    wrapperEl.style.transform = 'none';
+  };
+
   const resetDropdownInlineStyle = (parentEl: ParentNode | null) => {
     const wrapperEl = getDropdownWrapperElement(parentEl);
     if (wrapperEl) {
@@ -93,6 +103,14 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       return;
     }
 
+    if (isMobileViewport()) {
+      applyMobileDropdownPlacement(wrapperRef);
+      portalContainerRef.style.left = '0';
+      portalContainerRef.style.top = '0';
+      portalContainerRef.style.zIndex = $isPopup ? '101' : '8';
+      return;
+    }
+
     const offsetPos = containerEl.getBoundingClientRect();
     const placement = getDropdownPlacement(containerEl, wrapperRef);
     const wrapperWidth = wrapperRef.getBoundingClientRect().width || wrapperRef.offsetWidth;
@@ -124,6 +142,11 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       return;
     }
 
+    if (isMobileViewport()) {
+      applyMobileDropdownPlacement(wrapperRef);
+      return;
+    }
+
     const placement = getDropdownPlacement(containerEl, wrapperRef);
     applyDropdownPlacement(wrapperRef, placement);
   };

package/src/components/dropdown/styles.ts

@@ -61,8 +61,9 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
       @media only screen and (max-width: 767px) {
         & ${DropDownWrapper} { 
           display: grid; 
-          left: 0; 
-          bottom:0; 
+          left: 0 !important; 
+          top: auto !important;
+          bottom: 0 !important; 
           ${$placement === 'top' ? 'animation: dropgoup .075s;' : 'animation: droptoup .075s;'}
           overflow-x: hidden; 
         }
@@ -330,4 +331,4 @@ export const DropdownPortalContainer = styled.div`
       display: block;
     }
   }
-`;
+`;

package/src/components/icon/styles.ts

@@ -73,6 +73,7 @@ import IconPhone from "../../assets/images/icons/phone.svg";
 import IconLocation from "../../assets/images/icons/location.svg";
 import IconEdit from "../../assets/images/icons/edit.svg";
 import IconAgent from "../../assets/images/icons/agent.svg";
+import IconManage from "../../assets/images/icons/layers.svg";
 import IconReport from "../../assets/images/icons/report.svg";
 import IconActivityLogLeftNav from "../../assets/images/navs/left/activity-log.svg";
 import IconActivityLogActiveLeftNav from "../../assets/images/navs/left/activity-log-active.svg";
@@ -193,6 +194,7 @@ const iconStyles = {
   phone: IconPhone,
   location: IconLocation,
   agent: IconAgent,
+  manage: IconManage,
   report: IconReport,
   gender: IconGender,
   birthday: IconBirthday,

package/src/components/icon/typed.ts

@@ -73,6 +73,7 @@ export type IconName =
   | "phone"
   | "location"
   | "agent"
+  | "manage"
   | "report"
   | "gender"
   | "birthday"