@hyperdart/frontend 2.0.0 → 2.0.2

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("react-router-dom"),a=require("@mui/material/styles"),n=require("react-dom/client");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r.apply(this,arguments)}const o={default:{palette:{mode:"light"},typography:{useNextVariants:!0}},light:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"light"},typography:{useNextVariants:!0}},lightsOut:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"dark"},typography:{useNextVariants:!0}},dark:{palette:{primary:{main:"#F05F40"},type:"dark",background:{default:"#000",paper:"#000"}},shadows:Array(25).fill("0px 4px 12px #888888"),typography:{useNextVariants:!0}}};function s(t,a){window.onmessage=function(r){if("dataRefresh"===r.data.type){const o=r.data.searchData&&r.data.searchData[0];!function(t,a,r,o){const s=n.createRoot(document.getElementById("root")),c=location.pathname.indexOf(a)<0?"":location.pathname.slice(0,location.pathname.indexOf(a));s.render(e.createElement(t,{baseURL:a,basename:c,searchData:r,UIOptions:o}))}(t,a,o,r.data.UIOptions)}};const r=new ResizeObserver((e=>{if(e.length>0){const t=e[0].target.clientHeight;window.parent.postMessage({type:"resizeIframe",height:t},"*")}})),o=document.getElementById("root");o&&r.observe(o)}class c extends e.Component{constructor(e){super(e),this.state={themeName:e.themeName||"light"},this.themeSource=e.theme||o,this.theme=a.createTheme(a.adaptV4Theme(this.themeSource[this.state.themeName]))}componentDidUpdate(e){this.props.themeName!==e.themeName&&(this.theme=a.createTheme(a.adaptV4Theme(this.themeSource[this.props.themeName])),this.setState({themeName:this.props.themeName}))}render(){return e.createElement(a.StyledEngineProvider,{injectFirst:!0},e.createElement(a.ThemeProvider,{theme:this.theme},this.props.children))}}const i=a=>{const n=e.useRef(!1),r=t.useNavigate(),o=t.useLocation();return e.useEffect((()=>{a.searchData&&a.searchData.componentPath&&r(a.searchData.componentPath,{replace:!0})}),[]),e.useEffect((()=>{const e=o.pathname+o.search;n.current?e&&(!a.searchData||!a.searchData.componentPath||a.searchData&&a.searchData.componentPath&&e!==a.searchData.componentPath)&&window.parent.postMessage({type:"updateComponentPath",componentPath:e},"*"):n.current=!0}),[o?.pathname,o?.search]),e.createElement(a.comp,a)};exports.themes=o,exports.withHD=a=>{const n=n=>{let{quickPanel:o,basename:s,searchData:h,UIOptions:m,...p}=n?{...n}:{};o=o||!0,s=s||"",p.search=p.search||(e=>console.log("New query = ",e));const l=h&&("object"==typeof h||Array.isArray(h)&&h.length>0);n.UIOptions&&(n.UIOptions.switchFullScreen=(e=!0,t=!1)=>{window.parent.postMessage({type:"switchFullScreen",fullScreen:e,navigatedViaRoute:t},"*")},n.UIOptions.showClose=()=>{window.parent.postMessage({type:"showClose"},"*")});let u=!0;try{u=window.self!==window.top}catch(e){u=!0}return e.createElement(e.Fragment,null,l||m&&m.sandbox||!u?n.match?e.createElement(i,n):e.createElement(t.BrowserRouter,{basename:s},e.createElement(c,{themeName:m&&m.themeName,theme:m&&m.theme},e.createElement(t.Routes,null,e.createElement(t.Route,{path:n.baseURL,element:e.createElement(i,r({},n,{comp:a,quickPanel:o}))}),e.createElement(t.Route,{path:"*",element:e.createElement(i,r({},n,{comp:a,quickPanel:!1}))})))):e.createElement(e.Fragment,null),!l&&m&&m.sandbox?e.createElement("div",{style:{position:"fixed",top:0,width:"100%",display:"flex",justifyContent:"center",backgroundColor:"red",color:"white"}},e.createElement("h6",{style:{margin:"5px"}}," No search data received. Component will not be loaded... ")):e.createElement(e.Fragment,null))};return n.initHD=s,n};
+"use strict";var e=require("react"),t=require("react-router-dom"),n=require("@mui/material/styles"),a=require("react-dom/client"),o=require("@mui/material"),r=require("@mui/icons-material/Add"),i=require("@mui/icons-material/FilterList"),s=require("@mui/icons-material/DoubleArrow"),l=require("@mui/icons-material/Close");function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},c.apply(this,arguments)}const m={default:{palette:{mode:"light"},typography:{useNextVariants:!0}},light:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"light"},typography:{useNextVariants:!0}},lightsOut:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"dark"},typography:{useNextVariants:!0}},dark:{palette:{primary:{main:"#F05F40"},type:"dark",background:{default:"#000",paper:"#000"}},shadows:Array(25).fill("0px 4px 12px #888888"),typography:{useNextVariants:!0}}};function p(t,n){window.onmessage=function(o){if("dataRefresh"===o.data.type){const r=o.data.searchData&&o.data.searchData[0];!function(t,n,o,r){const i=a.createRoot(document.getElementById("root")),s=location.pathname.indexOf(n)<0?"":location.pathname.slice(0,location.pathname.indexOf(n));i.render(e.createElement(t,{baseURL:n,basename:s,searchData:o,UIOptions:r}))}(t,n,r,o.data.UIOptions)}};const o=new ResizeObserver((e=>{if(e.length>0){const t=e[0].target.clientHeight;window.parent.postMessage({type:"resizeIframe",height:t},"*")}})),r=document.getElementById("root");r&&o.observe(r)}const d=n.styled(o.Fab)((({theme:e})=>({zIndex:"5",position:"fixed",bottom:58,right:10,opacity:.8,width:"48px",height:"48px",[e.breakpoints.up("lg")]:{bottom:58,right:"calc(100% - 1140px)"}}))),u=n.styled("div")((({theme:e})=>({display:"flex",justifyContent:"space-evenly",cursor:"pointer",position:"sticky",bottom:0,backgroundColor:e.palette.background.default,zIndex:1e3}))),h=t=>{const{isMdUp:n}=t,[a,c]=e.useState(n),[m,p]=e.useState(!1),{menu:h,componentFullWidth:y,fullHeight:g,applyBtnMdUp:f,applyBtnMdUpOnClick:x,applyBtnSmDown:w,applyBtnSmDownOnClick:E,filters:b,noOfFilters:C,preventAutoClose:v}=t.secondaryMenu,k=()=>{c(!a),p(!m)},S=e=>{k(),e()},_=()=>{k()};return e.useEffect((()=>{if(t.secondaryMenu?.menu&&document.getElementById("secondaryMenu")){const e=document.getElementById("secondaryMenu").clientHeight>window.innerHeight;t.setHeightOverflow(e)}}),[t.secondaryMenu?.menu]),e.createElement(e.Fragment,null,!a&&e.createElement(d,{onClick:k,color:"primary",className:y?"fabButtonClose":"fabButton"},b?C?e.createElement(o.Badge,{badgeContent:C,color:"primary"},e.createElement(i,null)):e.createElement(i,null):e.createElement(r,null)),n&&a&&e.createElement(o.Drawer,{variant:"persistent",anchor:"right",open:a,PaperProps:{elevation:1,id:"secondaryMenu",sx:{boxSizing:"border-box",paddingTop:"4px",width:a?"100%":0,position:"static",height:g?"inherit":"auto"}}},h,f&&x?e.createElement(u,null,e.createElement(o.Button,{variant:"outlined",sx:{width:"50%"},color:"primary",onClick:_},"Close"),e.createElement(o.Button,{variant:"contained",sx:{width:"50%"},color:"primary",onClick:()=>S(x)},"Apply")):e.createElement(o.Box,{sx:{display:"flex",padding:"16px",cursor:"pointer"},onClick:k},e.createElement(o.Typography,{variant:"caption"},"Hide Menu"),e.createElement(s,{sx:{color:"grey",width:16,height:20}}))),!n&&e.createElement(o.Drawer,{anchor:"right",open:m,onClose:k,PaperProps:{sx:{width:"80%"}}},e.createElement("div",{tabIndex:0,role:"button",onClick:w&&E||v?void 0:k,onKeyDown:w&&E||v?void 0:k},v&&e.createElement(o.Box,{sx:{display:"flex",justifyContent:"flex-start",padding:"10px"}},e.createElement(o.IconButton,{onClick:k,edge:"end","aria-label":"close",size:"large"},e.createElement(l,null))),h,w&&E&&e.createElement(u,null,e.createElement(o.Button,{variant:"outlined",color:"primary",style:{width:"50%"},onClick:_},"Close"),e.createElement(o.Button,{variant:"contained",color:"primary",style:{width:"50%"},onClick:()=>S(E)},"Apply")))))};var y=e.memo(h);const g=({secondaryMenuProps:t,isMdUp:n})=>{const[a,o]=e.useState(!1),[r,i]=e.useState({scrollPos:0,top:0}),s=e.useRef(null);return e.useEffect((()=>{const e=()=>{const e=s?.current?.offsetHeight,t=window.innerHeight;i((n=>{const a=n.scrollPos-window.scrollY;let o=n.top+a;return o>0&&(o=0),o<t-e&&(o=t-e),{top:o,scrollPos:window.scrollY}}))};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}}),[]),t&&""!==t&&""!==t.menu?e.createElement("div",{ref:s,style:{position:"sticky",top:0,bottom:"auto",display:"flex",flexDirection:"column",top:a?r?.top:0,width:n?"240px":0,height:"100%"}},e.createElement(y,{setHeightOverflow:o,secondaryMenu:t,isMdUp:n})):null};class f extends e.Component{constructor(e){super(e),this.state={themeName:e.themeName||"light"},this.themeSource=e.theme||m,this.theme=n.createTheme(n.adaptV4Theme(this.themeSource[this.state.themeName]))}componentDidUpdate(e){this.props.themeName!==e.themeName&&(this.theme=n.createTheme(n.adaptV4Theme(this.themeSource[this.props.themeName])),this.setState({themeName:this.props.themeName}))}render(){return e.createElement(n.StyledEngineProvider,{injectFirst:!0},e.createElement(n.ThemeProvider,{theme:this.theme},this.props.children))}}const x=n=>{const a=e.useRef(!1),r=t.useNavigate(),i=t.useLocation(),s=o.useTheme(),l=o.useMediaQuery(s.breakpoints.up("md")),{secondaryMenuProps:c,format:m,UIOptions:p}=n,d="fullscreen"===m;return e.useEffect((()=>{n.searchData&&n.searchData.componentPath&&r(n.searchData.componentPath,{replace:!0})}),[]),e.useEffect((()=>{const e=i.pathname+i.search;a.current?e&&(!n.searchData||!n.searchData.componentPath||n.searchData&&n.searchData.componentPath&&e!==n.searchData.componentPath)&&window.parent.postMessage({type:"updateComponentPath",componentPath:e},"*"):a.current=!0}),[i?.pathname,i?.search]),e.createElement("div",{style:{display:"flex",position:"relative",flexDirection:"row",width:"100%"}},e.createElement("div",{style:{width:l&&d&&c&&""!==c&&""!==c.menu?"calc(100% - 400px)":"100%",maxWidth:l&&d&&c&&""!==c&&""!==c.menu?"966px":"1160px",margin:l&&d&&p.componentMargin?p.componentMargin:""}},e.createElement(n.comp,n)),d?((t,n)=>e.createElement(g,{secondaryMenuProps:t,isMdUp:n}))(c,l):null)};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("/* placeholder animations */\n.imgComponentStyles_placeholder__GXJke {\n    margin: 0 auto;\n    width: 100%;\n    height: 18px;\n    border-radius: 8px;\n    background-color: #eee;\n}\n\n@keyframes imgComponentStyles_placeHolderShimmer__5-fnD {\n    0% {\n        background-position: -468px 0\n    }\n\n    100% {\n        background-position: 468px 0\n    }\n}\n\n.imgComponentStyles_animated-background__vGXc6 {\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: imgComponentStyles_placeHolderShimmer__5-fnD;\n    animation-timing-function: linear;\n    background: darkgray;\n    background: linear-gradient(to right, #eeeeee 15%, #b2b2b2 18%, #eeeeee 33%);\n    background-size: 800px 104px;\n    height: 100%;\n    border-radius: 20px;\n    position: relative;\n}\n\n/* blinking dot */\n@keyframes imgComponentStyles_up-right__Y-xzl {\n    0% {\n        transform: scale(1);\n        opacity: .25\n    }\n\n    50% {\n        transform: scale (1, 5);\n        opacity: 1;\n    }\n\n    100% {\n        transform: scale(1);\n        opacity: .25;\n    }\n}\n\n.imgComponentStyles_border__Lvjsc {\n    border-radius: 50%;\n    width: 8px;\n    height: 8px;\n    opacity: .25;\n}\n\n.imgComponentStyles_dot-animation__T9Onq {\n    background-color: white;\n    position: relative;\n    top: -12px;\n    left: 30px;\n    -webkit-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    -moz-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    -o-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n}");exports.Img=t=>{const{isLoading:n,src:a,alt:o,placeholderClassName:r,placeholderStyle:i,contentClassName:s,contentStyle:l,onError:c,fallbackUrl:m,id:p,onClick:d}=t,[u,h]=e.useState(0);return n?e.createElement("div",{style:{...i,height:!r&&i&&(i.height||"20px"),width:!r&&i&&(i.width||"100px")},className:`${r} animated-background`}):e.createElement("img",{className:s,style:{...l},alt:o,src:a,onError:e=>{m&&e.target.src!==m&&!u&&(e.target.src=m,h(u+1)),c&&u<2&&(h(u+1),c(e))},id:p,onClick:d||(()=>{})})},exports.themes=m,exports.withHD=n=>{const a=a=>{const[o,r]=e.useState("");let{quickPanel:i,basename:s,searchData:l,UIOptions:m,...p}=a?{...a}:{};i=i||!0,s=s||"",p.search=p.search||(e=>console.log("New query = ",e));const d=l&&("object"==typeof l||Array.isArray(l)&&l.length>0);a.UIOptions&&(a.UIOptions.switchFullScreen=(e=!0,t=!1)=>{window.parent.postMessage({type:"switchFullScreen",fullScreen:e,navigatedViaRoute:t},"*")},a.UIOptions.secondaryMenu=e=>{r(e)},a.UIOptions.searchQuery=e=>{window.parent.postMessage({type:"searchQuery",query:e},"*")});let u=!0;try{u=window.self!==window.top}catch(e){u=!0}return e.createElement(e.Fragment,null,d||m&&m.sandbox||!u?a.match?e.createElement(x,c({},a,{secondaryMenuProps:o})):e.createElement(t.BrowserRouter,{basename:s},e.createElement(f,{themeName:m&&m.themeName,theme:m&&m.theme},e.createElement(t.Routes,null,e.createElement(t.Route,{path:a.baseURL,element:e.createElement(x,c({},a,{comp:n,quickPanel:i,secondaryMenuProps:o,format:m.format}))}),e.createElement(t.Route,{path:"*",element:e.createElement(x,c({},a,{comp:n,quickPanel:!1,secondaryMenuProps:o,format:m.format}))})))):e.createElement(e.Fragment,null),!d&&m&&m.sandbox?e.createElement("div",{style:{position:"fixed",top:0,width:"100%",display:"flex",justifyContent:"center",backgroundColor:"red",color:"white"}},e.createElement("h6",{style:{margin:"5px"}}," No search data received. Component will not be loaded... ")):e.createElement(e.Fragment,null))};return a.initHD=p,a};
 //# sourceMappingURL=index.js.map

