react-equal-height/clean/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={155:t=>{t.exports=e},274: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 u=n(905);Object.defineProperty(t,"EqualHeightElement",{enumerable:!0,get:function(){return r(u).default}});var a=n(684);Object.defineProperty(t,"EqualHeightContext",{enumerable:!0,get:function(){return a.EqualHeightContext}}),Object.defineProperty(t,"EqualHeightProvider",{enumerable:!0,get:function(){return a.EqualHeightProvider}}),Object.defineProperty(t,"EqualHeightConsumer",{enumerable:!0,get:function(){return a.EqualHeightConsumer}}),Object.defineProperty(t,"useEqualHeightContext",{enumerable:!0,get:function(){return a.useEqualHeightContext}}),Object.defineProperty(t,"getEqualHeightContext",{enumerable:!0,get:function(){return a.getEqualHeightContext}}),Object.defineProperty(t,"EqualHeightHolderContext",{enumerable:!0,get:function(){return a.EqualHeightHolderContext}}),Object.defineProperty(t,"EqualHeightHolderProvider",{enumerable:!0,get:function(){return a.EqualHeightHolderProvider}}),Object.defineProperty(t,"EqualHeightHolderConsumer",{enumerable:!0,get:function(){return a.EqualHeightHolderConsumer}}),Object.defineProperty(t,"useEqualHeightHolderContext",{enumerable:!0,get:function(){return a.useEqualHeightHolderContext}}),Object.defineProperty(t,"getEqualHeightHolderContext",{enumerable:!0,get:function(){return a.getEqualHeightHolderContext}})},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 u=n(848),a=n(155),l=n(684);t.default=function(e){var t=e.as,n=e.children,d=o(e,["as","children"]),s="holder_".concat((0,a.useId)()),c=t||"div",f=(0,a.useRef)(null),h=!1,g=(0,l.useEqualHeightContext)(),p=g.holdersInfo,v=g.maxSizes,m=g.setHoldersInfo,E=g.developerMode;d.forwardedref&&(h=!0,f=d.forwardedref);var H=(0,a.useState)(void 0),y=H[0],b=H[1],q=(0,a.useState)([]),x=q[0],O=q[1],C=(0,a.useState)([]),P=C[0],j=C[1],w=function(){if(null==f?void 0:f.current){var e=f.current.getBoundingClientRect().top;return Math.round(e)}},_=function(e){var t=w();if(b(t),"UPDATE_POSITION"===e){if(!(null==p?void 0:p.length))return;if(!p.some((function(e){return e.id===s&&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!==s}));return i(i([],n,!0),P.map((function(e){return{id:s,name:e.name,height:e.height,position:w()}})),!0);case"REMOVE":return t.filter((function(e){return e.id!==s}));default:return t}}))};return(0,a.useEffect)((function(){var e=x.reduce((function(e,t){var n=e.find((function(e){return e.name===t.name})),r=w();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"===E&&e.length&&(console.log('"Elements" updated:'),console.table(x)),j(e)}),[x]),(0,a.useEffect)((function(){_("UPDATE_POSITION")}),[v]),(0,a.useEffect)((function(){return _("ADD"),function(){return _("REMOVE")}}),[]),(0,a.useEffect)((function(){_("UPDATE")}),[P]),(0,u.jsx)(l.EqualHeightHolderProvider,{value:{elementsInfo:x,setElementsInfo:O,position:y},children:h?n:(0,a.createElement)(c,r({ref:f},d),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 u=o.Consumer;t.EqualHeightConsumer=u;var a=function(){var e=(0,r.useContext)(o);if(!e)throw new Error("useEqualHeightContext must be used within an EqualHeightProvider");return e};t.useEqualHeightContext=a;t.getEqualHeightContext=function(){return a()};var l=(0,r.createContext)({});t.EqualHeightHolderContext=l;var d=l.Provider;t.EqualHeightHolderProvider=d;var s=l.Consumer;t.EqualHeightHolderConsumer=s;var c=function(){var e=(0,r.useContext)(l);if(!e)throw new Error("useEqualHeightHolderContext must be used within an EqualHeightHolderProvider");return e};t.useEqualHeightHolderContext=c;t.getEqualHeightHolderContext=function(){return c()}},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},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 u=n(848),a=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,d=e.children,s=e.id,c=void 0===s?"context_".concat((0,a.useId)()):s,f=e.timeout,h=void 0===f?t.defaults.timeout:f,g=e.animationSpeed,p=void 0===g?t.defaults.animationSpeed:g,v=e.equalRows,m=void 0===v?t.defaults.equalRows:v,E=e.updateOnChange,H=void 0===E?t.defaults.updateOnChange:E,y=e.developerMode,b=void 0===y?t.defaults.developerMode:y,q=o(e,["as","children","id","timeout","animationSpeed","equalRows","updateOnChange","developerMode"]),x=n,O="object"==typeof window&&"object"==typeof window.document,C=(0,a.useState)(t.defaults.update),P=C[0],j=C[1],w=(0,a.useCallback)((function(){return j((function(e){return{value:!e.value}}))}),[]),_=(0,a.useState)(t.defaults.holdersInfo),S=_[0],M=_[1],A=(0,a.useState)(t.defaults.maxSizes),D=A[0],I=A[1],T=function(){var e=document.documentElement.scrollHeight>document.documentElement.clientHeight,t=0;if("number"==typeof p&&(t=1e3*p),"string"==typeof p){var n=parseFloat(p);if(isNaN(n))throw new Error("Invalid animationSpeed: '".concat(p,"'. Accepted values include numbers (e.g., 2), seconds (e.g., '2s'), or milliseconds (e.g., '500ms')"));t=p.endsWith("ms")?n:1e3*n}setTimeout((function(){var t=document.documentElement.scrollHeight>document.documentElement.clientHeight;e!==t&&w()}),t)};(0,a.useEffect)((function(){var e,t;if(O)return window.addEventListener("resize",h?function(){clearTimeout(e),e=window.setTimeout((function(){w(),T()}),h)}:w),window.addEventListener("orientationchange",h?function(){clearTimeout(t),t=window.setTimeout((function(){w(),T()}),h)}:w),function(){window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w)}}),[]),(0,a.useEffect)((function(){if(O){var e=setTimeout((function(){window.dispatchEvent(new CustomEvent("EqualHeight",{detail:{id:c,elements:D}}))}),0);return function(){return clearTimeout(e)}}}),[D]),(0,a.useMemo)((function(){w()}),i([],H,!0));return(0,a.useEffect)((function(){var e=S.reduce((function(e,t){var n,r=t.name,o=t.height,i=t.position,u=0;return"number"==typeof m&&(u=m),(n=m?e.find((function(e){return e.name===r&&"number"==typeof e.position&&Math.abs(e.position-(null!=i?i:0))<=u})):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}),[]);b&&("DEEP"===b&&S.length&&(console.log('"Holders" updated:'),console.table(S)),e.length&&(console.log("Final sizes updated:"),console.table(e))),I(e)}),[S]),(0,u.jsx)(l.EqualHeightProvider,{value:{update:P,animationSpeed:p,equalRows:m,forceUpdate:function(){w()},developerMode:b,updateOnChange:H,maxSizes:D,holdersInfo:S,setHoldersInfo:M},children:x?(0,a.createElement)(x,r({},q),d):d})}},848:(e,t,n)=>{e.exports=n(698)},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))},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=n(848);n(940);var l=n(155),d=n(684),s=u(n(531)),c=function(e){var t=e.name,n=e.as,u=e.children,f=e.placeholder,h=void 0!==f&&f,g=e.disable,p=void 0!==g&&g,v=o(e,["name","as","children","placeholder","disable"]),m="el_".concat((0,l.useId)()),E=n||"div",H=(0,l.useRef)(null);(0,l.useImperativeHandle)(v.forwardedref,(function(){return H.current}));var y=(0,d.useEqualHeightContext)(),b=y.update,q=y.animationSpeed,x=y.maxSizes,O=y.equalRows,C=y.developerMode,P=(0,d.useEqualHeightHolderContext)(),j=Boolean(P&&Object.keys(P).length),w=P.setElementsInfo,_=P.position,S=(0,l.useState)(),M=S[0],A=S[1],D=function(e){w&&w((function(n){var r=function(){if((null==H?void 0:H.current)&&!p){var e=H.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 D("ADD"),function(){return D("REMOVE")}}),[]),(0,l.useEffect)((function(){D("UPDATE")}),[h,b]),(0,l.useEffect)((function(){D(p?"REMOVE":"ADD")}),[p]),(0,l.useEffect)((function(){if(null==x?void 0:x.length){var e=x.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)}}),[x]);var I={height:"".concat(M,"px"),transitionDuration:0===q?"":"number"==typeof q?"".concat(q,"s"):q};return j?h||u?p?(0,a.jsx)(a.Fragment,{children:u}):(0,l.createElement)(E,r(r({ref:H,className:"equal-height-wrapper",style:I},v),C&&{"data-id":m,"data-name":t}),!h&&(C?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("small",{style:{display:"block",height:0,textAlign:"right"},children:[M||"undefined"," "]}),u]}):u)):null:(0,a.jsx)(s.default,{forwardedref:H,children:(0,a.jsx)(c,r({},v,{forwardedref:H,name:t,as:E,placeholder:h,disable:p,children:u}))})};t.default=c},940:(e,t,n)=>{n.r(t)}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e].call(i.exports,i,i.exports,r),i.exports}return r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(274)})()));