react-equal-height/index.js

A React library with TypeScript support that automatically compares and sets the highest element height, including the ability to sort elements per row. Protected by the 'use client' directive, making it compatible with React Server Components and Next.js

/*! For license information please see index.js.LICENSE.txt */
'use client';
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("react-equal-height",["react"],t):"object"==typeof exports?exports["react-equal-height"]=t(require("react")):e["react-equal-height"]=t(e.react)}(this,(e=>(()=>{"use strict";var t={56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var i={},a=[],u=0;u<e.length;u++){var l=e[u],s=r.base?l[0]+r.base:l[0],c=i[s]||0,d="".concat(s," ").concat(c);i[s]=c+1;var f=n(d),h={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==f)t[f].references++,t[f].updater(h);else{var p=o(h,r);r.byIndex=u,t.splice(u,0,{identifier:d,updater:p,references:1})}a.push(d)}return a}function o(e,t){var n=t.domAPI(t);n.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var u=n(i[a]);t[u].references--}for(var l=r(e,o),s=0;s<i.length;s++){var c=n(i[s]);0===t[c].references&&(t[c].updater(),t.splice(c,1))}i=l}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},155:t=>{t.exports=e},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var u=0;u<this.length;u++){var l=this[u][0];null!=l&&(a[l]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);r&&a[c[0]]||(void 0!==i&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=i),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),o&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=o):c[4]="".concat(o)),t.push(c))}},t}},531:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},i=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0});var a=n(848),u=n(155),l=n(684);t.default=function(e){var t=e.as,n=e.children,s=o(e,["as","children"]),c="holder_".concat((0,u.useId)()),d=t||"div",f=(0,u.useRef)(null),h=!1,p=(0,l.useEqualHeightContext)(),g=p.holdersInfo,v=p.maxSizes,m=p.setHoldersInfo,y=p.developerMode;s.forwardedref&&(h=!0,f=s.forwardedref);var E=(0,u.useState)(void 0),b=E[0],H=E[1],x=(0,u.useState)([]),q=x[0],O=x[1],C=(0,u.useState)([]),P=C[0],w=C[1],j=function(){if(null==f?void 0:f.current){var e=f.current.getBoundingClientRect().top;return Math.round(e)}},_=function(e){var t=j();if(H(t),"UPDATE_POSITION"===e){if(!(null==g?void 0:g.length))return;if(!g.some((function(e){return e.id===c&&e.position!==t})))return;e="UPDATE"}m&&m((function(t){switch(e){case"ADD":case"UPDATE":var n=t.filter((function(e){return e.id!==c}));return i(i([],n,!0),P.map((function(e){return{id:c,name:e.name,height:e.height,position:j()}})),!0);case"REMOVE":return t.filter((function(e){return e.id!==c}));default:return t}}))};return(0,u.useEffect)((function(){var e=q.reduce((function(e,t){var n=e.find((function(e){return e.name===t.name})),r=j();return n?(void 0!==n.height&&void 0!==t.height?n.height=Math.max(n.height,t.height):void 0!==t.height&&(n.height=t.height),n.position=r):e.push({name:t.name,height:void 0!==t.height?t.height:void 0,position:r}),e}),[]);"DEEP"===y&&e.length&&(console.log('"Elements" updated:'),console.table(q)),w(e)}),[q]),(0,u.useEffect)((function(){_("UPDATE_POSITION")}),[v]),(0,u.useEffect)((function(){return _("ADD"),function(){return _("REMOVE")}}),[]),(0,u.useEffect)((function(){_("UPDATE")}),[P]),(0,a.jsx)(l.EqualHeightHolderProvider,{value:{elementsInfo:q,setElementsInfo:O,position:b},children:h?n:(0,u.createElement)(d,r({ref:f},s),n)})}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},601:e=>{e.exports=function(e){return e[1]}},659:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},684:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.getEqualHeightHolderContext=t.useEqualHeightHolderContext=t.EqualHeightHolderConsumer=t.EqualHeightHolderProvider=t.EqualHeightHolderContext=t.getEqualHeightContext=t.useEqualHeightContext=t.EqualHeightConsumer=t.EqualHeightProvider=t.EqualHeightContext=void 0;var r=n(155),o=(0,r.createContext)({});t.EqualHeightContext=o;var i=o.Provider;t.EqualHeightProvider=i;var a=o.Consumer;t.EqualHeightConsumer=a;var u=function(){var e=(0,r.useContext)(o);if(!e)throw new Error("useEqualHeightContext must be used within an EqualHeightProvider");return e};t.useEqualHeightContext=u;t.getEqualHeightContext=function(){return u()};var l=(0,r.createContext)({});t.EqualHeightHolderContext=l;var s=l.Provider;t.EqualHeightHolderProvider=s;var c=l.Consumer;t.EqualHeightHolderConsumer=c;var d=function(){var e=(0,r.useContext)(l);if(!e)throw new Error("useEqualHeightHolderContext must be used within an EqualHeightHolderProvider");return e};t.useEqualHeightHolderContext=d;t.getEqualHeightHolderContext=function(){return d()}},698:(e,t)=>{var n=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(e,t,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==t.key&&(o=""+t.key),"key"in t)for(var i in r={},t)"key"!==i&&(r[i]=t[i]);else r=t;return t=r.ref,{$$typeof:n,type:e,key:o,ref:void 0!==t?t:null,props:r}}t.Fragment=r,t.jsx=o,t.jsxs=o},776:(e,t,n)=>{n.d(t,{A:()=>u});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".equal-height-wrapper {\n    overflow: hidden;\n    transition-property: height;\n    display: block;\n}\n",""]);const u=a},822:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},i=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))};Object.defineProperty(t,"__esModule",{value:!0}),t.defaults=void 0;var a=n(848),u=n(155),l=n(684);t.defaults={equalRows:!1,animationSpeed:.25,update:{value:!1},updateOnChange:[],forceUpdate:function(){},developerMode:!1,maxSizes:[],holdersInfo:[],timeout:200};t.default=function(e){var n=e.as,s=e.children,c=e.id,d=void 0===c?"context_".concat((0,u.useId)()):c,f=e.timeout,h=void 0===f?t.defaults.timeout:f,p=e.animationSpeed,g=void 0===p?t.defaults.animationSpeed:p,v=e.equalRows,m=void 0===v?t.defaults.equalRows:v,y=e.updateOnChange,E=void 0===y?t.defaults.updateOnChange:y,b=e.developerMode,H=void 0===b?t.defaults.developerMode:b,x=o(e,["as","children","id","timeout","animationSpeed","equalRows","updateOnChange","developerMode"]),q=n,O="object"==typeof window&&"object"==typeof window.document,C=(0,u.useState)(t.defaults.update),P=C[0],w=C[1],j=(0,u.useCallback)((function(){return w((function(e){return{value:!e.value}}))}),[]),_=(0,u.useState)(t.defaults.holdersInfo),S=_[0],M=_[1],A=(0,u.useState)(t.defaults.maxSizes),I=A[0],T=A[1],D=function(){var e=document.documentElement.scrollHeight>document.documentElement.clientHeight,t=0;if("number"==typeof g&&(t=1e3*g),"string"==typeof g){var n=parseFloat(g);if(isNaN(n))throw new Error("Invalid animationSpeed: '".concat(g,"'. Accepted values include numbers (e.g., 2), seconds (e.g., '2s'), or milliseconds (e.g., '500ms')"));t=g.endsWith("ms")?n:1e3*n}setTimeout((function(){var t=document.documentElement.scrollHeight>document.documentElement.clientHeight;e!==t&&j()}),t)};(0,u.useEffect)((function(){var e,t;if(O)return window.addEventListener("resize",h?function(){clearTimeout(e),e=window.setTimeout((function(){j(),D()}),h)}:j),window.addEventListener("orientationchange",h?function(){clearTimeout(t),t=window.setTimeout((function(){j(),D()}),h)}:j),function(){window.removeEventListener("resize",j),window.removeEventListener("orientationchange",j)}}),[]),(0,u.useEffect)((function(){if(O){var e=setTimeout((function(){window.dispatchEvent(new CustomEvent("EqualHeight",{detail:{id:d,elements:I}}))}),0);return function(){return clearTimeout(e)}}}),[I]),(0,u.useMemo)((function(){j()}),i([],E,!0));return(0,u.useEffect)((function(){var e=S.reduce((function(e,t){var n,r=t.name,o=t.height,i=t.position,a=0;return"number"==typeof m&&(a=m),(n=m?e.find((function(e){return e.name===r&&"number"==typeof e.position&&Math.abs(e.position-(null!=i?i:0))<=a})):e.find((function(e){return e.name===r})))?void 0!==n.height&&void 0!==o?n.height=Math.max(n.height,o):void 0!==o&&(n.height=o):e.push({name:r,height:void 0!==o?o:void 0,position:"number"==typeof i?i:void 0}),e}),[]);H&&("DEEP"===H&&S.length&&(console.log('"Holders" updated:'),console.table(S)),e.length&&(console.log("Final sizes updated:"),console.table(e))),T(e)}),[S]),(0,a.jsx)(l.EqualHeightProvider,{value:{update:P,animationSpeed:g,equalRows:m,forceUpdate:function(){j()},developerMode:H,updateOnChange:E,maxSizes:I,holdersInfo:S,setHoldersInfo:M},children:q?(0,u.createElement)(q,r({},x),s):s})}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},837:(e,t,n)=>{n.r(t),n.d(t,{default:()=>m});var r=n(72),o=n.n(r),i=n(825),a=n.n(i),u=n(659),l=n.n(u),s=n(56),c=n.n(s),d=n(540),f=n.n(d),h=n(113),p=n.n(h),g=n(776),v={};v.styleTagTransform=p(),v.setAttributes=c(),v.insert=l().bind(null,"head"),v.domAPI=a(),v.insertStyleElement=f();o()(g.A,v);const m=g.A&&g.A.locals?g.A.locals:void 0},848:(e,t,n)=>{e.exports=n(698)},900:function(e,t,n){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getEqualHeightHolderContext=t.useEqualHeightHolderContext=t.EqualHeightHolderConsumer=t.EqualHeightHolderProvider=t.EqualHeightHolderContext=t.getEqualHeightContext=t.useEqualHeightContext=t.EqualHeightConsumer=t.EqualHeightProvider=t.EqualHeightContext=t.EqualHeightElement=t.EqualHeightHolder=t.EqualHeight=void 0;var o=n(822);Object.defineProperty(t,"EqualHeight",{enumerable:!0,get:function(){return r(o).default}});var i=n(531);Object.defineProperty(t,"EqualHeightHolder",{enumerable:!0,get:function(){return r(i).default}});var a=n(905);Object.defineProperty(t,"EqualHeightElement",{enumerable:!0,get:function(){return r(a).default}});var u=n(684);Object.defineProperty(t,"EqualHeightContext",{enumerable:!0,get:function(){return u.EqualHeightContext}}),Object.defineProperty(t,"EqualHeightProvider",{enumerable:!0,get:function(){return u.EqualHeightProvider}}),Object.defineProperty(t,"EqualHeightConsumer",{enumerable:!0,get:function(){return u.EqualHeightConsumer}}),Object.defineProperty(t,"useEqualHeightContext",{enumerable:!0,get:function(){return u.useEqualHeightContext}}),Object.defineProperty(t,"getEqualHeightContext",{enumerable:!0,get:function(){return u.getEqualHeightContext}}),Object.defineProperty(t,"EqualHeightHolderContext",{enumerable:!0,get:function(){return u.EqualHeightHolderContext}}),Object.defineProperty(t,"EqualHeightHolderProvider",{enumerable:!0,get:function(){return u.EqualHeightHolderProvider}}),Object.defineProperty(t,"EqualHeightHolderConsumer",{enumerable:!0,get:function(){return u.EqualHeightHolderConsumer}}),Object.defineProperty(t,"useEqualHeightHolderContext",{enumerable:!0,get:function(){return u.useEqualHeightHolderContext}}),Object.defineProperty(t,"getEqualHeightHolderContext",{enumerable:!0,get:function(){return u.getEqualHeightHolderContext}})},905:function(e,t,n){var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},i=this&&this.__spreadArray||function(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var u=n(848);n(837);var l=n(155),s=n(684),c=a(n(531)),d=function(e){var t=e.name,n=e.as,a=e.children,f=e.placeholder,h=void 0!==f&&f,p=e.disable,g=void 0!==p&&p,v=o(e,["name","as","children","placeholder","disable"]),m="el_".concat((0,l.useId)()),y=n||"div",E=(0,l.useRef)(null);(0,l.useImperativeHandle)(v.forwardedref,(function(){return E.current}));var b=(0,s.useEqualHeightContext)(),H=b.update,x=b.animationSpeed,q=b.maxSizes,O=b.equalRows,C=b.developerMode,P=(0,s.useEqualHeightHolderContext)(),w=Boolean(P&&Object.keys(P).length),j=P.setElementsInfo,_=P.position,S=(0,l.useState)(),M=S[0],A=S[1],I=function(e){j&&j((function(n){var r=function(){if((null==E?void 0:E.current)&&!g){var e=E.current,t=e.style.height;e.style.height="auto";var n=e.offsetHeight;return e.style.height=t,n}}();switch(e){case"ADD":case"UPDATE":return n.some((function(e){return e.id===m}))?n.map((function(e){return e.id===m?{id:m,name:t,height:r,placeholder:h}:e})):i(i([],n,!0),[{id:m,name:t,height:r,placeholder:h}],!1);case"REMOVE":return n.filter((function(e){return e.id!==m}));default:return n}}))};(0,l.useEffect)((function(){return I("ADD"),function(){return I("REMOVE")}}),[]),(0,l.useEffect)((function(){I("UPDATE")}),[h,H]),(0,l.useEffect)((function(){I(g?"REMOVE":"ADD")}),[g]),(0,l.useEffect)((function(){if(null==q?void 0:q.length){var e=q.find((function(e){if(O){var n=0;return"number"==typeof O&&(n=O),e.name===t&&"number"==typeof e.position&&Math.abs(e.position-(null!=_?_:0))<=n}return e.name===t}));e&&e.height&&A(e.height)}}),[q]);var T={height:"".concat(M,"px"),transitionDuration:0===x?"":"number"==typeof x?"".concat(x,"s"):x};return w?h||a?g?(0,u.jsx)(u.Fragment,{children:a}):(0,l.createElement)(y,r(r({ref:E,className:"equal-height-wrapper",style:T},v),C&&{"data-id":m,"data-name":t}),!h&&(C?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)("small",{style:{display:"block",height:0,textAlign:"right"},children:[M||"undefined"," "]}),a]}):a)):null:(0,u.jsx)(c.default,{forwardedref:E,children:(0,u.jsx)(d,r({},v,{forwardedref:E,name:t,as:y,placeholder:h,disable:g,children:a}))})};t.default=d}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={id:e,exports:{}};return t[e].call(i.exports,i,i.exports,r),i.exports}return r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0,r(900)})()));