package/dist/index.modern.js

@@ -1,2 +1,2 @@
-import e,{Fragment as t,Component as a,useRef as n,useEffect as r}from"react";import{BrowserRouter as o,Routes as s,Route as c,useNavigate as m,useLocation as i}from"react-router-dom";import{createTheme as h,adaptV4Theme as p,StyledEngineProvider as l,ThemeProvider as d}from"@mui/material/styles";import u from"react-dom/client";function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},y.apply(this,arguments)}const g={default:{palette:{mode:"light"},typography:{useNextVariants:!0}},light:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"light"},typography:{useNextVariants:!0}},lightsOut:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"dark"},typography:{useNextVariants:!0}},dark:{palette:{primary:{main:"#F05F40"},type:"dark",background:{default:"#000",paper:"#000"}},shadows:Array(25).fill("0px 4px 12px #888888"),typography:{useNextVariants:!0}}};function f(t,a){window.onmessage=function(n){if("dataRefresh"===n.data.type){const r=n.data.searchData&&n.data.searchData[0];!function(t,a,n,r){const o=u.createRoot(document.getElementById("root")),s=location.pathname.indexOf(a)<0?"":location.pathname.slice(0,location.pathname.indexOf(a));o.render(e.createElement(t,{baseURL:a,basename:s,searchData:n,UIOptions:r}))}(t,a,r,n.data.UIOptions)}};const n=new ResizeObserver((e=>{if(e.length>0){const t=e[0].target.clientHeight;window.parent.postMessage({type:"resizeIframe",height:t},"*")}})),r=document.getElementById("root");r&&n.observe(r)}class w extends a{constructor(e){super(e),this.state={themeName:e.themeName||"light"},this.themeSource=e.theme||g,this.theme=h(p(this.themeSource[this.state.themeName]))}componentDidUpdate(e){this.props.themeName!==e.themeName&&(this.theme=h(p(this.themeSource[this.props.themeName])),this.setState({themeName:this.props.themeName}))}render(){return e.createElement(l,{injectFirst:!0},e.createElement(d,{theme:this.theme},this.props.children))}}const b=t=>{const a=n(!1),o=m(),s=i();return r((()=>{t.searchData&&t.searchData.componentPath&&o(t.searchData.componentPath,{replace:!0})}),[]),r((()=>{const e=s.pathname+s.search;a.current?e&&(!t.searchData||!t.searchData.componentPath||t.searchData&&t.searchData.componentPath&&e!==t.searchData.componentPath)&&window.parent.postMessage({type:"updateComponentPath",componentPath:e},"*"):a.current=!0}),[s?.pathname,s?.search]),e.createElement(t.comp,t)},E=a=>{const n=n=>{let{quickPanel:r,basename:m,searchData:i,UIOptions:h,...p}=n?{...n}:{};r=r||!0,m=m||"",p.search=p.search||(e=>console.log("New query = ",e));const l=i&&("object"==typeof i||Array.isArray(i)&&i.length>0);n.UIOptions&&(n.UIOptions.switchFullScreen=(e=!0,t=!1)=>{window.parent.postMessage({type:"switchFullScreen",fullScreen:e,navigatedViaRoute:t},"*")},n.UIOptions.showClose=()=>{window.parent.postMessage({type:"showClose"},"*")});let d=!0;try{d=window.self!==window.top}catch(e){d=!0}return e.createElement(t,null,l||h&&h.sandbox||!d?n.match?e.createElement(b,n):e.createElement(o,{basename:m},e.createElement(w,{themeName:h&&h.themeName,theme:h&&h.theme},e.createElement(s,null,e.createElement(c,{path:n.baseURL,element:e.createElement(b,y({},n,{comp:a,quickPanel:r}))}),e.createElement(c,{path:"*",element:e.createElement(b,y({},n,{comp:a,quickPanel:!1}))})))):e.createElement(e.Fragment,null),!l&&h&&h.sandbox?e.createElement("div",{style:{position:"fixed",top:0,width:"100%",display:"flex",justifyContent:"center",backgroundColor:"red",color:"white"}},e.createElement("h6",{style:{margin:"5px"}}," No search data received. Component will not be loaded... ")):e.createElement(e.Fragment,null))};return n.initHD=f,n};export{g as themes,E as withHD};
+import e,{memo as t,useState as n,useEffect as a,useRef as o,Fragment as r,Component as i}from"react";import{BrowserRouter as l,Routes as s,Route as c,useNavigate as m,useLocation as p}from"react-router-dom";import{styled as d,createTheme as h,adaptV4Theme as u,StyledEngineProvider as y,ThemeProvider as g}from"@mui/material/styles";import f from"react-dom/client";import{Fab as x,Badge as w,Drawer as b,Button as E,Box as C,Typography as k,IconButton as v,useTheme as _,useMediaQuery as S}from"@mui/material";import M from"@mui/icons-material/Add";import P from"@mui/icons-material/FilterList";import N from"@mui/icons-material/DoubleArrow";import D from"@mui/icons-material/Close";function O(){return O=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},O.apply(this,arguments)}const U={default:{palette:{mode:"light"},typography:{useNextVariants:!0}},light:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"light"},typography:{useNextVariants:!0}},lightsOut:{palette:{primary:{main:"#F05F40"},secondary:{main:"#40f0bb"},type:"dark"},typography:{useNextVariants:!0}},dark:{palette:{primary:{main:"#F05F40"},type:"dark",background:{default:"#000",paper:"#000"}},shadows:Array(25).fill("0px 4px 12px #888888"),typography:{useNextVariants:!0}}};function I(t,n){window.onmessage=function(a){if("dataRefresh"===a.data.type){const o=a.data.searchData&&a.data.searchData[0];!function(t,n,a,o){const r=f.createRoot(document.getElementById("root")),i=location.pathname.indexOf(n)<0?"":location.pathname.slice(0,location.pathname.indexOf(n));r.render(e.createElement(t,{baseURL:n,basename:i,searchData:a,UIOptions:o}))}(t,n,o,a.data.UIOptions)}};const a=new ResizeObserver((e=>{if(e.length>0){const t=e[0].target.clientHeight;window.parent.postMessage({type:"resizeIframe",height:t},"*")}})),o=document.getElementById("root");o&&a.observe(o)}const F=d(x)((({theme:e})=>({zIndex:"5",position:"fixed",bottom:58,right:10,opacity:.8,width:"48px",height:"48px",[e.breakpoints.up("lg")]:{bottom:58,right:"calc(100% - 1140px)"}}))),z=d("div")((({theme:e})=>({display:"flex",justifyContent:"space-evenly",cursor:"pointer",position:"sticky",bottom:0,backgroundColor:e.palette.background.default,zIndex:1e3})));var B=t((t=>{const{isMdUp:o}=t,[r,i]=n(o),[l,s]=n(!1),{menu:c,componentFullWidth:m,fullHeight:p,applyBtnMdUp:d,applyBtnMdUpOnClick:h,applyBtnSmDown:u,applyBtnSmDownOnClick:y,filters:g,noOfFilters:f,preventAutoClose:x}=t.secondaryMenu,_=()=>{i(!r),s(!l)},S=e=>{_(),e()},O=()=>{_()};return a((()=>{if(t.secondaryMenu?.menu&&document.getElementById("secondaryMenu")){const e=document.getElementById("secondaryMenu").clientHeight>window.innerHeight;t.setHeightOverflow(e)}}),[t.secondaryMenu?.menu]),e.createElement(e.Fragment,null,!r&&e.createElement(F,{onClick:_,color:"primary",className:m?"fabButtonClose":"fabButton"},g?f?e.createElement(w,{badgeContent:f,color:"primary"},e.createElement(P,null)):e.createElement(P,null):e.createElement(M,null)),o&&r&&e.createElement(b,{variant:"persistent",anchor:"right",open:r,PaperProps:{elevation:1,id:"secondaryMenu",sx:{boxSizing:"border-box",paddingTop:"4px",width:r?"100%":0,position:"static",height:p?"inherit":"auto"}}},c,d&&h?e.createElement(z,null,e.createElement(E,{variant:"outlined",sx:{width:"50%"},color:"primary",onClick:O},"Close"),e.createElement(E,{variant:"contained",sx:{width:"50%"},color:"primary",onClick:()=>S(h)},"Apply")):e.createElement(C,{sx:{display:"flex",padding:"16px",cursor:"pointer"},onClick:_},e.createElement(k,{variant:"caption"},"Hide Menu"),e.createElement(N,{sx:{color:"grey",width:16,height:20}}))),!o&&e.createElement(b,{anchor:"right",open:l,onClose:_,PaperProps:{sx:{width:"80%"}}},e.createElement("div",{tabIndex:0,role:"button",onClick:u&&y||x?void 0:_,onKeyDown:u&&y||x?void 0:_},x&&e.createElement(C,{sx:{display:"flex",justifyContent:"flex-start",padding:"10px"}},e.createElement(v,{onClick:_,edge:"end","aria-label":"close",size:"large"},e.createElement(D,null))),c,u&&y&&e.createElement(z,null,e.createElement(E,{variant:"outlined",color:"primary",style:{width:"50%"},onClick:O},"Close"),e.createElement(E,{variant:"contained",color:"primary",style:{width:"50%"},onClick:()=>S(y)},"Apply")))))}));const H=({secondaryMenuProps:t,isMdUp:r})=>{const[i,l]=n(!1),[s,c]=n({scrollPos:0,top:0}),m=o(null);return a((()=>{const e=()=>{const e=m?.current?.offsetHeight,t=window.innerHeight;c((n=>{const a=n.scrollPos-window.scrollY;let o=n.top+a;return o>0&&(o=0),o<t-e&&(o=t-e),{top:o,scrollPos:window.scrollY}}))};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}}),[]),t&&""!==t&&""!==t.menu?e.createElement("div",{ref:m,style:{position:"sticky",top:0,bottom:"auto",display:"flex",flexDirection:"column",top:i?s?.top:0,width:r?"240px":0,height:"100%"}},e.createElement(B,{setHeightOverflow:l,secondaryMenu:t,isMdUp:r})):null};class j extends i{constructor(e){super(e),this.state={themeName:e.themeName||"light"},this.themeSource=e.theme||U,this.theme=h(u(this.themeSource[this.state.themeName]))}componentDidUpdate(e){this.props.themeName!==e.themeName&&(this.theme=h(u(this.themeSource[this.props.themeName])),this.setState({themeName:this.props.themeName}))}render(){return e.createElement(y,{injectFirst:!0},e.createElement(g,{theme:this.theme},this.props.children))}}const A=t=>{const n=o(!1),r=m(),i=p(),l=_(),s=S(l.breakpoints.up("md")),{secondaryMenuProps:c,format:d,UIOptions:h}=t,u="fullscreen"===d;return a((()=>{t.searchData&&t.searchData.componentPath&&r(t.searchData.componentPath,{replace:!0})}),[]),a((()=>{const e=i.pathname+i.search;n.current?e&&(!t.searchData||!t.searchData.componentPath||t.searchData&&t.searchData.componentPath&&e!==t.searchData.componentPath)&&window.parent.postMessage({type:"updateComponentPath",componentPath:e},"*"):n.current=!0}),[i?.pathname,i?.search]),e.createElement("div",{style:{display:"flex",position:"relative",flexDirection:"row",width:"100%"}},e.createElement("div",{style:{width:s&&u&&c&&""!==c&&""!==c.menu?"calc(100% - 400px)":"100%",maxWidth:s&&u&&c&&""!==c&&""!==c.menu?"966px":"1160px",margin:s&&u&&h.componentMargin?h.componentMargin:""}},e.createElement(t.comp,t)),u?((t,n)=>e.createElement(H,{secondaryMenuProps:t,isMdUp:n}))(c,s):null)},L=t=>{const n=n=>{const[a,o]=e.useState("");let{quickPanel:i,basename:m,searchData:p,UIOptions:d,...h}=n?{...n}:{};i=i||!0,m=m||"",h.search=h.search||(e=>console.log("New query = ",e));const u=p&&("object"==typeof p||Array.isArray(p)&&p.length>0);n.UIOptions&&(n.UIOptions.switchFullScreen=(e=!0,t=!1)=>{window.parent.postMessage({type:"switchFullScreen",fullScreen:e,navigatedViaRoute:t},"*")},n.UIOptions.secondaryMenu=e=>{o(e)},n.UIOptions.searchQuery=e=>{window.parent.postMessage({type:"searchQuery",query:e},"*")});let y=!0;try{y=window.self!==window.top}catch(e){y=!0}return e.createElement(r,null,u||d&&d.sandbox||!y?n.match?e.createElement(A,O({},n,{secondaryMenuProps:a})):e.createElement(l,{basename:m},e.createElement(j,{themeName:d&&d.themeName,theme:d&&d.theme},e.createElement(s,null,e.createElement(c,{path:n.baseURL,element:e.createElement(A,O({},n,{comp:t,quickPanel:i,secondaryMenuProps:a,format:d.format}))}),e.createElement(c,{path:"*",element:e.createElement(A,O({},n,{comp:t,quickPanel:!1,secondaryMenuProps:a,format:d.format}))})))):e.createElement(e.Fragment,null),!u&&d&&d.sandbox?e.createElement("div",{style:{position:"fixed",top:0,width:"100%",display:"flex",justifyContent:"center",backgroundColor:"red",color:"white"}},e.createElement("h6",{style:{margin:"5px"}}," No search data received. Component will not be loaded... ")):e.createElement(e.Fragment,null))};return n.initHD=I,n};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("/* placeholder animations */\n.imgComponentStyles_placeholder__GXJke {\n    margin: 0 auto;\n    width: 100%;\n    height: 18px;\n    border-radius: 8px;\n    background-color: #eee;\n}\n\n@keyframes imgComponentStyles_placeHolderShimmer__5-fnD {\n    0% {\n        background-position: -468px 0\n    }\n\n    100% {\n        background-position: 468px 0\n    }\n}\n\n.imgComponentStyles_animated-background__vGXc6 {\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: imgComponentStyles_placeHolderShimmer__5-fnD;\n    animation-timing-function: linear;\n    background: darkgray;\n    background: linear-gradient(to right, #eeeeee 15%, #b2b2b2 18%, #eeeeee 33%);\n    background-size: 800px 104px;\n    height: 100%;\n    border-radius: 20px;\n    position: relative;\n}\n\n/* blinking dot */\n@keyframes imgComponentStyles_up-right__Y-xzl {\n    0% {\n        transform: scale(1);\n        opacity: .25\n    }\n\n    50% {\n        transform: scale (1, 5);\n        opacity: 1;\n    }\n\n    100% {\n        transform: scale(1);\n        opacity: .25;\n    }\n}\n\n.imgComponentStyles_border__Lvjsc {\n    border-radius: 50%;\n    width: 8px;\n    height: 8px;\n    opacity: .25;\n}\n\n.imgComponentStyles_dot-animation__T9Onq {\n    background-color: white;\n    position: relative;\n    top: -12px;\n    left: 30px;\n    -webkit-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    -moz-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    -o-animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n    animation: imgComponentStyles_up-right__Y-xzl 1s infinite;\n}");const Y=t=>{const{isLoading:n,src:a,alt:o,placeholderClassName:r,placeholderStyle:i,contentClassName:l,contentStyle:s,onError:c,fallbackUrl:m,id:p,onClick:d}=t,[h,u]=e.useState(0);return n?e.createElement("div",{style:{...i,height:!r&&i&&(i.height||"20px"),width:!r&&i&&(i.width||"100px")},className:`${r} animated-background`}):e.createElement("img",{className:l,style:{...s},alt:o,src:a,onError:e=>{m&&e.target.src!==m&&!h&&(e.target.src=m,u(h+1)),c&&h<2&&(u(h+1),c(e))},id:p,onClick:d||(()=>{})})};export{Y as Img,U as themes,L as withHD};
 //# sourceMappingURL=index.modern.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyperdart/frontend",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"description": "hyperDart frontend for dart development",
 	"author": "hyperDart",
 	"license": "MIT",
@@ -19,12 +19,20 @@
 	],
 	"peerDependencies": {
 		"@mui/icons-material": "^6.0.0",
+		"@mui/lab": "^6.0.0-beta.12",
+		"@mui/material": "^6.0.0",
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.6.0",
 		"react": ">=17.0.0",
 		"react-dom": ">=17.0.0",
 		"react-router-dom": "^6.14.0"
 	},
 	"devDependencies": {
 		"@mui/icons-material": "^6.0.0",
+		"@mui/lab": "^6.0.0-beta.12",
+		"@mui/material": "^6.0.0",
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.6.0",
 		"@rollup/plugin-babel": "^6.0.4",
 		"@rollup/plugin-commonjs": "^26.0.1",
 		"@rollup/plugin-node-resolve": "^15.2.4",