forstok-ui-lib 8.9.5 → 8.9.7

package/dist/index.d.ts

@@ -919,7 +919,7 @@ declare const RangeContainer: styled_components_dist_types.IStyledComponentBase<
     $mode?: "white";
 }>> & string;
 
-type TDropdownChild = Pick<TDropdown, '$internalWidth' | '$openPosition' | '$placement' | '$bottom' | '$top'>;
+type TDropdownChild = Pick<TDropdown, "$internalWidth" | "$openPosition" | "$placement" | "$bottom" | "$top">;
 declare const DropDownWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, TDropdownChild>> & string;
 declare const DropDownOverlayWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const DropDownControl: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/index.js

@@ -4401,25 +4401,31 @@ function O(e,t){if(!1===e||null==e)throw new Error(t)}function M(e,t){if(!e){"un
   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 {
@@ -4448,7 +4454,7 @@ function O(e,t){if(!1===e||null==e)throw new Error(t)}function M(e,t){if(!e){"un
   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;
@@ -4477,8 +4483,8 @@ function O(e,t){if(!1===e||null==e)throw new Error(t)}function M(e,t){if(!e){"un
     &._refContainerhover:hover {
       ${ca} {
         display: grid;
-        animation: droptodown .075s linear;
-        top: '35px';
+        animation: droptodown 0.075s linear;
+        top: "35px";
       }
     }
   }
@@ -4506,15 +4512,15 @@ function O(e,t){if(!1===e||null==e)throw new Error(t)}function M(e,t){if(!e){"un
 `,fa=m.default.div`
   display: inline-block;
   position: fixed;
-  top: 0;
-  left: 0;
+  top: -100%;
+  left: -100%;
   z-index: 999;
   &.is-shown {
     & ${ca} {
       display: block;
     }
   }
-`,wa=t=>{var{children:i,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:l,$internalWidth:s,$area:d,$openPosition:c,$placement:C,$top:p,onClick:g,$alias:h,type:x,portalId:m,$bottom:u,$isPopup:v}=t,f=b(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const w=r.useRef(null),F=(e,t)=>{const r=Number.parseInt(e||"",10);return Number.isNaN(r)?t:r},y=()=>window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,A=()=>y()<768,D=e=>null==e?void 0:e.querySelector("._refDropdownWrapper"),E=(e,t)=>{if("top"===C)return"top";const r=e.getBoundingClientRect(),i=t.getBoundingClientRect().height||t.offsetHeight,n=F(p,40),a=F(u,35),o=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-r.bottom,l=r.top,s=i+Math.max(n-r.height,0),d=i+Math.max(a-r.height,0);return o>=s?"bottom":l>=d||l>o?"top":"bottom"},B=(e,t)=>{if("top"===t)return e.style.animation="none",e.style.top="auto",void(e.style.bottom=`${F(u,35)}px`);e.style.top=`${F(p,40)}px`,e.style.bottom="auto"},j=e=>{e.style.top="auto",e.style.bottom="0",e.style.left="0",e.style.right="auto",e.style.transform="none"},k=e=>{const t=D(e);t&&(t.style.top="",t.style.bottom="",t.style.left="",t.style.right="",t.style.transform="",t.style.visibility="",t.style.animation="")},O=(e,t)=>{const r=D(e);r&&(r.style.visibility=t)},M=e=>{if(!m)return;const t=document.querySelector(`#${m} ._refDropdownPortal`),r=D(t);if(!t||!r)return;if(A())return j(r),t.style.left="0",t.style.top="0",void(t.style.zIndex=v?"101":"8");const i=e.getBoundingClientRect(),n=E(e,r),a=r.getBoundingClientRect().width||r.offsetWidth,o=y();let l=i.left+i.width-a;"left"===c?l=i.left:"center"===c&&(l=i.left+i.width/2-a/2),l=Math.max(0,Math.min(l,Math.max(o-a,0))),r.style.left="0",r.style.right="auto",r.style.transform="none",B(r,n),t.style.left=`${l}px`,t.style.top=`${"top"===n?i.bottom:i.top}px`,t.style.zIndex=v?"101":"8"},L=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];e&&m&&M(e)},z=()=>{const e=document.getElementsByClassName("_refContainer is-shown"),t=document.getElementsByTagName("BODY")[0];if(e.length){t.classList.remove("is-immuned");for(let t=0;t<e.length;t++){e[t].querySelector("._refDropdownOverlay").style.display="none",e[t].classList.remove("is-shown"),k(e[t])}}const r=document.querySelector("._refScrollContainer");r&&r.removeEventListener("scroll",L,!0),setTimeout((()=>{if(m){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)k(e[t]),e[t].style.left="0",e[t].style.top="0",e[t].classList.remove("is-shown")}}),10)},I=e=>{const t=w.current;if(t){const r=e.target.closest(`.${t.classList[0]}`);if(!r)return;const i=r.closest("._refContainer"),n=document.getElementsByTagName("BODY")[0];if(i){const t=i.querySelector("._refDropdownOverlay");i.classList.contains("is-shown")?(t.style.display="none",n.classList.remove("is-immuned"),i.classList.remove("is-shown"),setTimeout((()=>{if(m){const e=document.querySelector(`#${m} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(k(e),e.classList.remove("is-shown"),e.style.left="0px",e.style.top="0px",t&&t.removeEventListener("scroll",L,!0))}}),10),k(i)):(z(),t.style.display="block",n.classList.add("is-immuned"),m||O(i,"hidden"),i.classList.add("is-shown"),setTimeout((()=>{if(m){const e=document.querySelector(`#${m} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(e.classList.add("is-shown"),setTimeout((()=>{M(i),t&&t.addEventListener("scroll",L,!0)}),10))}else e=()=>{(e=>{const t=D(e);if(!t)return;if(A())return void j(t);const r=E(e,t);B(t,r)})(i),O(i,"visible")},window.requestAnimationFrame((()=>e()));var e}),10),g&&g(e))}}};r.useEffect((()=>(setTimeout((()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.addEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")})),t&&t.addEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}))}),1),()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.removeEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")}),!0),t&&t.removeEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="0",t.style.top="0"}),!0)})),[m]);const P=a?e.jsx(ma,{children:a}):null,S=n?e.jsxs(xa,{children:[n," ",P]}):null,T=i.filter((e=>r.isValidElement(e)?"control"===e.props["aria-label"]:null)),Q=T&&r.isValidElement(T[0])?"hover"===x?e.jsxs(ga,{children:[e.jsx(pa,Object.assign({className:"_refDropdownControl"},m&&{onMouseEnter:e=>{const t=w.current;if(t){const r=e.target.closest(`.${t.classList[0]}`);if(!r)return;const i=document.querySelectorAll("._refDropdownPortal");for(const e of i)e.classList.remove("is-shown"),e.style.left="0",e.style.top="0";const n=r.closest("._refContainer");if(n){const e=document.querySelector(`#${m} ._refDropdownPortal`);e&&(e.classList.add("is-shown"),setTimeout((()=>{M(n)}),10))}}},onMouseLeave:e=>{const t=w.current;if(t){if(!e.target.closest(`.${t.classList[0]}`))return;setTimeout((()=>{const e=document.querySelector(`#${m} ._refDropdownPortal`);e&&!e.classList.contains("unhiddenable")&&(k(e),e.classList.remove("is-shown"),e.style.left="0",e.style.top="0")}),150)}}},{children:T[0].props.children})),e.jsx(pa,{className:"_refDropdownControlMobile",ref:w,onClick:I,children:T[0].props.children})]}):e.jsx(pa,{ref:w,onClick:I,children:T[0].props.children}):null,H=i.filter((e=>r.isValidElement(e)?"body"===e.props["aria-label"]:null)),Y=H&&r.isValidElement(H[0])?e.jsx(ua,{$area:d,children:H[0].props.children}):null,V=i.filter((e=>r.isValidElement(e)?"action"===e.props["aria-label"]:null)),N=V&&r.isValidElement(V[0])?e.jsx(va,{$position:V[0].props["data-position"],className:V[0].props.className,children:V[0].props.children}):null,X=e.jsxs(ca,Object.assign({className:"_refDropdownWrapper"},s&&{$internalWidth:s},p&&{$top:p},c&&{$openPosition:c},C&&{$placement:C},u&&{$bottom:u},{children:[S,Y,N]}));return e.jsxs(ha,Object.assign({className:"_refContainer "+(x?`_refContainer${x}`:"")},o&&{$externalWidth:o},l&&{$externalMinWidth:l},d&&{$area:d},p&&{$top:p},h&&{$alias:h},c&&{$openPosition:c},C&&{$placement:C},u&&{$bottom:u},f,{children:[Q,e.jsx(Ca,{className:"_refDropdownOverlay",onClick:()=>{z()}}),m?e.jsx(da,{wrapperId:m,children:e.jsx(fa,{className:"_refDropdownPortal "+("hover"===x?"_refHover":""),children:X})}):X]}))},Fa=t.css`
+`,wa=t=>{var{children:i,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:l,$internalWidth:s,$area:d,$openPosition:c,$placement:C,$top:p,onClick:g,$alias:h,type:x,portalId:m,$bottom:u,$isPopup:v}=t,f=b(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const w=r.useRef(null),F=(e,t)=>{const r=Number.parseInt(e||"",10);return Number.isNaN(r)?t:r},y=()=>window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,A=()=>y()<768,D=e=>null==e?void 0:e.querySelector("._refDropdownWrapper"),E=(e,t)=>{if("top"===C)return"top";const r=e.getBoundingClientRect(),i=t.getBoundingClientRect().height||t.offsetHeight,n=F(p,40),a=F(u,35),o=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-r.bottom,l=r.top,s=i+Math.max(n-r.height,0),d=i+Math.max(a-r.height,0);return o>=s?"bottom":l>=d||l>o?"top":"bottom"},B=(e,t)=>{if("top"===t)return e.style.animation="none",e.style.top="auto",void(e.style.bottom=`${F(u,35)}px`);e.style.top=`${F(p,40)}px`,e.style.bottom="auto"},j=e=>{e.style.top="auto",e.style.bottom="0",e.style.left="0",e.style.right="auto",e.style.transform="none"},k=e=>{const t=D(e);t&&(t.style.top="",t.style.bottom="",t.style.left="",t.style.right="",t.style.transform="",t.style.visibility="",t.style.animation="")},O=(e,t)=>{const r=D(e);r&&(r.style.visibility=t)},M=e=>{if(!m)return;const t=document.querySelector(`#${m} ._refDropdownPortal`),r=D(t);if(!t||!r)return;if(A())return j(r),t.style.left="'-100%'",t.style.top="'-100%'",void(t.style.zIndex="101");const i=e.getBoundingClientRect(),n=E(e,r),a=r.getBoundingClientRect().width||r.offsetWidth,o=y();let l=i.left+i.width-a;"left"===c?l=i.left:"center"===c&&(l=i.left+i.width/2-a/2),l=Math.max(0,Math.min(l,Math.max(o-a,0))),r.style.left="0",r.style.right="auto",r.style.transform="none",B(r,n),t.style.left=`${l}px`,t.style.top=`${"top"===n?i.bottom:i.top}px`,t.style.zIndex=v?"101":"8"},L=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];e&&m&&M(e)},z=()=>{const e=document.getElementsByClassName("_refContainer is-shown"),t=document.getElementsByTagName("BODY")[0];if(e.length){t.classList.remove("is-immuned");for(let t=0;t<e.length;t++){e[t].querySelector("._refDropdownOverlay").style.display="none",e[t].classList.remove("is-shown"),k(e[t])}}const r=document.querySelector("._refScrollContainer");r&&r.removeEventListener("scroll",L,!0),setTimeout((()=>{if(m){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)k(e[t]),e[t].style.left="'-100%'",e[t].style.top="'-100%'",e[t].classList.remove("is-shown")}}),10)},I=e=>{const t=w.current;if(t){const r=e.target.closest(`.${t.classList[0]}`);if(!r)return;const i=r.closest("._refContainer"),n=document.getElementsByTagName("BODY")[0];if(i){const t=i.querySelector("._refDropdownOverlay");i.classList.contains("is-shown")?(t.style.display="none",n.classList.remove("is-immuned"),i.classList.remove("is-shown"),setTimeout((()=>{if(m){const e=document.querySelector(`#${m} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(k(e),e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%",t&&t.removeEventListener("scroll",L,!0))}}),10),k(i)):(z(),t.style.display="block",n.classList.add("is-immuned"),m||O(i,"hidden"),i.classList.add("is-shown"),setTimeout((()=>{if(m){const e=document.querySelector(`#${m} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(e.classList.add("is-shown"),setTimeout((()=>{M(i),t&&t.addEventListener("scroll",L,!0)}),10))}else e=()=>{(e=>{const t=D(e);if(!t)return;if(A())return void j(t);const r=E(e,t);B(t,r)})(i),O(i,"visible")},window.requestAnimationFrame((()=>e()));var e}),10),g&&g(e))}}};r.useEffect((()=>(setTimeout((()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.addEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")})),t&&t.addEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="-100%",t.style.top="-100%"}))}),1),()=>{const e=document.querySelectorAll("._refDropdownPortal._refHover");for(let t of e)t&&t.removeEventListener("mouseenter",(e=>{const t=e.target;t.classList.add("is-shown"),t.classList.add("unhiddenable")}),!0),t&&t.removeEventListener("mouseleave",(e=>{const t=e.target;t.classList.remove("is-shown"),t.classList.remove("unhiddenable"),t.style.left="-100%",t.style.top="-100%"}),!0)})),[m]);const P=a?e.jsx(ma,{children:a}):null,S=n?e.jsxs(xa,{children:[n," ",P]}):null,T=i.filter((e=>r.isValidElement(e)?"control"===e.props["aria-label"]:null)),Q=T&&r.isValidElement(T[0])?"hover"===x?e.jsxs(ga,{children:[e.jsx(pa,Object.assign({className:"_refDropdownControl"},m&&{onMouseEnter:e=>{const t=w.current;if(t){const r=e.target.closest(`.${t.classList[0]}`);if(!r)return;const i=document.querySelectorAll("._refDropdownPortal");for(const e of i)e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%";const n=r.closest("._refContainer");if(n){const e=document.querySelector(`#${m} ._refDropdownPortal`);e&&(e.classList.add("is-shown"),setTimeout((()=>{M(n)}),10))}}},onMouseLeave:e=>{const t=w.current;if(t){if(!e.target.closest(`.${t.classList[0]}`))return;setTimeout((()=>{const e=document.querySelector(`#${m} ._refDropdownPortal`);e&&!e.classList.contains("unhiddenable")&&(k(e),e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%")}),150)}}},{children:T[0].props.children})),e.jsx(pa,{className:"_refDropdownControlMobile",ref:w,onClick:I,children:T[0].props.children})]}):e.jsx(pa,{ref:w,onClick:I,children:T[0].props.children}):null,H=i.filter((e=>r.isValidElement(e)?"body"===e.props["aria-label"]:null)),Y=H&&r.isValidElement(H[0])?e.jsx(ua,{$area:d,children:H[0].props.children}):null,V=i.filter((e=>r.isValidElement(e)?"action"===e.props["aria-label"]:null)),N=V&&r.isValidElement(V[0])?e.jsx(va,{$position:V[0].props["data-position"],className:V[0].props.className,children:V[0].props.children}):null,X=e.jsxs(ca,Object.assign({className:"_refDropdownWrapper"},s&&{$internalWidth:s},p&&{$top:p},c&&{$openPosition:c},C&&{$placement:C},u&&{$bottom:u},{children:[S,Y,N]}));return e.jsxs(ha,Object.assign({className:"_refContainer "+(x?`_refContainer${x}`:"")},o&&{$externalWidth:o},l&&{$externalMinWidth:l},d&&{$area:d},p&&{$top:p},h&&{$alias:h},c&&{$openPosition:c},C&&{$placement:C},u&&{$bottom:u},f,{children:[Q,e.jsx(Ca,{className:"_refDropdownOverlay",onClick:()=>{z()}}),m?e.jsx(da,{wrapperId:m,children:e.jsx(fa,{className:"_refDropdownPortal "+("hover"===x?"_refHover":""),children:X})}):X]}))},Fa=t.css`
   background-color: var(--mt-clr-bg__fc); 
   width: 30px;
   height: 30px;