forstok-ui-lib 8.9.4 → 8.9.6

package/src/components/dropdown/styles.ts

@@ -1,19 +1,44 @@
-import styled from 'styled-components';
-import { buttonActiveShadowStyle, buttonActiveStyle } from '../../assets/stylesheets/bases.styles';
-import type { TDropdown } from './typed';
+import styled from "styled-components";
+import {
+  buttonActiveShadowStyle,
+  buttonActiveStyle,
+} from "../../assets/stylesheets/bases.styles";
+import type { TDropdown } from "./typed";
 
-type TDropdownChild = Pick<TDropdown, '$internalWidth' | '$openPosition' | '$placement' | '$bottom' | '$top'>;
-type TDropdownParent = Pick<TDropdown, '$openPosition' | '$placement' | '$bottom' | '$top' | '$alias' | '$externalWidth' | '$externalMinWidth' | '$area'>;
+type TDropdownChild = Pick<
+  TDropdown,
+  "$internalWidth" | "$openPosition" | "$placement" | "$bottom" | "$top"
+>;
+type TDropdownParent = Pick<
+  TDropdown,
+  | "$openPosition"
+  | "$placement"
+  | "$bottom"
+  | "$top"
+  | "$alias"
+  | "$externalWidth"
+  | "$externalMinWidth"
+  | "$area"
+>;
 
