forstok-ui-lib 8.9.5 → 8.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +18 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +18 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/dropdown/index.tsx +374 -185
- package/src/components/dropdown/styles.ts +101 -60
package/dist/index.mjs
CHANGED
|
@@ -4401,25 +4401,31 @@ function Q(e,t){if(!1===e||null==e)throw new Error(t)}function P(e,t){if(!e){"un
|
|
|
4401
4401
|
background-color: var(--pri-clr-bg);
|
|
4402
4402
|
border: 1px solid var(--sec-clr-ln);
|
|
4403
4403
|
position: fixed;
|
|
4404
|
-
width: 100vw;
|
|
4404
|
+
width: 100vw;
|
|
4405
4405
|
z-index: 102;
|
|
4406
4406
|
display: none;
|
|
4407
4407
|
border-radius: 10px 10px 0px 0px;
|
|
4408
|
-
> div,
|
|
4408
|
+
> div,
|
|
4409
4409
|
> section {
|
|
4410
4410
|
padding: 1em;
|
|
4411
4411
|
}
|
|
4412
4412
|
@media only screen and (min-width: 768px) {
|
|
4413
|
-
position: absolute;
|
|
4413
|
+
position: absolute;
|
|
4414
4414
|
min-width: 110px;
|
|
4415
4415
|
width: 100vw;
|
|
4416
4416
|
top: 40px;
|
|
4417
4417
|
right: 0;
|
|
4418
4418
|
z-index: 10;
|
|
4419
4419
|
border: none;
|
|
4420
|
-
border-radius: .75rem;
|
|
4421
|
-
box-shadow:
|
|
4422
|
-
|
|
4420
|
+
border-radius: 0.75rem;
|
|
4421
|
+
box-shadow:
|
|
4422
|
+
0rem 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.05),
|
|
4423
|
+
0rem 0.5rem 1rem -0.25rem rgba(0, 0, 0, 0.05),
|
|
4424
|
+
0rem 0.1875rem 0.375rem 0rem rgba(0, 0, 0, 0.05),
|
|
4425
|
+
0rem 0.125rem 0.25rem 0rem rgba(0, 0, 0, 0.05),
|
|
4426
|
+
0rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.05),
|
|
4427
|
+
0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.06);
|
|
4428
|
+
> div,
|
|
4423
4429
|
> section {
|
|
4424
4430
|
padding: 1em;
|
|
4425
4431
|
._refFilterDropdown {
|
|
@@ -4448,7 +4454,7 @@ function Q(e,t){if(!1===e||null==e)throw new Error(t)}function P(e,t){if(!e){"un
|
|
|
4448
4454
|
top: 0;
|
|
4449
4455
|
left: 0;
|
|
4450
4456
|
z-index: 100;
|
|
4451
|
-
background-color: rgba(0, 0, 0, .1);
|
|
4457
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
4452
4458
|
display: none;
|
|
4453
4459
|
@media only screen and (min-width: 768px) {
|
|
4454
4460
|
display: none !important;
|
|
@@ -4477,8 +4483,8 @@ function Q(e,t){if(!1===e||null==e)throw new Error(t)}function P(e,t){if(!e){"un
|
|
|
4477
4483
|
&._refContainerhover:hover {
|
|
4478
4484
|
${wo} {
|
|
4479
4485
|
display: grid;
|
|
4480
|
-
animation: droptodown .075s linear;
|
|
4481
|
-
top:
|
|
4486
|
+
animation: droptodown 0.075s linear;
|
|
4487
|
+
top: "35px";
|
|
4482
4488
|
}
|
|
4483
4489
|
}
|
|
4484
4490
|
}
|
|
@@ -4506,15 +4512,15 @@ function Q(e,t){if(!1===e||null==e)throw new Error(t)}function P(e,t){if(!e){"un
|
|
|
4506
4512
|
`,ko=r.div`
|
|
4507
4513
|
display: inline-block;
|
|
4508
4514
|
position: fixed;
|
|
4509
|
-
top:
|
|
4510
|
-
left:
|
|
4515
|
+
top: -100%;
|
|
4516
|
+
left: -100%;
|
|
4511
4517
|
z-index: 999;
|
|
4512
4518
|
&.is-shown {
|
|
4513
4519
|
& ${wo} {
|
|
4514
4520
|
display: block;
|
|
4515
4521
|
}
|
|
4516
4522
|
}
|
|
4517
|
-
`,Oo=i=>{var{children:r,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:d,$internalWidth:s,$area:p,$openPosition:h,$placement:g,$top:m,onClick:x,$alias:u,type:v,portalId:w,$bottom:F,$isPopup:f}=i,y=O(i,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const A=C(null),b=(e,t)=>{const i=Number.parseInt(e||"",10);return Number.isNaN(i)?t:i},D=()=>window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,E=()=>D()<768,B=e=>null==e?void 0:e.querySelector("._refDropdownWrapper"),k=(e,t)=>{if("top"===g)return"top";const i=e.getBoundingClientRect(),r=t.getBoundingClientRect().height||t.offsetHeight,n=b(m,40),a=b(F,35),o=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-i.bottom,l=i.top,d=r+Math.max(n-i.height,0),C=r+Math.max(a-i.height,0);return o>=d?"bottom":l>=C||l>o?"top":"bottom"},M=(e,t)=>{if("top"===t)return e.style.animation="none",e.style.top="auto",void(e.style.bottom=`${b(F,35)}px`);e.style.top=`${b(m,40)}px`,e.style.bottom="auto"},z=e=>{e.style.top="auto",e.style.bottom="0",e.style.left="0",e.style.right="auto",e.style.transform="none"},L=e=>{const t=B(e);t&&(t.style.top="",t.style.bottom="",t.style.left="",t.style.right="",t.style.transform="",t.style.visibility="",t.style.animation="")},I=(e,t)=>{const i=B(e);i&&(i.style.visibility=t)},j=e=>{if(!w)return;const t=document.querySelector(`#${w} ._refDropdownPortal`),i=B(t);if(!t||!i)return;if(E())return z(i),t.style.left="
|
|
4523
|
+
`,Oo=i=>{var{children:r,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:d,$internalWidth:s,$area:p,$openPosition:h,$placement:g,$top:m,onClick:x,$alias:u,type:v,portalId:w,$bottom:F,$isPopup:f}=i,y=O(i,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const A=C(null),b=(e,t)=>{const i=Number.parseInt(e||"",10);return Number.isNaN(i)?t:i},D=()=>window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,E=()=>D()<768,B=e=>null==e?void 0:e.querySelector("._refDropdownWrapper"),k=(e,t)=>{if("top"===g)return"top";const i=e.getBoundingClientRect(),r=t.getBoundingClientRect().height||t.offsetHeight,n=b(m,40),a=b(F,35),o=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-i.bottom,l=i.top,d=r+Math.max(n-i.height,0),C=r+Math.max(a-i.height,0);return o>=d?"bottom":l>=C||l>o?"top":"bottom"},M=(e,t)=>{if("top"===t)return e.style.animation="none",e.style.top="auto",void(e.style.bottom=`${b(F,35)}px`);e.style.top=`${b(m,40)}px`,e.style.bottom="auto"},z=e=>{e.style.top="auto",e.style.bottom="0",e.style.left="0",e.style.right="auto",e.style.transform="none"},L=e=>{const t=B(e);t&&(t.style.top="",t.style.bottom="",t.style.left="",t.style.right="",t.style.transform="",t.style.visibility="",t.style.animation="")},I=(e,t)=>{const i=B(e);i&&(i.style.visibility=t)},j=e=>{if(!w)return;const t=document.querySelector(`#${w} ._refDropdownPortal`),i=B(t);if(!t||!i)return;if(E())return z(i),t.style.left="'-100%'",t.style.top="'-100%'",void(t.style.zIndex="101");const r=e.getBoundingClientRect(),n=k(e,i),a=i.getBoundingClientRect().width||i.offsetWidth,o=D();let l=r.left+r.width-a;"left"===h?l=r.left:"center"===h&&(l=r.left+r.width/2-a/2),l=Math.max(0,Math.min(l,Math.max(o-a,0))),i.style.left="0",i.style.right="auto",i.style.transform="none",M(i,n),t.style.left=`${l}px`,t.style.top=`${"top"===n?r.bottom:r.top}px`,t.style.zIndex=f?"101":"8"},Q=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];e&&w&&j(e)},P=()=>{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"),L(e[t])}}const i=document.querySelector("._refScrollContainer");i&&i.removeEventListener("scroll",Q,!0),setTimeout((()=>{if(w){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)L(e[t]),e[t].style.left="'-100%'",e[t].style.top="'-100%'",e[t].classList.remove("is-shown")}}),10)},S=e=>{const t=A.current;if(t){const i=e.target.closest(`.${t.classList[0]}`);if(!i)return;const r=i.closest("._refContainer"),n=document.getElementsByTagName("BODY")[0];if(r){const t=r.querySelector("._refDropdownOverlay");r.classList.contains("is-shown")?(t.style.display="none",n.classList.remove("is-immuned"),r.classList.remove("is-shown"),setTimeout((()=>{if(w){const e=document.querySelector(`#${w} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(L(e),e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%",t&&t.removeEventListener("scroll",Q,!0))}}),10),L(r)):(P(),t.style.display="block",n.classList.add("is-immuned"),w||I(r,"hidden"),r.classList.add("is-shown"),setTimeout((()=>{if(w){const e=document.querySelector(`#${w} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer");e&&(e.classList.add("is-shown"),setTimeout((()=>{j(r),t&&t.addEventListener("scroll",Q,!0)}),10))}else e=()=>{(e=>{const t=B(e);if(!t)return;if(E())return void z(t);const i=k(e,t);M(t,i)})(r),I(r,"visible")},window.requestAnimationFrame((()=>e()));var e}),10),x&&x(e))}}};l((()=>(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)})),[w]);const T=a?e(Do,{children:a}):null,Y=n?t(bo,{children:[n," ",T]}):null,H=r.filter((e=>c(e)?"control"===e.props["aria-label"]:null)),X=H&&c(H[0])?"hover"===v?t(yo,{children:[e(fo,Object.assign({className:"_refDropdownControl"},w&&{onMouseEnter:e=>{const t=A.current;if(t){const i=e.target.closest(`.${t.classList[0]}`);if(!i)return;const r=document.querySelectorAll("._refDropdownPortal");for(const e of r)e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%";const n=i.closest("._refContainer");if(n){const e=document.querySelector(`#${w} ._refDropdownPortal`);e&&(e.classList.add("is-shown"),setTimeout((()=>{j(n)}),10))}}},onMouseLeave:e=>{const t=A.current;if(t){if(!e.target.closest(`.${t.classList[0]}`))return;setTimeout((()=>{const e=document.querySelector(`#${w} ._refDropdownPortal`);e&&!e.classList.contains("unhiddenable")&&(L(e),e.classList.remove("is-shown"),e.style.left="-100%",e.style.top="-100%")}),150)}}},{children:H[0].props.children})),e(fo,{className:"_refDropdownControlMobile",ref:A,onClick:S,children:H[0].props.children})]}):e(fo,{ref:A,onClick:S,children:H[0].props.children}):null,V=r.filter((e=>c(e)?"body"===e.props["aria-label"]:null)),N=V&&c(V[0])?e(Eo,{$area:p,children:V[0].props.children}):null,q=r.filter((e=>c(e)?"action"===e.props["aria-label"]:null)),U=q&&c(q[0])?e(Bo,{$position:q[0].props["data-position"],className:q[0].props.className,children:q[0].props.children}):null,W=t(wo,Object.assign({className:"_refDropdownWrapper"},s&&{$internalWidth:s},m&&{$top:m},h&&{$openPosition:h},g&&{$placement:g},F&&{$bottom:F},{children:[Y,N,U]}));return t(Ao,Object.assign({className:"_refContainer "+(v?`_refContainer${v}`:"")},o&&{$externalWidth:o},d&&{$externalMinWidth:d},p&&{$area:p},m&&{$top:m},u&&{$alias:u},h&&{$openPosition:h},g&&{$placement:g},F&&{$bottom:F},y,{children:[X,e(Fo,{className:"_refDropdownOverlay",onClick:()=>{P()}}),w?e(vo,{wrapperId:w,children:e(ko,{className:"_refDropdownPortal "+("hover"===v?"_refHover":""),children:W})}):W]}))},Mo=n`
|
|
4518
4524
|
background-color: var(--mt-clr-bg__fc);
|
|
4519
4525
|
width: 30px;
|
|
4520
4526
|
height: 30px;
|