forstok-ui-lib 7.6.1 → 7.6.2

package/dist/index.js

@@ -4156,8 +4156,8 @@ function O(e,t){if(!1===e||null==e)throw new Error(t)}function L(e,t){if(!e){"un
   }
 `,ca=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:f}=t,v=b(t,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const w=r.useRef(null),F=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];if(e){const t=e.getBoundingClientRect(),r=document.querySelector(`#${m} ._refDropdownPortal`);if(r){const e=r.querySelector("._refDropdownWrapper"),i=t.left+t.width-e.getBoundingClientRect().width;r.style.left=(i>0?i:t.left)+"px",r.style.top=t.top+parseInt(p||"0")-32+"px"}}},y=()=>{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")}}const r=document.querySelector("._refScrollContainer");r&&r.removeEventListener("scroll",F,!0),setTimeout((()=>{if(m){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].style.left="0",e[t].style.top="0",e[t].classList.remove("is-shown")}}),10)},A=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"),r=i.classList.contains("is-shown"),a=i.getBoundingClientRect();r?(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"),r=e.querySelector("._refDropdownWrapper");e&&(e.classList.remove("is-shown"),e.style.left="0px",e.style.top="0px",r&&t&&t.removeEventListener("scroll",F,!0))}}),10)):(y(),t.style.display="block",n.classList.add("is-immuned"),i.classList.add("is-shown"),setTimeout((()=>{if(m){const e=document.querySelector(`#${m} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),r=e.querySelector("._refDropdownWrapper");e&&(a&&(r?setTimeout((()=>{r.style.right="auto";const i=a.left+a.width-r.getBoundingClientRect().width;e.style.left=(i>0?i:a.left)+"px",e.style.top=a.top+parseInt(p||"0")-32+"px",e.style.zIndex=f?"101":"8",t&&t.addEventListener("scroll",F,!0)}),10):(e.style.left=a.left+(parseInt(s||"0")+a.width)/2+"px",e.style.top=a.top+a.height+"px")),e.classList.add("is-shown"))}}),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 D=a?e.jsx(oa,{children:a}):null,E=n?e.jsxs(aa,{children:[n," ",D]}):null,B=i.filter((e=>r.isValidElement(e)?"control"===e.props["aria-label"]:null)),j=B&&r.isValidElement(B[0])?"hover"===x?e.jsxs(ia,{children:[e.jsx(ra,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=n.getBoundingClientRect(),t=document.querySelector(`#${m} ._refDropdownPortal`);if(t){if(e){t.style.left=e.left+(parseInt(s||"0")+e.width)/2+"px";let r=e.top+e.height;const i=t.querySelector("._refDropdownWrapper");i&&(i.style.display="block",r+i.clientHeight>=document.body.clientHeight&&(r=e.top-i.clientHeight-10)),t.style.top=r+"px"}t.classList.add("is-shown")}}}},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")&&(e.classList.remove("is-shown"),e.style.left="0",e.style.top="0")}),150)}}},{children:B[0].props.children})),e.jsx(ra,{className:"_refDropdownControlMobile",ref:w,onClick:A,children:B[0].props.children})]}):e.jsx(ra,{ref:w,onClick:A,children:B[0].props.children}):null,k=i.filter((e=>r.isValidElement(e)?"body"===e.props["aria-label"]:null)),O=k&&r.isValidElement(k[0])?e.jsx(la,{$area:d,children:k[0].props.children}):null,L=i.filter((e=>r.isValidElement(e)?"action"===e.props["aria-label"]:null)),M=L&&r.isValidElement(L[0])?e.jsx(sa,{$position:L[0].props["data-position"],className:L[0].props.className,children:L[0].props.children}):null,z=e.jsxs(ea,Object.assign({className:"_refDropdownWrapper"},s&&{$internalWidth:s},p&&{$top:p},c&&{$openPosition:c},C&&{$placement:C},u&&{$bottom:u},{children:[E,O,M]}));return e.jsxs(na,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},v,{children:[j,e.jsx(ta,{className:"_refDropdownOverlay",onClick:()=>{y()}}),m?e.jsx(_n,{wrapperId:m,children:e.jsx(da,{className:"_refDropdownPortal "+("hover"===x?"_refHover":""),children:z})}):z]}))},Ca=t.css`
   background-color: var(--mt-clr-bg__fc); 
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   padding: .5em .675em;
   &:hover {
     background-color: var(--mt-clr-bg);

package/dist/index.mjs

@@ -4156,8 +4156,8 @@ function L(e,t){if(!1===e||null==e)throw new Error(t)}function j(e,t){if(!e){"un
   }
 `,mo=r=>{var{children:i,title:n,subTitle:a,$externalWidth:o,$externalMinWidth:d,$internalWidth:C,$area:p,$openPosition:h,$placement:g,$top:x,onClick:m,$alias:u,type:v,portalId:w,$bottom:F,$isPopup:f}=r,y=B(r,["children","title","subTitle","$externalWidth","$externalMinWidth","$internalWidth","$area","$openPosition","$placement","$top","onClick","$alias","type","portalId","$bottom","$isPopup"]);const A=c(null),b=()=>{const e=document.getElementsByClassName("_refContainer is-shown")[0];if(e){const t=e.getBoundingClientRect(),r=document.querySelector(`#${w} ._refDropdownPortal`);if(r){const e=r.querySelector("._refDropdownWrapper"),i=t.left+t.width-e.getBoundingClientRect().width;r.style.left=(i>0?i:t.left)+"px",r.style.top=t.top+parseInt(x||"0")-32+"px"}}},D=()=>{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")}}const r=document.querySelector("._refScrollContainer");r&&r.removeEventListener("scroll",b,!0),setTimeout((()=>{if(w){const e=document.getElementsByClassName("_refDropdownPortal is-shown");if(e.length)for(let t=0;t<e.length;t++)e[t].style.left="0",e[t].style.top="0",e[t].classList.remove("is-shown")}}),10)},E=e=>{const t=A.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"),r=i.classList.contains("is-shown"),a=i.getBoundingClientRect();r?(t.style.display="none",n.classList.remove("is-immuned"),i.classList.remove("is-shown"),setTimeout((()=>{if(w){const e=document.querySelector(`#${w} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),r=e.querySelector("._refDropdownWrapper");e&&(e.classList.remove("is-shown"),e.style.left="0px",e.style.top="0px",r&&t&&t.removeEventListener("scroll",b,!0))}}),10)):(D(),t.style.display="block",n.classList.add("is-immuned"),i.classList.add("is-shown"),setTimeout((()=>{if(w){const e=document.querySelector(`#${w} ._refDropdownPortal`),t=document.querySelector("._refScrollContainer"),r=e.querySelector("._refDropdownWrapper");e&&(a&&(r?setTimeout((()=>{r.style.right="auto";const i=a.left+a.width-r.getBoundingClientRect().width;e.style.left=(i>0?i:a.left)+"px",e.style.top=a.top+parseInt(x||"0")-32+"px",e.style.zIndex=f?"101":"8",t&&t.addEventListener("scroll",b,!0)}),10):(e.style.left=a.left+(parseInt(C||"0")+a.width)/2+"px",e.style.top=a.top+a.height+"px")),e.classList.add("is-shown"))}}),10),m&&m(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="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)})),[w]);const k=a?e(po,{children:a}):null,O=n?t(so,{children:[n," ",k]}):null,z=i.filter((e=>s(e)?"control"===e.props["aria-label"]:null)),M=z&&s(z[0])?"hover"===v?t(co,{children:[e(lo,Object.assign({className:"_refDropdownControl"},w&&{onMouseEnter:e=>{const t=A.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=n.getBoundingClientRect(),t=document.querySelector(`#${w} ._refDropdownPortal`);if(t){if(e){t.style.left=e.left+(parseInt(C||"0")+e.width)/2+"px";let r=e.top+e.height;const i=t.querySelector("._refDropdownWrapper");i&&(i.style.display="block",r+i.clientHeight>=document.body.clientHeight&&(r=e.top-i.clientHeight-10)),t.style.top=r+"px"}t.classList.add("is-shown")}}}},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")&&(e.classList.remove("is-shown"),e.style.left="0",e.style.top="0")}),150)}}},{children:z[0].props.children})),e(lo,{className:"_refDropdownControlMobile",ref:A,onClick:E,children:z[0].props.children})]}):e(lo,{ref:A,onClick:E,children:z[0].props.children}):null,I=i.filter((e=>s(e)?"body"===e.props["aria-label"]:null)),L=I&&s(I[0])?e(ho,{$area:p,children:I[0].props.children}):null,j=i.filter((e=>s(e)?"action"===e.props["aria-label"]:null)),Q=j&&s(j[0])?e(go,{$position:j[0].props["data-position"],className:j[0].props.className,children:j[0].props.children}):null,P=t(ao,Object.assign({className:"_refDropdownWrapper"},C&&{$internalWidth:C},x&&{$top:x},h&&{$openPosition:h},g&&{$placement:g},F&&{$bottom:F},{children:[O,L,Q]}));return t(Co,Object.assign({className:"_refContainer "+(v?`_refContainer${v}`:"")},o&&{$externalWidth:o},d&&{$externalMinWidth:d},p&&{$area:p},x&&{$top:x},u&&{$alias:u},h&&{$openPosition:h},g&&{$placement:g},F&&{$bottom:F},y,{children:[M,e(oo,{className:"_refDropdownOverlay",onClick:()=>{D()}}),w?e(no,{wrapperId:w,children:e(xo,{className:"_refDropdownPortal "+("hover"===v?"_refHover":""),children:P})}):P]}))},uo=n`
   background-color: var(--mt-clr-bg__fc); 
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   padding: .5em .675em;
   &:hover {
     background-color: var(--mt-clr-bg);

package/package.json

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

package/src/components/emoji/styles.ts

@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 
 const ButtonStyles = css`
   background-color: var(--mt-clr-bg__fc); 
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   padding: .5em .675em;
   &:hover {
     background-color: var(--mt-clr-bg);