-const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias, $openPosition, $externalWidth, $externalMinWidth, $area }: TDropdownParent) => {
-  const axTop = $top ? (parseInt($top) + 5)+'px' : '40px'
+const getDropDownContainerModifiedStyled = ({
+  $top,
+  $bottom,
+  $placement,
+  $alias,
+  $openPosition,
+  $externalWidth,
+  $externalMinWidth,
+  $area,
+}: TDropdownParent) => {
+  const axTop = $top ? parseInt($top) + 5 + "px" : "40px";
   let style = `
     @keyframes droptodown {
       90% {
         top: ${axTop}; 
       }
       100% { 
-        top: ${$top || '35px'}; 
+        top: ${$top || "35px"}; 
       }
     }
     @keyframes droptoup {
@@ -32,7 +57,7 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
         bottom: ${axTop}; 
       }
       100% {
-        bottom: ${$bottom || '35px'}; 
+        bottom: ${$bottom || "35px"}; 
       }
     }
     @keyframse dropgoup {
@@ -64,7 +89,7 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
           left: 0 !important; 
           top: auto !important;
           bottom: 0 !important; 
-          ${$placement === 'top' ? 'animation: dropgoup .075s;' : 'animation: droptoup .075s;'}
+          ${$placement === "top" ? "animation: dropgoup .075s;" : "animation: droptoup .075s;"}
           overflow-x: hidden; 
         }
         & ${DropDownBody} {
@@ -76,41 +101,41 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
       @media only screen and (min-width: 768px) {
         & ${DropDownWrapper} { 
           display: grid; 
-          ${$placement === 'top' ? `animation: dropgodown .075s linear; bottom: ${$bottom || '35px'}; top: auto;` : `animation: droptodown .075s linear; top: ${$top || '35px'};`}
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '100%': $openPosition === 'left' ? '0' : 'auto'};
+          ${$placement === "top" ? `animation: dropgodown .075s linear; bottom: ${$bottom || "35px"}; top: auto;` : `animation: droptodown .075s linear; top: ${$top || "35px"};`}
+          left: ${$alias === "_dropdownFilterContainer" && $openPosition !== "left" ? "100%" : $openPosition === "left" ? "0" : "auto"};
         }
       }
       @media only screen and (min-width: 1024px) {
         & ${DropDownWrapper} { 
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '30%': $openPosition === 'left' ? '0' : 'auto'}; 
+          left: ${$alias === "_dropdownFilterContainer" && $openPosition !== "left" ? "30%" : $openPosition === "left" ? "0" : "auto"}; 
         }
       }
       @media only screen and (min-width: 1280px) {
         & ${DropDownWrapper} { 
-          left: ${($alias === "_dropdownFilterContainer" && $openPosition !== 'left') ? '0': $openPosition === 'left' ? '0' : 'auto'}; 
+          left: ${$alias === "_dropdownFilterContainer" && $openPosition !== "left" ? "0" : $openPosition === "left" ? "0" : "auto"}; 
         }
       }
     }
-  `
-  if ($alias === '_dropdownFilterContainer') {
+  `;
+  if ($alias === "_dropdownFilterContainer") {
     style += `
       margin-top: 4px;
       ${DropDownControl} {
         margin-top: -4px;
       }
-    `
+    `;
   }
   if ($externalWidth) {
     style += `
       width: ${$externalWidth}
-    `
+    `;
   }
   if ($externalMinWidth) {
     style += `
       min-width: ${$externalMinWidth}
-    `
+    `;
   }
-  if ($area === 'mobile') {
+  if ($area === "mobile") {
     style += `
       @media (min-width: 320px) and (max-width: 480px) {
         ${DropDownWrapper} { 
@@ -119,106 +144,122 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
           z-index: 88;
         }
       }
-    `
+    `;
   }
-  return style
+  return style;
 };
 
-const getDropDownWrapperModifiedStyled = ({ $internalWidth, $openPosition, $placement, $bottom, $top }: TDropdownChild) => {
-  let style = ''
+const getDropDownWrapperModifiedStyled = ({
+  $internalWidth,
+  $openPosition,
+  $placement,
+  $bottom,
+  $top,
+}: TDropdownChild) => {
+  let style = "";
   if ($internalWidth) {
     style += `
       width: ${$internalWidth};
-    `
+    `;
   } else {
-    style +=`
+    style += `
       width: auto;
       white-space: nowrap;
       ${DropDownBody} {
         overflow: unset;
       }
-    `
+    `;
   }
-  if ($openPosition === 'left') {
+  if ($openPosition === "left") {
     style += `
       left: 0;
       right: auto;
-    `
-  } else if ($openPosition === 'center') { 
+    `;
+  } else if ($openPosition === "center") {
     style += `
       left: 50%;
       right: auto;
       transform: translateX(-50%);
-    `
+    `;
   }
-  if ($placement === 'top' && $bottom) {
+  if ($placement === "top" && $bottom) {
     style += `
       top: unset; bottom: ${$bottom}
-    `
+    `;
   } else if ($top) {
     style += `
       top: ${$top};
-    `
+    `;
   }
-  return style
+  return style;
 };
 
-const getDropDownBodyModifiedStyled = ({ $area }:{ $area?: string }) => {
-  let style = ''
-  if ($area === 'promotion') {
+const getDropDownBodyModifiedStyled = ({ $area }: { $area?: string }) => {
+  let style = "";
+  if ($area === "promotion") {
     style += `
       max-height: 347px;
       overflow-y: auto;
-    `
+    `;
   }
-  return style
+  return style;
 };
 
-const getDropDownActionModifiedStyled = ({ $position }:{ $position?: string }) => {
+const getDropDownActionModifiedStyled = ({
+  $position,
+}: {
+  $position?: string;
+}) => {
   let style = `
     justify-self: end;
-  `
-  if ($position === 'middle') {
+  `;
+  if ($position === "middle") {
     style += `
       width: 100%; 
       text-align: center;
-    `
-  } else if ($position === 'left') {
+    `;
+  } else if ($position === "left") {
     style += `  
       width: 100%;
-    `
-  } else if ($position === 'end') {
+    `;
+  } else if ($position === "end") {
     style += `
       width: 100%; 
       text-align: end
-    `
+    `;
   }
-  return style
+  return style;
 };
 
 export const DropDownWrapper = styled.section<TDropdownChild>`
   background-color: var(--pri-clr-bg);
   border: 1px solid var(--sec-clr-ln);
   position: fixed;
-  width: 100vw; 
+  width: 100vw;
   z-index: 102;
   display: none;
   border-radius: 10px 10px 0px 0px;
-  > div, 
+  > div,
   > section {
     padding: 1em;
   }
   @media only screen and (min-width: 768px) {
-    position: absolute; 
+    position: absolute;
     min-width: 110px;
     width: 100vw;
     top: 40px;
     right: 0;
     z-index: 10;
     border: none;
-    border-radius: .75rem;
-    box-shadow: 0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06);
-    > div, 
+    border-radius: 0.75rem;
+    box-shadow:
+      0rem 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.05),
+      0rem 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.05),
+      0rem 0.1875rem 0.375rem 0rem rgba(0, 0, 0, 0.05),
+      0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05),
+      0rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.05),
+      0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.06);
+    > div,
     > section {
       padding: 1em;
       ._refFilterDropdown {
@@ -249,7 +290,7 @@ export const DropDownOverlayWrapper = styled.div`
   top: 0;
   left: 0;
   z-index: 100;
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
   display: none;
   @media only screen and (min-width: 768px) {
     display: none !important;
@@ -284,8 +325,8 @@ export const DropDownContainer = styled.section<{ $area?: string }>`
     &._refContainerhover:hover {
       ${DropDownWrapper} {
         display: grid;
-        animation: droptodown .075s linear;
-        top: '35px';
+        animation: droptodown 0.075s linear;
+        top: "35px";
       }
     }
   }
@@ -323,8 +364,8 @@ export const DropDownAction = styled.section<{ $position?: string }>`
 export const DropdownPortalContainer = styled.div`
   display: inline-block;
   position: fixed;
-  top: 0;
-  left: 0;
+  top: -100%;
+  left: -100%;
   z-index: 999;
   &.is-shown {
     & ${DropDownWrapper} {