forstok-ui-lib 8.5.21 → 8.5.22
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.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +52 -52
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/dropdown/index.tsx +23 -0
- package/src/components/dropdown/styles.ts +4 -3
package/dist/index.js
CHANGED
|
@@ -4420,7 +4420,7 @@ function M(e,t){if(!1===e||null==e)throw new Error(t)}function L(e,t){if(!e){"un
|
|
|
4420
4420
|
}
|
|
4421
4421
|
`,sa=m.default.section`
|
|
4422
4422
|
position: relative;
|
|
4423
|
-
${({$top:e,$bottom:t,$placement:r,$alias:i,$openPosition:n,$externalWidth:a,$externalMinWidth:o,$area:l})=>{const s=e?parseInt(e)+5+"px":"40px";let d=`\n @keyframes droptodown {\n 90% {\n top: ${s}; \n }\n 100% { \n top: ${e||"35px"}; \n }\n }\n @keyframes droptoup {\n 50% { \n bottom: -100px; \n }\n 50% { \n bottom: -50px; \n }\n 100% { \n bottom: 0px; \n }\n }\n @keyframes dropgodown {\n 90% { \n bottom: ${s}; \n }\n 100% {\n bottom: ${t||"35px"}; \n }\n }\n @keyframse dropgoup {\n 50% { \n top: -100px; \n }\n 50% { \n top: -50px; \n }\n 100% { \n top: 0px; \n }\n }\n & ${na} { \n display: none;\n }\n &.is-shown {\n & ${oa} button { \n &._refNoActive {\n ${lt}\n }\n &:not(._refNoActive) {\n ${ot}\n }\n }\n @media only screen and (max-width: 767px) {\n & ${na} { \n display: grid; \n left: 0; \n bottom:0; \n ${"top"===r?"animation: dropgoup .075s;":"animation: droptoup .075s;"}\n overflow-x: hidden; \n }\n & ${ca} {\n ._refFilterDropdown a { \n text-align: left !important; \n }\n }\n }\n @media only screen and (min-width: 768px) {\n & ${na} { \n display: grid; \n ${"top"===r?`animation: dropgodown .075s linear; bottom: ${t||"35px"}; top: auto;`:`animation: droptodown .075s linear; top: ${e||"35px"};`}\n left: ${"_dropdownFilterContainer"===i&&"left"!==n?"100%":"left"===n?"0":"auto"};\n }\n }\n @media only screen and (min-width: 1024px) {\n & ${na} { \n left: ${"_dropdownFilterContainer"===i&&"left"!==n?"30%":"left"===n?"0":"auto"}; \n }\n }\n @media only screen and (min-width: 1280px) {\n & ${na} { \n left: ${"_dropdownFilterContainer"===i&&"left"!==n||"left"===n?"0":"auto"}; \n }\n }\n }\n `;return"_dropdownFilterContainer"===i&&(d+=`\n margin-top: 4px;\n ${oa} {\n margin-top: -4px;\n }\n `),a&&(d+=`\n width: ${a}\n `),o&&(d+=`\n min-width: ${o}\n `),"mobile"===l&&(d+=`\n @media (min-width: 320px) and (max-width: 480px) {\n ${na} { \n width: 100%;\n align-content: start;\n z-index: 88;\n }\n }\n `),d}}
|
|
4423
|
+
${({$top:e,$bottom:t,$placement:r,$alias:i,$openPosition:n,$externalWidth:a,$externalMinWidth:o,$area:l})=>{const s=e?parseInt(e)+5+"px":"40px";let d=`\n @keyframes droptodown {\n 90% {\n top: ${s}; \n }\n 100% { \n top: ${e||"35px"}; \n }\n }\n @keyframes droptoup {\n 50% { \n bottom: -100px; \n }\n 50% { \n bottom: -50px; \n }\n 100% { \n bottom: 0px; \n }\n }\n @keyframes dropgodown {\n 90% { \n bottom: ${s}; \n }\n 100% {\n bottom: ${t||"35px"}; \n }\n }\n @keyframse dropgoup {\n 50% { \n top: -100px; \n }\n 50% { \n top: -50px; \n }\n 100% { \n top: 0px; \n }\n }\n & ${na} { \n display: none;\n }\n &.is-shown {\n & ${oa} button { \n &._refNoActive {\n ${lt}\n }\n &:not(._refNoActive) {\n ${ot}\n }\n }\n @media only screen and (max-width: 767px) {\n & ${na} { \n display: grid; \n left: 0 !important; \n top: auto !important;\n bottom: 0 !important; \n ${"top"===r?"animation: dropgoup .075s;":"animation: droptoup .075s;"}\n overflow-x: hidden; \n }\n & ${ca} {\n ._refFilterDropdown a { \n text-align: left !important; \n }\n }\n }\n @media only screen and (min-width: 768px) {\n & ${na} { \n display: grid; \n ${"top"===r?`animation: dropgodown .075s linear; bottom: ${t||"35px"}; top: auto;`:`animation: droptodown .075s linear; top: ${e||"35px"};`}\n left: ${"_dropdownFilterContainer"===i&&"left"!==n?"100%":"left"===n?"0":"auto"};\n }\n }\n @media only screen and (min-width: 1024px) {\n & ${na} { \n left: ${"_dropdownFilterContainer"===i&&"left"!==n?"30%":"left"===n?"0":"auto"}; \n }\n }\n @media only screen and (min-width: 1280px) {\n & ${na} { \n left: ${"_dropdownFilterContainer"===i&&"left"!==n||"left"===n?"0":"auto"}; \n }\n }\n }\n `;return"_dropdownFilterContainer"===i&&(d+=`\n margin-top: 4px;\n ${oa} {\n margin-top: -4px;\n }\n `),a&&(d+=`\n width: ${a}\n `),o&&(d+=`\n min-width: ${o}\n `),"mobile"===l&&(d+=`\n @media (min-width: 320px) and (max-width: 480px) {\n ${na} { \n width: 100%;\n align-content: start;\n z-index: 88;\n }\n }\n `),d}}
|
|
4424
4424
|
@media only screen and (min-width: 1024px) {
|
|
4425
4425
|
&._refContainerhover:hover {
|
|
4426
4426
|
${na} {
|
|
@@ -4462,7 +4462,7 @@ function M(e,t){if(!1===e||null==e)throw new Error(t)}function L(e,t){if(!e){"un
|
|
|
4462
4462
|
display: block;
|
|
4463
4463
|
}
|
|
4464
4464
|
}
|
|
4465
|
-
`,ga=t=>{var{children:i,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:l,$internalWidth:s,$area:d,$openPosition:C,$placement:c,$top:p,onClick:h,$alias:g,type:x,portalId:m,$bottom:u,$isPopup:v}=t,w=D(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const f=r.useRef(null),F=(e,t)=>{const r=Number.parseInt(e||"",10);return Number.isNaN(r)?t:r},y=e=>null==e?void 0:e.querySelector("._refDropdownWrapper"),
|
|
4465
|
+
`,ga=t=>{var{children:i,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:l,$internalWidth:s,$area:d,$openPosition:C,$placement:c,$top:p,onClick:h,$alias:g,type:x,portalId:m,$bottom:u,$isPopup:v}=t,w=D(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const f=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,b=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=b(e);t&&(t.style.top="",t.style.bottom="",t.style.left="",t.style.right="",t.style.transform="",t.style.visibility="",t.style.animation="")},M=(e,t)=>{const r=b(e);r&&(r.style.visibility=t)},L=e=>{if(!m)return;const t=document.querySelector(`#${m} ._refDropdownPortal`),r=b(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"},O=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];e&&m&&L(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",O,!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=f.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",O,!0))}}),10),k(i)):(z(),t.style.display="block",n.classList.add("is-immuned"),m||M(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((()=>{L(i),t&&t.addEventListener("scroll",O,!0)}),10))}else e=()=>{(e=>{const t=b(e);if(!t)return;if(A())return void j(t);const r=E(e,t);B(t,r)})(i),M(i,"visible")},window.requestAnimationFrame((()=>e()));var e}),10),h&&h(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(Ca,{children:a}):null,Q=n?e.jsxs(da,{children:[n," ",P]}):null,T=i.filter((e=>r.isValidElement(e)?"control"===e.props["aria-label"]:null)),S=T&&r.isValidElement(T[0])?"hover"===x?e.jsxs(la,{children:[e.jsx(oa,Object.assign({className:"_refDropdownControl"},m&&{onMouseEnter:e=>{const t=f.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((()=>{L(n)}),10))}}},onMouseLeave:e=>{const t=f.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(oa,{className:"_refDropdownControlMobile",ref:f,onClick:I,children:T[0].props.children})]}):e.jsx(oa,{ref:f,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(ca,{$area:d,children:H[0].props.children}):null,N=i.filter((e=>r.isValidElement(e)?"action"===e.props["aria-label"]:null)),X=N&&r.isValidElement(N[0])?e.jsx(pa,{$position:N[0].props["data-position"],className:N[0].props.className,children:N[0].props.children}):null,V=e.jsxs(na,Object.assign({className:"_refDropdownWrapper"},s&&{$internalWidth:s},p&&{$top:p},C&&{$openPosition:C},c&&{$placement:c},u&&{$bottom:u},{children:[Q,Y,X]}));return e.jsxs(sa,Object.assign({className:"_refContainer "+(x?`_refContainer${x}`:"")},o&&{$externalWidth:o},l&&{$externalMinWidth:l},d&&{$area:d},p&&{$top:p},g&&{$alias:g},C&&{$openPosition:C},c&&{$placement:c},u&&{$bottom:u},w,{children:[S,e.jsx(aa,{className:"_refDropdownOverlay",onClick:()=>{z()}}),m?e.jsx(ia,{wrapperId:m,children:e.jsx(ha,{className:"_refDropdownPortal "+("hover"===x?"_refHover":""),children:V})}):V]}))},xa=t.css`
|
|
4466
4466
|
background-color: var(--mt-clr-bg__fc);
|
|
4467
4467
|
width: 30px;
|
|
4468
4468
|
height: 30px;
|