UNPKG

@rocket.chat/fuselage-hooks

Version:

React hooks for Fuselage, Rocket.Chat's design system and UI toolkit

3 lines (2 loc) 16.7 kB
var e,n;e=this,n=function(e,n){var t=function(e,n){if(!e[n])return"contentBoxSize"===n?{inlineSize:e.contentRect.width,blockSize:e.contentRect.height}:{inlineSize:Math.round(e.target.getBoundingClientRect().width),blockSize:Math.round(e.target.getBoundingClientRect().height)};var t=e[n],r=Array.isArray(t)?t[0]:t;return{blockSize:r.blockSize,inlineSize:r.inlineSize}},r=function(e){return t(e,"contentBoxSize")},o=function(e){return t(e,"borderBoxSize")},i=function(e,t,r){var o=r?n.useMemo((function(){return e}),r):e,i=n.useRef(),u=n.useRef(),c=n.useCallback((function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];i.current=function(){o.apply(void 0,e)},clearTimeout(u.current),u.current=setTimeout(i.current,t)}),[o,t]),a=n.useCallback((function(){var e;clearTimeout(u.current),null===(e=i.current)||void 0===e||e.call(i)}),[]),f=n.useCallback((function(){clearTimeout(u.current)}),[]);return n.useEffect((function(){return function(){f()}}),[f]),n.useMemo((function(){return Object.assign(c,{flush:a,cancel:f})}),[c,a,f])},u="undefined"!=typeof window?n.useLayoutEffect:n.useEffect,c=function(){return c=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},c.apply(this,arguments)};function a(e,n,t,r){return new(t||(t=Promise))((function(o,i){function u(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(u,c)}a((r=r.apply(e,n||[])).next())}))}function f(e,n){var t,r,o,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},u=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return u.next=c(0),u.throw=c(1),u.return=c(2),"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function c(c){return function(a){return function(c){if(t)throw new TypeError("Generator is already executing.");for(;u&&(u=0,c[0]&&(i=0)),i;)try{if(t=1,r&&(o=2&c[0]?r.return:c[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,c[1])).done)return o;switch(r=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return i.label++,{value:c[1],done:!1};case 5:i.label++,r=c[1],c=[0];continue;case 7:c=i.ops.pop(),i.trys.pop();continue;default:if(!((o=(o=i.trys).length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){i=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){i.label=c[1];break}if(6===c[0]&&i.label<o[1]){i.label=o[1],o=c;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(c);break}o[2]&&i.ops.pop(),i.trys.pop();continue}c=n.call(e,i)}catch(e){c=[6,e],r=0}finally{t=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,a])}}}function s(e,n,t){if(t||2===arguments.length)for(var r,o=0,i=n.length;o<i;o++)!r&&o in n||(r||(r=Array.prototype.slice.call(n,0,o)),r[o]=n[o]);return e.concat(r||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var l=[{name:"xs",minViewportWidth:null,columns:4,gutterWidth:16},{name:"sm",minViewportWidth:600,columns:8,gutterWidth:16},{name:"md",minViewportWidth:768,columns:8,gutterWidth:24},{name:"lg",minViewportWidth:1024,columns:12,gutterWidth:24},{name:"xl",minViewportWidth:1280,columns:12,gutterWidth:24},{name:"xxl",minViewportWidth:1600,columns:12,gutterWidth:24},{name:"xxxl",minViewportWidth:1920,columns:12,gutterWidth:24}],d=function(e,n,t){return function(e,n,t){return!Array.isArray(n)||e.current!==n&&(e.current.length!==n.length||e.current.some((function(e,r){return!t(e,n[r])})))}(e,n,t)&&(e.current=n),e.current},v=function(e,t){void 0===t&&(t=Object.is);var r=n.useRef(e);return d(r,e,t)},h=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=v(e),o=n.useRef(r.map((function(e){return"undefined"!=typeof window&&"function"==typeof window.matchMedia&&matchMedia(e).matches}))),i=n.useCallback((function(e){if("undefined"==typeof window||"function"!=typeof window.matchMedia)return function(){};for(var n=r.map((function(e){return matchMedia(e)})),t=function(){o.current=n.map((function(e){return e.matches})),e()},i=0,u=n;i<u.length;i++){var c=u[i];"function"!=typeof c.addEventListener?c.addListener(t):c.addEventListener("change",t)}return function(){for(var e=0,r=n;e<r.length;e++){var o=r[e];"function"!=typeof o.removeEventListener?o.removeListener(t):o.removeEventListener("change",t)}}}),[r]),u=n.useCallback((function(){return o.current}),[]),c=n.useCallback((function(){return o.current}),[]);return n.useSyncExternalStore(i,u,c)},p=function(e){var t=n.useRef(e),r=n.useRef((function(){for(var e,n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return(e=t.current).call.apply(e,s([void 0],n,!1))}));return u((function(){t.current=e})),r.current},m=p,b=function(e){return!!h.apply(void 0,e?[e]:[])[0]},g=function(e){return b("(prefers-color-scheme: ".concat(e||"light",")"))};function y(e,n){var t=e[0],r=e[1];return[t,i(r,n,[])]}function S(e,t){return y(n.useState(e),t)}var w=Symbol("empty"),z="undefined"!=typeof window&&window.document?function(e){var t=n.useRef(w);return n.useLayoutEffect((function(){t.current===w&&(t.current=e())}),[e]),t}:function(e){return n.useRef(e())};function R(e){var t=e[0],r=e[1],o=n.useRef(r);n.useEffect((function(){return o.current=r,function(){o.current=void 0}}),[r]);var i=n.useCallback((function(e){var n=o.current;null==n||n(e)}),[]);return[t,i]}function E(e,t){n.useEffect((function(){var n=e.current;if(n){var r=function(){e.current&&t()};r();var o=new ResizeObserver(r);o.observe(n),window.addEventListener("resize",r);var i=function(e){for(var n=[],t=e.parentElement;t&&t!==document.documentElement;t=t.parentElement)n.push(t);return n}(n);return i.forEach((function(e){return e.addEventListener("scroll",r,{passive:!0})})),function(){o.disconnect(),window.removeEventListener("resize",r),i.forEach((function(e){return e.removeEventListener("scroll",r)}))}}}),[t,e])}var k,x,C={top:["t","b","r","l"],bottom:["b","t","r","l"],right:["r","l","t","b"],left:["l","r","b","t"]},B={start:["s","e","m"],middle:["m","s","e"],end:["e","s","m"]},M={t:"top",b:"bottom",l:"left",r:"right",s:"start",e:"end",m:"middle"},W={style:{position:"fixed",visibility:"hidden"}};function L(e){var n,t=e.placement,r=e.targetRect,o=e.containerRect,i=e.targetBoundaries,u=e.variantBoundaries,a=e.margin,f=void 0===a?0:a;if(!i)return W;for(var s=o.top,l=o.left,d=o.bottom,v=o.right,h=function(e){var n=e.split("-"),t=n[0],r=n[1];return[t,void 0===r?"middle":r]}(t),p=h[0],m=h[1],b=C[p],g=B[m],y=0,S=b;y<S.length;y++){var w=S[y],z=["t","b"].includes(w),R=z?["top","left"]:["left","top"],E=R[0],k=R[1],x=i[w],L=z?[r.height,r.width]:[r.width,r.height],O=L[1],D=z?[d,v]:[v,d],T=D[1],V=z?[s,l]:[l,s],I=V[1];if(!(x<V[0]||x+L[0]>D[0]))for(var A=0,P=g;A<P.length;A++){var j=P[A],H=u["".concat(z?"v":"h").concat(j)];if(!(H<I||H+O>T))return{style:(n={},n[E]=x,n[k]=H,n.position="fixed",n.zIndex=999999,n.opacity=1,n),placement:"".concat(M[w],"-").concat(M[j])}}}var N=b[0],F=["t","b"].includes(N),J=u["".concat(F?"v":"h").concat(g[0])],q=F?[o.height,r.height]:[o.width,r.width],Q=(q[0]-q[1])/2+(F?s:l);return{style:c({top:Q,left:J,position:"fixed",zIndex:999999},d<r.height+Q&&{bottom:f,overflowY:"auto"}),placement:"".concat(M[N],"-").concat(M[g[0]])}}"function"==typeof SuppressedError&&SuppressedError;var O=Symbol("once"),D=Symbol("evts"),T=function(){function e(){this[k]=new Map,this[x]=new WeakMap}return e.prototype.events=function(){return Array.from(this[D].keys())},e.prototype.has=function(e){return this[D].has(e)},e.prototype.on=function(e,n){var t,r=this,o=null!==(t=this[D].get(e))&&void 0!==t?t:[];return o.push(n),this[D].set(e,o),function(){return r.off(e,n)}},e.prototype.once=function(e,n){var t=this[O].get(n)||0;return this[O].set(n,t+1),this.on(e,n)},e.prototype.off=function(e,n){var t,r=this[D].get(e);if(r){var o=null!==(t=this[O].get(n))&&void 0!==t?t:0;o>1?this[O].set(n,o-1):this[O].delete(n),r.splice(r.findIndex((function(e){return e===n}))>>>0,1),0===r.length&&this[D].delete(e)}},e.prototype.emit=function(e){for(var n,t=this,r=[],o=1;o<arguments.length;o++)r[o-1]=arguments[o];var i=r[0];(function(e,n){for(var t,r=0,o=n.length;r<o;r++)!t&&r in n||(t||(t=Array.prototype.slice.call(n,0,r)),t[r]=n[r]);return[].concat(t||Array.prototype.slice.call(n))})(0,null!==(n=this[D].get(e))&&void 0!==n?n:[]).forEach((function(n){n(i),t[O].get(n)&&t.off(e,n)}))},e}();k=D,x=O;var V=function(e,n,t){if(!t)return n;var r=t.getItem(e);return r?JSON.parse(r):n};function I(e,t){var r=void 0;"undefined"!=typeof window&&(r="function"==typeof e?e():e);var o=function(e){return"fuselage-".concat(t,"-").concat(e)},i=new T;return function(e,t){var u=n.useRef(t);u.current=t;var c=n.useState((function(){return{current:V(o(e),t,r)}}))[0],a=n.useCallback((function(){return c.current}),[c]),f=n.useCallback((function(){return u.current}),[]),s=n.useCallback((function(n){var t=function(n){n.key===o(e)&&i.emit(e,n.newValue?JSON.parse(n.newValue):u.current)},r=i.on(e,(function(e){c.current=e,n()}));return window.addEventListener("storage",t),function(){r(),window.removeEventListener("storage",t)}}),[e,c]);return[n.useSyncExternalStore(s,a,f),n.useCallback((function(n){var t=n instanceof Function?n(c.current):n;return null==r||r.setItem(o(e),JSON.stringify(t)),i.emit(e,t),t}),[e,c])]}}var A=I((function(){return window.localStorage}),"localStorage"),P=I((function(){return window.sessionStorage}),"sessionStorage");e.getPositionStyle=L,e.useAutoFocus=function(e,t){void 0===e&&(e=!0);var r=n.useRef(null),o=n.useRef(t);return o.current=t,n.useEffect((function(){e&&r.current&&r.current.focus(o.current)}),[r,e]),r},e.useBorderBoxSize=function(e,t){var r=(void 0===t?{}:t).debounceDelay,c=void 0===r?0:r,a=n.useState((function(){var n,t,r,o;return{inlineSize:null!==(t=null===(n=e.current)||void 0===n?void 0:n.offsetWidth)&&void 0!==t?t:0,blockSize:null!==(o=null===(r=e.current)||void 0===r?void 0:r.offsetHeight)&&void 0!==o?o:0}})),f=a[0],s=a[1],l=i(s,c);return u((function(){var n=e.current;if(n){var t=new ResizeObserver((function(e){if(0!==e.length){var n=o(e[0]);l((function(e){return e.inlineSize===n.inlineSize&&e.blockSize===n.blockSize?e:{inlineSize:n.inlineSize,blockSize:n.blockSize}}))}}));return t.observe(n),s({inlineSize:n.offsetWidth,blockSize:n.offsetHeight}),function(){t.unobserve(n)}}}),[l]),f},e.useBreakpoints=function(e){void 0===e&&(e="em");var t=h.apply(void 0,n.useMemo((function(){return l.slice(1).map((function(n){return"(min-width: ".concat("px"===e?"".concat(n.minViewportWidth,"px"):"".concat(n.minViewportWidth/16,"em"),")")}))}),[e]));return n.useMemo((function(){return t.reduce((function(e,n,t){return n?s(s([],e,!0),[l[t+1].name],!1):e}),[l[0].name])}),[t])},e.useButtonPattern=function(e){var t=n.useCallback((function(n){"Space"!==n.code&&"Enter"!==n.code||(n.preventDefault(),e(n))}),[e]);return{onClick:e,onKeyDown:t,role:"button",tabIndex:0}},e.useClipboard=function(e,t){var r=void 0===t?{}:t,o=r.clearTime,i=void 0===o?2e3:o,u=r.onCopySuccess,c=void 0===u?function(){}:u,s=r.onCopyError,l=void 0===s?function(){}:s,d=n.useState(!1),v=d[0],h=d[1],m=p((function(n){return a(void 0,void 0,void 0,(function(){var t;return f(this,(function(r){switch(r.label){case 0:null==n||n.preventDefault(),r.label=1;case 1:return r.trys.push([1,3,,4]),[4,navigator.clipboard.writeText(e)];case 2:return r.sent(),c(n),h(!0),[3,4];case 3:if((t=r.sent())instanceof Error)return l(t),[2];throw t;case 4:return[2]}}))}))}));return n.useEffect((function(){if(v){var e=setTimeout((function(){h(!1)}),i);return function(){return clearTimeout(e)}}}),[v,i]),{copy:m,hasCopied:v}},e.useContentBoxSize=function(e,t){var o,c,a,f,s=(void 0===t?{}:t).debounceDelay,l=void 0===s?0:s,d=n.useState({inlineSize:null!==(c=null===(o=e.current)||void 0===o?void 0:o.clientWidth)&&void 0!==c?c:0,blockSize:null!==(f=null===(a=e.current)||void 0===a?void 0:a.clientHeight)&&void 0!==f?f:0}),v=d[0],h=d[1],p=i(h,l);return u((function(){var n=e.current;if(n){var t=new ResizeObserver((function(e){if(0!==e.length){var n=r(e[0]);p((function(e){return e.inlineSize===n.inlineSize&&e.blockSize===n.blockSize?e:{inlineSize:n.inlineSize,blockSize:n.blockSize}}))}}));return t.observe(n),h({inlineSize:n.clientWidth,blockSize:n.clientHeight}),function(){t.unobserve(n)}}}),[p]),v},e.useDarkMode=function(e){var n=g("dark");return void 0!==e?e:n},e.useDebouncedCallback=i,e.useDebouncedReducer=function(e,t,r,o){return y(void 0!==r?n.useReducer(e,t,r):n.useReducer(e,t),o)},e.useDebouncedState=S,e.useDebouncedUpdates=y,e.useDebouncedValue=function(e,t){var r=n.useState((function(){return e})),o=r[0],i=r[1];return n.useEffect((function(){var n=setTimeout((function(){i((function(){return e}))}),t);return function(){clearTimeout(n)}}),[e,t]),o},e.useEffectEvent=p,e.useElementIsVisible=function(){var e=n.useRef(),t=R(S(!1,100)),r=t[0],o=t[1],i=n.useState((function(){return new IntersectionObserver((function(e){e.forEach((function(e){o(e.isIntersecting)}))}))}))[0];return n.useEffect((function(){return function(){i.disconnect()}}),[i]),[n.useCallback((function(n){null!==n?(e.current=n,i.observe(e.current)):o(!1)}),[i,o]),r]},e.useIsomorphicLayoutEffect=u,e.useLazyRef=z,e.useLocalStorage=A,e.useMediaQueries=h,e.useMediaQuery=b,e.useMergedRefs=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var r=n.useRef(e);return u((function(){r.current=e})),n.useCallback((function(e){r.current.filter(Boolean).forEach((function(n){"function"!=typeof n?function(e){return"object"==typeof e}(n)&&(n.current=e):n(e)}))}),[])},e.useMutableCallback=m,e.useOutsideClick=function(e,t){var r=p((function(n){if(e.every((function(e){return n&&e.current&&!e.current.contains(n.target)})))return t(n)}));n.useEffect((function(){return document.addEventListener("mousedown",r),function(){document.removeEventListener("mousedown",r)}}),[r])},e.usePosition=function(e,t,r){var o=void 0===r?{}:r,u=o.margin,c=void 0===u?8:u,a=o.placement,f=void 0===a?"bottom-start":a,s=o.container,l=void 0===s?document.body:s,d=R(n.useState(W)),v=d[0],h=d[1],m=n.useRef(l);n.useEffect((function(){m.current=l}),[l]);var b=i(p((function(){var n=t.current,r=e.current,o=null==n?void 0:n.parentElement;if(n&&r&&o){var i=n.cloneNode(!0);i.style.bottom="",i.id="clone",o.appendChild(i);var u=i.getBoundingClientRect();o.removeChild(i);var a=r.getBoundingClientRect(),s=function(e){var n=e.anchorRect,t=e.targetRect,r=e.margin,o=void 0===r?0:r;return{t:n.top-t.height-o,b:n.bottom+o,r:n.right+o,l:n.left-t.width-o}}({anchorRect:a,targetRect:u,margin:c}),d=function(e){var n=e.anchorRect,t=e.targetRect;return{vm:-t.width/2+(n.left+n.width/2),vs:n.left,ve:n.left+n.width-t.width,hs:n.bottom-n.height,he:n.bottom-t.height,hm:n.bottom-n.height/2-t.height/2}}({anchorRect:a,targetRect:u});h(L({placement:f,containerRect:l.getBoundingClientRect(),targetBoundaries:s,variantBoundaries:d,targetRect:u,margin:c}))}})),30);return E(t,b),E(e,b),E(m,b),v},e.usePrefersColorScheme=g,e.usePrefersReducedData=function(){return b("(prefers-reduced-data: reduce)")},e.usePrefersReducedMotion=function(){return b("(prefers-reduced-motion: reduce)")},e.usePrevious=function(e){var t=n.useRef();return n.useEffect((function(){t.current=e})),t.current},e.useResizeObserver=function(e){var t=(void 0===e?{}:e).debounceDelay,i=void 0===t?0:t,u=n.useRef(null),c=S({borderBoxSize:{inlineSize:void 0,blockSize:void 0},contentBoxSize:{inlineSize:void 0,blockSize:void 0}},i),a=c[0],f=a.borderBoxSize,s=a.contentBoxSize,l=c[1];return n.useEffect((function(){var e=new ResizeObserver((function(e){var n=e[0];l({contentBoxSize:r(n),borderBoxSize:o(n)})}));return u.current&&e.observe(u.current),function(){e.disconnect()}}),[l]),{ref:u,contentBoxSize:s,borderBoxSize:f}},e.useSafeRefCallback=function(e){return n.useMemo((function(){var n;return function(t){"function"==typeof n&&n();var r=e(t);n=r||null}}),[e])},e.useSafely=R,e.useSessionStorage=P,e.useStableArray=v,e.useToggle=function(e){var t=n.useState((function(){return"function"==typeof e?!!e():!!e})),r=t[0],o=t[1],i=p((function(e){o((function(){return"boolean"==typeof e?e:"function"==typeof e?e(r):!r}))}));return[r,i]},e.useUniqueId=function(){var e=n.useRef(),t=n.useMemo((function(){return e.current||(e.current=Math.random().toString(36).slice(2)),e.current}),[]);return n.useDebugValue(t),t}},"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).FuselageHooks={},e.React); //# sourceMappingURL=index.umd.js.map