Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

json-edit-react

Package Overview
Dependencies
Maintainers
1
Versions
76
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

json-edit-react - npm Package Compare versions

Comparing version 1.10.2 to 1.11.0

2

build/index.cjs.js

@@ -1,1 +0,1 @@

"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),assign=require("object-property-assigner"),extract=require("object-property-extractor"),JSON5=require("json5"),clone=require("just-clone");function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){var value;result.done?resolve(result.value):(value=result.value,value instanceof P?value:new P((function(resolve){resolve(value)}))).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;var e=[],t=[];!function(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}(":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.5s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: inherit;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n font-size: 1em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 1.1em;\n line-height: 1;\n padding: 1em;\n padding-left: 2em;\n /* margin-top: 1em; */\n /* margin-bottom: 1em; */\n border-radius: 0.5em;\n text-align: left;\n}\n\n.jer-editor-container textarea {\n /* width: 90%; */\n color: var(--jer-input-color);\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container textarea:focus {\n border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container input:focus {\n border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n display: flex;\n min-height: 1.7em;\n gap: 0.3em;\n align-items: center;\n}\n\n.jer-collection-header-row {\n display: flex;\n flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-bracket-outside {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collapse-icon {\n position: absolute;\n left: -1.2em;\n top: 0.35em;\n}\n\n.jer-collection-inner {\n position: relative;\n}\n\n.jer-collection-text-edit {\n display: flex;\n flex-direction: column;\n gap: 0.3em;\n align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.jer-hyperlink {\n text-decoration: underline;\n}\n\n.jer-input-text {\n resize: none;\n margin: 0;\n height: 1.4em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-top: 0.25em;\n padding-bottom: 0.2em;\n min-width: 6em;\n overflow: hidden;\n /* max-height: 20em; */\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n height: 1.6em;\n}\n\n.jer-input-number {\n min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n position: relative;\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n content: '';\n display: block;\n position: absolute;\n border-radius: 50%;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: all 0.5s;\n box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n position: absolute;\n border-radius: 4em;\n left: 0;\n top: 0;\n opacity: 1;\n transition: 0s;\n}\n\n.jer-copy-pulse:active {\n top: 0.07em;\n}\n\n.jer-rotate-90 {\n transform: rotate(-90deg);\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n /* font-size: '2em'; */\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n",{});const AutogrowTextArea=({className:className,name:name,value:value,setValue:setValue,handleKeyPress:handleKeyPress,styles:styles})=>{const dummyValue="\n"===value.slice(-1)?value+".":value;return jsxRuntime.jsxs("div",{style:{display:"grid"},children:[jsxRuntime.jsx("textarea",{id:`${name}_textarea`,style:Object.assign({height:"auto",gridArea:"1 / 1 / 2 / 2",overflowY:"auto",whiteSpace:"pre-wrap"},styles),rows:1,className:className,name:`${name}_textarea`,value:value,onChange:e=>setValue(e.target.value),autoFocus:!0,onFocus:e=>{value.length<40&&e.target.select()},onKeyDown:handleKeyPress}),jsxRuntime.jsx("span",{className:className,style:Object.assign({visibility:"hidden",height:"auto",gridArea:"1 / 1 / 2 / 2",color:"red",opacity:.9,whiteSpace:"pre-wrap",overflowY:"auto",border:"1px solid transparent"},styles),children:dummyValue})]})},themes={default:{displayName:"Default",fragments:{edit:"rgb(42, 161, 152)"},styles:{container:{backgroundColor:"#f6f6f6",fontFamily:"monospace"},collection:{},collectionInner:{},collectionElement:{},property:"#292929",bracket:{color:"rgb(0, 43, 54)",fontWeight:"bold"},itemCount:{color:"rgba(0, 0, 0, 0.3)",fontStyle:"italic"},string:"rgb(203, 75, 22)",number:"rgb(38, 139, 210)",boolean:"green",null:{color:"rgb(220, 50, 47)",fontVariant:"small-caps",fontWeight:"bold"},input:["#292929",{fontSize:"90%"}],inputHighlight:"#b3d8ff",error:{fontSize:"0.8em",color:"red",fontWeight:"bold"},iconCollection:"rgb(0, 43, 54)",iconEdit:"edit",iconDelete:"rgb(203, 75, 22)",iconAdd:"edit",iconCopy:"rgb(38, 139, 210)",iconOk:"green",iconCancel:"rgb(203, 75, 22)"}},githubDark:{displayName:"Github Dark",styles:{container:{backgroundColor:"#0d1117",color:"white"},property:"#E6EDF3",bracket:"#56d364",itemCount:"#8B949E",string:"#A5D6FF",number:"#D2A8FF",boolean:{color:"#FF7B72",fontSize:"90%",fontWeight:"bold"},null:"green",iconCollection:"#D2A8FF",iconEdit:"#D2A8FF",iconDelete:"rgb(203, 75, 22)",iconAdd:"rgb(203, 75, 22)",iconCopy:"#A5D6FF",iconOk:"#56d364",iconCancel:"rgb(203, 75, 22)"}},githubLight:{displayName:"Github Light",styles:{container:"white",property:"#1F2328",bracket:"#00802e",itemCount:"#8B949E",string:"#0A3069",number:"#953800",boolean:{color:"#CF222E",fontSize:"90%",fontWeight:"bold"},null:"#FF7B72",iconCollection:"#8250DF",iconEdit:"#8250DF",iconDelete:"rgb(203, 75, 22)",iconAdd:"#8250DF",iconCopy:"#57606A"}},monoDark:{displayName:"Black & White",fragments:{lightText:{color:"white"},midGrey:"#5c5c5c"},styles:{container:["lightText",{backgroundColor:"black"}],property:"lightText",bracket:"midGrey",itemCount:"#4a4a4a",string:"#a8a8a8",number:"#666666",boolean:{color:"#848484",fontStyle:"italic"},null:"#333333",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},monoLight:{fragments:{midGrey:"#a3a3a3"},displayName:"White & Black",styles:{container:"white",property:"black",bracket:"midGrey",itemCount:"#b5b5b5",string:"#575757",number:"#999999",boolean:{color:"#7b7b7b",fontStyle:"italic"},null:"#cccccc",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},candyWrapper:{displayName:"Candy Wrapper",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},darkBlue:{color:"#2B2D42"}},styles:{container:"minty",property:"pop",bracket:"dark",itemCount:"pale",string:"mid",number:["darkBlue",{fontSize:"85%"}],boolean:["mid",{fontStyle:"italic",fontWeight:"bold",fontSize:"80%"}],null:["#cccccc",{fontWeight:"bold"}],input:{border:"1px solid rgb(115, 194, 198)"},iconCollection:"#1D3557",iconEdit:"#457B9D",iconDelete:"#E63946",iconAdd:"#2B2D42",iconCopy:"#1D3557",iconCancel:"#E63946"}},psychedelic:{displayName:"Psychedelic",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},fluroYellow:"rgb(242, 228, 21)",fluroGreen:"rgb(68, 255, 62)",hotPink:"#f7379a"},styles:{container:{backgroundColor:"unset",background:"linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)",color:"black"},property:"black",bracket:"fluroYellow",itemCount:["pale",{opacity:.7}],string:"white",number:["#33d9ff",{fontSize:"90%",fontWeight:"bold"}],boolean:["fluroGreen",{fontWeight:"bold",fontSize:"80%"}],null:["black",{fontWeight:"bold",opacity:.3,backgroundColor:"rgb(255, 255, 255, 0.5)",padding:"0 0.4em",borderRadius:"0.4em"}],iconCollection:"fluroYellow",iconEdit:["black"],iconDelete:["white",{opacity:.5}],iconAdd:["white",{opacity:.5}],iconCopy:"rgb(32, 84, 242)",iconOk:"fluroGreen",iconCancel:"hotPink"}}},emptyStyleObject={container:{},collection:{},collectionInner:{},collectionElement:{},property:{},bracket:{},itemCount:{},string:{},number:{},boolean:{},null:{},input:{},inputHighlight:{},error:{},iconCollection:{},iconEdit:{},iconDelete:{},iconAdd:{},iconCopy:{},iconOk:{},iconCancel:{}},defaultTheme=themes.default,ThemeProviderContext=react.createContext({getStyles:()=>({}),setTheme:_=>{},icons:{},setIcons:()=>{}}),ThemeProvider=({children:children})=>{const[styles,setStyles]=react.useState(emptyStyleObject),[icons,setIcons]=react.useState({});return jsxRuntime.jsx(ThemeProviderContext.Provider,{value:{getStyles:(element,nodeData)=>"function"==typeof styles[element]?styles[element](nodeData):styles[element],setTheme:theme=>{const styles=compileStyles(theme);setStyles(styles)},icons:icons,setIcons:setIcons},children:children})},useTheme=()=>react.useContext(ThemeProviderContext),compileStyles=themeInput=>{var _a,_b,_c,_d;const collectedFunctions={},stylesArray=(Array.isArray(themeInput)?themeInput:[themeInput]).map((theme=>"default"===themeInput?{}:"string"==typeof theme?buildStyleObject(themes[theme],collectedFunctions):isStyleObject(theme)?buildStyleObject({fragments:{},styles:theme},collectedFunctions):buildStyleObject(theme,collectedFunctions))),mergedStyleObject=buildStyleObject(defaultTheme,{});Object.keys(mergedStyleObject).forEach((k=>{const key=k;stylesArray.forEach((styleObj=>{styleObj[key]&&(mergedStyleObject[key]=Object.assign(Object.assign({},mergedStyleObject[key]),styleObj[key]))}))}));const finalStyles=Object.assign({},mergedStyleObject);return Object.entries(collectedFunctions).forEach((([key,func])=>{const element=key;finalStyles[element]=nodeData=>{const funcResult=func(nodeData)||{};return Object.assign(Object.assign({},mergedStyleObject[element]),funcResult)}})),"function"!=typeof(null==finalStyles?void 0:finalStyles.inputHighlight)&&(null===(_a=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_a?void 0:_a.backgroundColor)&&document.documentElement.style.setProperty("--jer-highlight-color",null===(_b=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_b?void 0:_b.backgroundColor),"function"!=typeof(null==finalStyles?void 0:finalStyles.iconCopy)&&(null===(_c=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_c?void 0:_c.color)&&document.documentElement.style.setProperty("--jer-icon-copy-color",null===(_d=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_d?void 0:_d.color),finalStyles},buildStyleObject=(theme,collectedFunctions)=>{const{fragments:fragments,styles:styles}=theme,styleObject={};return Object.entries(styles).forEach((([key,value])=>{const cssStyles=(Array.isArray(value)?value:[value]).reduce(((acc,curr)=>{var _a;if("function"==typeof curr)return collectedFunctions[key]=curr,Object.assign({},acc);if("string"==typeof curr){const style=null!==(_a=null==fragments?void 0:fragments[curr])&&void 0!==_a?_a:curr;return"string"==typeof style?Object.assign(Object.assign({},acc),{[defaultStyleProperties[key]]:style}):Object.assign(Object.assign({},acc),style)}return Object.assign(Object.assign({},acc),curr)}),{});styleObject[key]=cssStyles})),styleObject},isStyleObject=overrideObject=>!("styles"in overrideObject),defaultStyleProperties={container:"backgroundColor",collection:"backgroundColor",collectionInner:"backgroundColor",collectionElement:"backgroundColor",property:"color",bracket:"color",itemCount:"color",string:"color",number:"color",boolean:"color",null:"color",input:"color",inputHighlight:"backgroundColor",error:"color",iconCollection:"color",iconEdit:"color",iconDelete:"color",iconAdd:"color",iconCopy:"color",iconOk:"color",iconCancel:"color"},truncate=(string,length=200)=>string.length<length?string:`${string.slice(0,length-2).trim()}...`,toPathString=path=>path.join(".").replace(/"/g,"_"),StringValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme(),pathString=toPathString(path),quoteChar=showStringQuotes?'"':"";return isEditing?jsxRuntime.jsx(AutogrowTextArea,{className:"jer-input-text",name:pathString,value:value,setValue:setValue,isEditing:isEditing,handleKeyPress:e=>{"Enter"!==e.key||e.shiftKey?"Escape"===e.key&&handleCancel():handleEdit()},styles:getStyles("input",nodeData)}):jsxRuntime.jsxs("div",{id:`${pathString}_display`,onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string",style:getStyles("string",nodeData),children:[quoteChar,truncate(value,stringTruncate),quoteChar]})},NumberValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();return isEditing?jsxRuntime.jsx("input",{className:"jer-input-number",type:"text",name:toPathString(path),value:value,onChange:e=>setValue(e.target.value.replace(/[^0-9.-]/g,"")),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{switch(e.key){case"Enter":handleEdit();break;case"Escape":handleCancel();break;case"ArrowUp":e.preventDefault(),setValue(Number(value)+1);break;case"ArrowDown":e.preventDefault(),setValue(Number(value)-1)}},style:{width:String(value).length/1.5+2+"em"}}):jsxRuntime.jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-number",style:getStyles("number",nodeData),children:value})},BooleanValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing,handleEdit]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsxRuntime.jsx("input",{className:"jer-input-boolean",type:"checkbox",name:toPathString(path),checked:value,onChange:()=>setValue(!value)}):jsxRuntime.jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-boolean",style:getStyles("boolean",nodeData),children:String(value)})},NullValue=({value:value,isEditing:isEditing,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsxRuntime.jsx("div",{className:"jer-input-null",children:"null"}):jsxRuntime.jsx("div",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-null",style:getStyles("null",nodeData),children:String(value)})},ObjectValue=({value:value,translate:translate,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsxRuntime.jsx("span",{className:"jer-value-object",children:`{${translate("DEFAULT_NEW_KEY",nodeData)}: "${String(value)}" }`})},ArrayValue=({value:value,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsxRuntime.jsx("span",{className:"jer-value-array",children:`[${null===value?"":String(value)}]`})},InvalidValue=({value:value})=>{let message="Error!";switch(typeof value){case"string":"**INVALID_FUNCTION**"===value&&(message="Function");break;case"undefined":message="Undefined";break;case"symbol":message="Symbol"}return jsxRuntime.jsx("span",{className:"jer-value-invalid",children:message})},IconAdd=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z"}),jsxRuntime.jsx("path",{d:"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"})]}),IconEdit=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,transform:"translate(0, 0.5)",children:[jsxRuntime.jsx("path",{d:"M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"}),jsxRuntime.jsx("path",{d:"M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"})]}),IconDelete=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z"})}),IconCopy=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z"}),jsxRuntime.jsx("path",{d:"M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11"}),jsxRuntime.jsx("path",{d:"M15 10l-4 4 4 4"})]}),IconOk=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M22 11.08V12a10 10 0 11-5.93-9.14"}),jsxRuntime.jsx("path",{d:"M22 4L12 14.01l-3-3"})]}),IconCancel=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{baseProfile:"tiny",viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z"})}),IconChevron=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{viewBox:"0 0 512 512",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})}),Icon=({name:name,nodeData:nodeData,rotate:rotate})=>{var _a,_b,_c,_d,_e,_f,_g;const{getStyles:getStyles,icons:icons}=useTheme(),commonProps={size:"1.4em",className:"jer-icon"};switch(name){case"add":return null!==(_a=null==icons?void 0:icons.add)&&void 0!==_a?_a:jsxRuntime.jsx(IconAdd,Object.assign({},commonProps,{style:getStyles("iconAdd",nodeData)}));case"edit":return null!==(_b=null==icons?void 0:icons.edit)&&void 0!==_b?_b:jsxRuntime.jsx(IconEdit,Object.assign({},commonProps,{style:getStyles("iconEdit",nodeData)}));case"delete":return null!==(_c=null==icons?void 0:icons.delete)&&void 0!==_c?_c:jsxRuntime.jsx(IconDelete,Object.assign({},commonProps,{style:getStyles("iconDelete",nodeData),size:"1.45em"}));case"copy":return null!==(_d=null==icons?void 0:icons.copy)&&void 0!==_d?_d:jsxRuntime.jsx(IconCopy,Object.assign({},commonProps,{style:getStyles("iconCopy",nodeData),size:"1.2em"}));case"ok":return null!==(_e=null==icons?void 0:icons.ok)&&void 0!==_e?_e:jsxRuntime.jsx(IconOk,Object.assign({},commonProps,{style:Object.assign({fontSize:"90%"},getStyles("iconOk",nodeData))}));case"cancel":return null!==(_f=null==icons?void 0:icons.cancel)&&void 0!==_f?_f:jsxRuntime.jsx(IconCancel,Object.assign({},commonProps,{style:Object.assign({fontSize:"130%"},getStyles("iconCancel",nodeData))}));case"chevron":return null!==(_g=null==icons?void 0:icons.chevron)&&void 0!==_g?_g:jsxRuntime.jsx(IconChevron,{className:"jer-accordion-icon"+(rotate?" jer-rotate-90":""),size:"1em",style:getStyles("iconCollection",nodeData)});default:return jsxRuntime.jsx(jsxRuntime.Fragment,{})}},EditButtons=({startEdit:startEdit,handleDelete:handleDelete,handleAdd:handleAdd,enableClipboard:enableClipboard,type:type,nodeData:nodeData,translate:translate})=>{const{getStyles:getStyles}=useTheme(),NEW_KEY_PROMPT=translate("KEY_NEW",nodeData),[isAdding,setIsAdding]=react.useState(!1),[newKey,setNewKey]=react.useState(NEW_KEY_PROMPT),{key:key,path:path,value:data}=nodeData;react.useEffect((()=>{isAdding||setNewKey(NEW_KEY_PROMPT)}),[isAdding]);return jsxRuntime.jsxs("div",{className:"jer-edit-buttons",style:isAdding?{opacity:1}:void 0,children:[enableClipboard&&jsxRuntime.jsx("div",{onClick:e=>{let value,copyType="value",stringValue="";if(enableClipboard){if(!0===(e.ctrlKey||e.metaKey))value=stringifyPath(path),stringValue=value,copyType="path";else value=data,stringValue=type?JSON.stringify(data,null,2):String(value);navigator.clipboard.writeText(stringValue)}"function"==typeof enableClipboard&&enableClipboard({value:value,stringValue:stringValue,path:path,key:key,type:copyType})},className:"jer-copy-pulse",children:jsxRuntime.jsx(Icon,{name:"copy",nodeData:nodeData})}),startEdit&&jsxRuntime.jsx("div",{onClick:startEdit,children:jsxRuntime.jsx(Icon,{name:"edit",nodeData:nodeData})}),handleDelete&&jsxRuntime.jsx("div",{onClick:handleDelete,children:jsxRuntime.jsx(Icon,{name:"delete",nodeData:nodeData})}),handleAdd&&jsxRuntime.jsx("div",{onClick:()=>{"object"===type?setIsAdding(!0):handleAdd("")},children:jsxRuntime.jsx(Icon,{name:"add",nodeData:nodeData})}),isAdding&&handleAdd&&"object"===type&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("input",{className:"jer-input-new-key",type:"text",name:"new-object-key",value:newKey,onChange:e=>setNewKey(e.target.value),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&handleAdd?(setIsAdding(!1),handleAdd(newKey)):"Escape"===e.key&&setIsAdding(!1)},style:getStyles("input",nodeData)}),jsxRuntime.jsx(InputButtons,{onOk:()=>{newKey&&(setIsAdding(!1),handleAdd(newKey))},onCancel:()=>{setIsAdding(!1)},nodeData:nodeData})]})]})},InputButtons=({onOk:onOk,onCancel:onCancel,nodeData:nodeData})=>jsxRuntime.jsxs("div",{className:"jer-confirm-buttons",children:[jsxRuntime.jsx("div",{onClick:onOk,children:jsxRuntime.jsx(Icon,{name:"ok",nodeData:nodeData})}),jsxRuntime.jsx("div",{onClick:onCancel,children:jsxRuntime.jsx(Icon,{name:"cancel",nodeData:nodeData})})]}),stringifyPath=path=>path.reduce(((str,part)=>"number"==typeof part?`${str}[${part}]`:""===str?part:`${str}.${part}`),""),DataTypes=["string","number","boolean","null","object","array"],getCustomNode=(customNodeDefinitions=[],nodeData)=>{const matchingDefinitions=customNodeDefinitions.filter((({condition:condition})=>condition(nodeData)));if(0===matchingDefinitions.length)return{};const _a=matchingDefinitions[0],{element:element,wrapperElement:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey=!1,showEditTools:showEditTools=!0,showOnEdit:showOnEdit=!1,showOnView:showOnView=!0,showCollectionWrapper:showCollectionWrapper=!0}=_a,rest=__rest(_a,["element","wrapperElement","customNodeProps","wrapperProps","hideKey","showEditTools","showOnEdit","showOnView","showCollectionWrapper"]);return Object.assign({CustomNode:element,CustomWrapper:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey,showEditTools:showEditTools,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper},rest)},isCollection=value=>null!==value&&"object"==typeof value,filterNode=(type,nodeData,searchFilter,searchText="")=>{if(!searchFilter&&!searchText)return!0;switch(type){case"collection":if(searchFilter){if(searchFilter(nodeData,searchText))return!0;if(!filterCollection(searchText,nodeData,searchFilter))return!1}if(!searchFilter&&searchText&&!filterCollection(searchText,nodeData))return!1;break;case"value":if(searchFilter&&!searchFilter(nodeData,searchText))return!1;if(!searchFilter&&searchText&&!matchNode(nodeData,searchText))return!1}return!0},filterCollection=(searchText="",nodeData,matcher=matchNode)=>{const collection=nodeData.value;return Object.entries(collection).some((([key,value])=>{const childPath=[...nodeData.path,key],childNodeData=Object.assign(Object.assign({},nodeData),{key:key,path:childPath,level:nodeData.level+1,value:value,size:childPath.length,parentData:collection});return isCollection(value)?filterCollection(searchText,childNodeData,matcher):matcher(childNodeData,searchText)}))},matchNode=(nodeData,searchText="")=>{const{value:value}=nodeData;if(null===value&&"null".includes(searchText.toLowerCase()))return!0;switch(typeof value){case"string":return value.toLowerCase().includes(searchText.toLowerCase());case"number":return!!String(value).includes(searchText);case"boolean":return value?"true".includes(searchText.toLowerCase())||"1"===searchText:"false".includes(searchText.toLowerCase())||"0"===searchText;default:return!1}},matchNodeKey=({key:key,path:path},searchText="")=>!!matchNode({value:key},searchText)||!!path.some((field=>matchNode({value:field},searchText))),TreeStateProviderContext=react.createContext({collapseState:null,setCollapseState:()=>{},doesPathMatch:()=>!1,currentlyEditingElement:null,setCurrentlyEditingElement:()=>{},areChildrenBeingEdited:()=>!1}),TreeStateProvider=({children:children})=>{const[collapseState,setCollapseState]=react.useState(null),[currentlyEditingElement,setCurrentlyEditingElement]=react.useState(null);return jsxRuntime.jsx(TreeStateProviderContext.Provider,{value:{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:path=>{if(null===collapseState)return!1;for(const[index,value]of collapseState.path.entries())if(value!==path[index])return!1;return!0},currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:pathString=>null!==currentlyEditingElement&&currentlyEditingElement.includes(pathString)},children:children})},useTreeState=()=>react.useContext(TreeStateProviderContext),ValueNodeWrapper=props=>{const{data:data,parentData:parentData,nodeData:nodeData,onEdit:onEdit,onDelete:onDelete,onChange:onChange,enableClipboard:enableClipboard,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:searchText,showLabel:showLabel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,indent:indent,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,{getStyles:getStyles}=useTheme(),{currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement}=useTreeState(),[value,setValue]=react.useState("function"==typeof data?"**INVALID_FUNCTION**":data),[error,setError]=react.useState(null),{key:name,path:path}=nodeData,customNodeData=getCustomNode(customNodeDefinitions,nodeData),[dataType,setDataType]=react.useState(getDataType(data,customNodeData)),pathString=toPathString(path),updateValue=react.useCallback((newValue=>{if(!onChange)return void setValue(newValue);const modifiedValue=onChange({currentData:nodeData.fullData,newValue:newValue,currentValue:value,name:name,path:path});setValue(modifiedValue)}),[onChange]);react.useEffect((()=>{setValue("function"==typeof data?"**INVALID_FUNCTION**":data),setDataType(getDataType(data,customNodeData))}),[data,error]);const canEdit=react.useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=react.useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView}=customNodeData,allDataTypes=[...DataTypes,...customNodeDefinitions.filter((({showInTypesSelector:showInTypesSelector=!1,name:name})=>showInTypesSelector&&!!name)).map((({name:name})=>name))],allowedDataTypes=react.useMemo((()=>{if("boolean"==typeof restrictTypeSelection)return restrictTypeSelection?[]:allDataTypes;if(Array.isArray(restrictTypeSelection))return restrictTypeSelection;const result=restrictTypeSelection(nodeData);return"boolean"==typeof result?result?[]:allDataTypes:result}),[nodeData,restrictTypeSelection]);if(!filterNode("value",nodeData,searchFilter,searchText))return null;const logError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{let newValue;switch(setCurrentlyEditingElement(null),dataType){case"object":newValue={[translate("DEFAULT_NEW_KEY",nodeData)]:value};break;case"array":newValue=null!=value?value:[];break;case"number":{const n=Number(value);newValue=isNaN(n)?0:n;break}default:newValue=value}onEdit(newValue,path).then((error=>{error&&logError(error)}))},handleCancel=()=>{setCurrentlyEditingElement(null),setValue(data),setDataType(getDataType(data,customNodeData))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,canEditKey=!("number"==typeof path.slice(-1)[0])&&canEdit&&canDelete,showError=!isEditing&&error,showTypeSelector=isEditing&&allowedDataTypes.length>0,showEditButtons="invalid"!==dataType&&!error&&showEditTools,showKeyEdit=showLabel&&isEditingKey,showKey=showLabel&&!isEditingKey&&!hideKey,inputProps={value:value,parentData:parentData,setValue:updateValue,isEditing:isEditing,setIsEditing:canEdit?()=>setCurrentlyEditingElement(pathString):()=>{},handleEdit:handleEdit,handleCancel:handleCancel,path:path,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData,translate:translate},ValueComponent=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView)?jsxRuntime.jsx(CustomNode,Object.assign({},props,{value:value,customNodeProps:customNodeProps,setValue:updateValue,handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:e=>{"Enter"===e.key?handleEdit():"Escape"===e.key&&handleCancel()},isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles})):getInputComponent(getDataType(data),inputProps);return jsxRuntime.jsx("div",{className:"jer-component jer-value-component",style:{marginLeft:indent/2+"em"},children:jsxRuntime.jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[showKey&&jsxRuntime.jsxs("span",{className:"jer-object-key",style:Object.assign(Object.assign({},getStyles("property",nodeData)),{minWidth:`${Math.min(String(name).length+1,5)}ch`,flexShrink:name.length>10?1:0}),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:[name,":"," "]}),showKeyEdit&&jsxRuntime.jsx("input",{className:"jer-object-key",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),jsxRuntime.jsxs("div",{className:"jer-value-and-buttons",children:[jsxRuntime.jsx("div",{className:"jer-input-component",children:ValueComponent}),isEditing?jsxRuntime.jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData}):showEditButtons&&jsxRuntime.jsx(EditButtons,{startEdit:canEdit?()=>setCurrentlyEditingElement(pathString):void 0,handleDelete:canDelete?()=>{onDelete(value,path).then((error=>{error&&logError(error)}))}:void 0,enableClipboard:enableClipboard,translate:translate,nodeData:nodeData}),showTypeSelector&&jsxRuntime.jsxs("div",{className:"jer-select",children:[jsxRuntime.jsx("select",{name:`${name}-type-select`,className:"jer-type-select",onChange:e=>(type=>{const customNode=customNodeDefinitions.find((customNode=>customNode.name===type));if(customNode)onEdit(customNode.defaultValue,path),setDataType(type);else{const newValue=convertValue(value,type,translate("DEFAULT_NEW_KEY",nodeData),(null==customNodeData?void 0:customNodeData.CustomNode)?translate("DEFAULT_STRING",nodeData):void 0);updateValue(newValue),onEdit(newValue,path),setDataType(type)}})(e.target.value),value:dataType,children:allowedDataTypes.map((type=>jsxRuntime.jsx("option",{value:type,children:type},type)))}),jsxRuntime.jsx("span",{className:"focus"})]}),showError&&jsxRuntime.jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})]})]})})},getDataType=(value,customNodeData)=>(null==customNodeData?void 0:customNodeData.CustomNode)&&(null==customNodeData?void 0:customNodeData.name)&&customNodeData.showInTypesSelector?customNodeData.name:"string"==typeof value?"string":"number"==typeof value?"number":"boolean"==typeof value?"boolean":null===value?"null":"invalid",getInputComponent=(dataType,inputProps)=>{const value=inputProps.value;switch(dataType){case"string":return jsxRuntime.jsx(StringValue,Object.assign({},inputProps,{value:value}));case"number":return jsxRuntime.jsx(NumberValue,Object.assign({},inputProps,{value:value}));case"boolean":return jsxRuntime.jsx(BooleanValue,Object.assign({},inputProps,{value:value}));case"null":return jsxRuntime.jsx(NullValue,Object.assign({},inputProps));case"object":return jsxRuntime.jsx(ObjectValue,Object.assign({},inputProps,{value:value}));case"array":return jsxRuntime.jsx(ArrayValue,Object.assign({},inputProps));default:return jsxRuntime.jsx(InvalidValue,Object.assign({},inputProps))}},convertValue=(value,type,defaultNewKey,defaultString)=>{switch(type){case"string":return null!=defaultString?defaultString:String(value);case"number":{const n=Number(value);return isNaN(n)?0:n}case"boolean":return!!value;case"null":return null;case"object":return{[defaultNewKey]:value};case"array":return[value];default:return String(value)}},CollectionNode=_a=>{var{data:data,nodeData:incomingNodeData,parentData:parentData,showCollectionCount:showCollectionCount}=_a,props=__rest(_a,["data","nodeData","parentData","showCollectionCount"]);const{getStyles:getStyles}=useTheme(),{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:doesPathMatch,currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:areChildrenBeingEdited}=useTreeState(),{onEdit:onEdit,onAdd:onAdd,onDelete:onDelete,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,collapseFilter:collapseFilter,enableClipboard:enableClipboard,searchFilter:searchFilter,searchText:searchText,indent:indent,keySort:keySort,showArrayIndices:showArrayIndices,defaultValue:defaultValue,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,[stringifiedValue,setStringifiedValue]=react.useState(JSON.stringify(data,null,2)),[error,setError]=react.useState(null),startCollapsed=collapseFilter(incomingNodeData),[collapsed,setCollapsed]=react.useState(startCollapsed),nodeData=Object.assign(Object.assign({},incomingNodeData),{collapsed:collapsed}),{path:path,key:name,size:size}=nodeData,pathString=toPathString(path),hasBeenOpened=react.useRef(!startCollapsed),[isAnimating,setIsAnimating]=react.useState(!1);react.useEffect((()=>{setStringifiedValue(JSON.stringify(data,null,2))}),[data]),react.useEffect((()=>{const isCollapsed=collapseFilter(nodeData);hasBeenOpened.current=!isCollapsed,setCollapsed(isCollapsed)}),[collapseFilter]),react.useEffect((()=>{null!==collapseState&&doesPathMatch(path)&&(hasBeenOpened.current=!0,setCollapsed(collapseState.open))}),[collapseState]);const canEdit=react.useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=react.useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),canAdd=react.useMemo((()=>!restrictAddFilter(nodeData)),[nodeData]),canEditKey=null!==parentData&&canEdit&&canAdd&&canDelete,getDefaultNewValue=react.useMemo((()=>nodeData=>"function"!=typeof defaultValue?defaultValue:defaultValue(nodeData)),[defaultValue]),{CustomNode:CustomNode,customNodeProps:customNodeProps,CustomWrapper:CustomWrapper,wrapperProps:wrapperProps={},hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper=!0}=react.useMemo((()=>getCustomNode(customNodeDefinitions,nodeData)),[]);if(!filterNode("collection",nodeData,searchFilter,searchText)&&nodeData.level>0)return null;const collectionType=Array.isArray(data)?"array":"object",brackets="array"===collectionType?{open:"[",close:"]"}:{open:"{",close:"}"},transitionTime=getComputedStyle(document.documentElement).getPropertyValue("--jer-expand-transition-time"),handleKeyPress=e=>{"Enter"===e.key&&(e.metaKey||e.shiftKey||e.ctrlKey)?handleEdit():"Escape"===e.key&&handleCancel()},showError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{try{const value=JSON5.parse(stringifiedValue);if(setCurrentlyEditingElement(null),setError(null),JSON.stringify(value)===JSON.stringify(data))return;onEdit(value,path).then((error=>{error&&showError(error)}))}catch(_a){setError(translate("ERROR_INVALID_JSON",nodeData)),setTimeout((()=>setError(null)),2500),console.log("Invalid JSON")}},handleDelete=path.length>0?()=>{onDelete(data,path).then((result=>{result&&showError(result)}))}:void 0,handleCancel=()=>{setCurrentlyEditingElement(null),setError(null),setStringifiedValue(JSON.stringify(data,null,2))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,isArray="number"==typeof path.slice(-1)[0],showCount="when-closed"===showCollectionCount?collapsed:showCollectionCount,showEditButtons=!isEditing&&showEditTools,showKey=(showArrayIndices||!isArray)&&!hideKey&&""!==name&&void 0!==name,showCustomNodeContents=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView),sortKeys=keySort&&"object"===collectionType,keyValueArray=Object.entries(data).map((([key,value])=>["array"===collectionType?Number(key):key,value]));sortKeys&&keyValueArray.sort("function"==typeof keySort?(a,b)=>keySort(a[0],b[0]):void 0);const numOfLines=JSON.stringify(data,null,2).replace(/\\n/g,"\n").split("\n").length,CollectionChildren=hasBeenOpened.current?isEditing?jsxRuntime.jsx("div",{className:"jer-collection-text-edit",children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(AutogrowTextArea,{className:"jer-collection-text-area",name:pathString,value:stringifiedValue,setValue:setStringifiedValue,isEditing:isEditing,handleKeyPress:handleKeyPress,styles:getStyles("input",nodeData)}),jsxRuntime.jsx("div",{className:"jer-collection-input-button-row",children:jsxRuntime.jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData})})]})}):keyValueArray.map((([key,value],index)=>{const childNodeData={key:key,value:value,path:[...path,key],level:path.length+1,index:index,size:isCollection(value)?Object.keys(value).length:1,parentData:data,fullData:nodeData.fullData};return jsxRuntime.jsx("div",{className:"jer-collection-element",style:getStyles("collectionElement",childNodeData),children:isCollection(value)?jsxRuntime.jsx(CollectionNode,Object.assign({data:value,parentData:data,nodeData:childNodeData,showCollectionCount:showCollectionCount},props),key):jsxRuntime.jsx(ValueNodeWrapper,Object.assign({data:value,parentData:data,nodeData:childNodeData},props,{showLabel:"object"===collectionType||showArrayIndices}),key)},key)})):null,isCollapsed=!!showCollectionWrapper&&collapsed;isCollapsed||(hasBeenOpened.current=!0);const customNodeAllProps=Object.assign(Object.assign({},props),{data:data,value:data,parentData:parentData,nodeData:nodeData,setValue:val=>__awaiter(void 0,void 0,void 0,(function*(){return yield onEdit(val,path)})),handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:handleKeyPress,isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles}),CollectionContents=showCustomNodeContents?jsxRuntime.jsx(CustomNode,Object.assign({customNodeProps:customNodeProps},customNodeAllProps,{children:CollectionChildren})):CollectionChildren,KeyDisplay=isEditingKey?jsxRuntime.jsx("input",{className:"jer-collection-name",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}):jsxRuntime.jsx("span",{style:getStyles("property",nodeData),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:showKey?`${name}:`:null}),EditButtonDisplay=showEditButtons&&jsxRuntime.jsx(EditButtons,{startEdit:canEdit?()=>{hasBeenOpened.current=!0,setCurrentlyEditingElement(pathString),setCollapsed(!1)}:void 0,handleAdd:canAdd?key=>{setCollapsed(!1);const newValue=getDefaultNewValue(nodeData);"array"===collectionType?onAdd(newValue,[...path,data.length]).then((error=>{error&&showError(error)})):key in data?showError(translate("ERROR_KEY_EXISTS",nodeData)):onAdd(newValue,[...path,key]).then((error=>{error&&showError(error)}))}:void 0,handleDelete:canDelete?handleDelete:void 0,enableClipboard:enableClipboard,type:collectionType,nodeData:nodeData,translate:translate}),CollectionNodeComponent=jsxRuntime.jsxs("div",{className:"jer-component jer-collection-component",style:Object.assign({marginLeft:(0===path.length?0:indent/2)+"em"},getStyles("collection",nodeData)),children:[showCollectionWrapper?jsxRuntime.jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[jsxRuntime.jsxs("div",{className:"jer-collection-name",children:[jsxRuntime.jsx("div",{className:"jer-collapse-icon",onClick:e=>(e=>{if(e.getModifierState("Alt"))return hasBeenOpened.current=!0,void setCollapseState({open:!collapsed,path:path});currentlyEditingElement&&currentlyEditingElement.includes(pathString)||(setIsAnimating(!0),hasBeenOpened.current=!0,setCollapsed(!collapsed),setTimeout((()=>setIsAnimating(!1)),500))})(e),children:jsxRuntime.jsx(Icon,{name:"chevron",rotate:collapsed,nodeData:nodeData})}),KeyDisplay,!isEditing&&jsxRuntime.jsx("span",{className:"jer-brackets jer-bracket-open",style:getStyles("bracket",nodeData),children:brackets.open})]}),!isEditing&&showCount&&jsxRuntime.jsx("div",{className:"jer-collection-item-count"+(showCount?" jer-visible":" jer-hidden"),style:getStyles("itemCount",nodeData),children:1===size?translate("ITEM_SINGLE",Object.assign(Object.assign({},nodeData),{size:1}),1):translate("ITEMS_MULTIPLE",nodeData,size)}),jsxRuntime.jsx("div",{className:"jer-brackets"+(isCollapsed?" jer-visible":" jer-hidden"),style:getStyles("bracket",nodeData),children:brackets.close}),EditButtonDisplay]}):hideKey?jsxRuntime.jsx(jsxRuntime.Fragment,{}):jsxRuntime.jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[KeyDisplay,EditButtonDisplay]}),jsxRuntime.jsxs("div",{className:"jer-collection-inner",style:Object.assign({maxHeight:isCollapsed?0:areChildrenBeingEdited(pathString)?void 0:3*numOfLines+"em",overflowY:isCollapsed||isAnimating?"hidden":"visible",transition:`max-height ${transitionTime}`},getStyles("collectionInner",nodeData)),children:[CollectionContents,jsxRuntime.jsx("div",{className:isEditing?"jer-collection-error-row":"jer-collection-error-row-edit",children:error&&jsxRuntime.jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})}),!isEditing&&showCollectionWrapper&&jsxRuntime.jsx("div",{className:"jer-brackets jer-bracket-outside",style:getStyles("bracket",nodeData),children:brackets.close})]})]});return CustomWrapper?jsxRuntime.jsx(CustomWrapper,Object.assign({customNodeProps:wrapperProps},customNodeAllProps,{children:CollectionNodeComponent})):CollectionNodeComponent},localisedStrings={ITEM_SINGLE:"{{count}} item",ITEMS_MULTIPLE:"{{count}} items",KEY_NEW:"Enter new key",ERROR_KEY_EXISTS:"Key already exists",ERROR_INVALID_JSON:"Invalid JSON",ERROR_UPDATE:"Update unsuccessful",ERROR_DELETE:"Delete unsuccessful",ERROR_ADD:"Adding node unsuccessful",DEFAULT_STRING:"New data!",DEFAULT_NEW_KEY:"key"},getTranslateFunction=(translations,customText)=>(key,customTextData,count)=>((translations,customText,customTextData,key,count)=>{if(customText[key]){const output=customText[key](customTextData);if(null!==output)return output}const string=key in translations?translations[key]:localisedStrings[key];return void 0===count?string:null==string?void 0:string.replace("{{count}}",String(count))})(translations,customText,customTextData,key,count),Editor=({data:srcData,rootName:rootName="root",onUpdate:onUpdate=(()=>{}),onEdit:srcEdit=onUpdate,onDelete:srcDelete=onUpdate,onAdd:srcAdd=onUpdate,onChange:onChange,enableClipboard:enableClipboard=!0,theme:theme="default",icons:icons,indent:indent=3,collapse:collapse=!1,showCollectionCount:showCollectionCount=!0,restrictEdit:restrictEdit=!1,restrictDelete:restrictDelete=!1,restrictAdd:restrictAdd=!1,restrictTypeSelection:restrictTypeSelection=!1,searchFilter:searchFilterInput,searchText:searchText,searchDebounceTime:searchDebounceTime=350,keySort:keySort=!1,showArrayIndices:showArrayIndices=!0,showStringQuotes:showStringQuotes=!0,defaultValue:defaultValue=null,minWidth:minWidth=250,maxWidth:maxWidth="min(600px, 90vw)",stringTruncate:stringTruncate=250,translations:translations={},className:className,id:id,customText:customText={},customNodeDefinitions:customNodeDefinitions=[]})=>{const{getStyles:getStyles,setTheme:setTheme,setIcons:setIcons}=useTheme(),{setCollapseState:setCollapseState}=useTreeState(),collapseFilter=react.useCallback(getFilterFunction(collapse),[collapse]),translate=react.useCallback(getTranslateFunction(translations,customText),[translations,customText]),[debouncedSearchText,setDebouncedSearchText]=react.useState(searchText),[data,setData]=react.useState(srcData);react.useEffect((()=>{theme&&setTheme(theme),icons&&setIcons(icons)}),[theme,icons]),react.useEffect((()=>{setCollapseState(null),setData(srcData)}),[srcData]),react.useEffect((()=>{const debounce=setTimeout((()=>setDebouncedSearchText(searchText)),searchDebounceTime);return()=>clearTimeout(debounce)}),[searchText,searchDebounceTime]);const nodeData={key:rootName,path:[],level:0,index:0,value:data,size:Object.keys(data).length,parentData:null,fullData:data},restrictEditFilter=getFilterFunction(restrictEdit),restrictDeleteFilter=getFilterFunction(restrictDelete),restrictAddFilter=getFilterFunction(restrictAdd),searchFilter=getSearchFilter(searchFilterInput),otherProps={name:rootName,nodeData:nodeData,onEdit:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"update");if(currentValue===newValue)return;setData(newData);const result=yield srcEdit({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return void 0!==result?(setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result):void 0})),onDelete:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"delete");setData(newData);const result=yield srcDelete({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onAdd:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"add");setData(newData);const result=yield srcAdd({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onChange:onChange,showCollectionCount:showCollectionCount,collapseFilter:collapseFilter,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:debouncedSearchText,enableClipboard:enableClipboard,keySort:keySort,showArrayIndices:showArrayIndices,showStringQuotes:showStringQuotes,indent:indent,defaultValue:defaultValue,stringTruncate:stringTruncate,translate:translate,customNodeDefinitions:customNodeDefinitions,parentData:null};return jsxRuntime.jsx("div",{id:id,className:"jer-editor-container "+className,style:Object.assign(Object.assign({},getStyles("container",nodeData)),{minWidth:minWidth,maxWidth:maxWidth}),children:isCollection(data)?jsxRuntime.jsx(CollectionNode,Object.assign({data:data},otherProps)):jsxRuntime.jsx(ValueNodeWrapper,Object.assign({data:data,showLabel:!0},otherProps))})},updateDataObject=(data,path,newValue,action)=>{if(0===path.length)return{currentData:data,newData:newValue,currentValue:data,newValue:newValue};const currentValue="add"!==action?extract(data,path):void 0;return{currentData:data,newData:assign(clone(data),path,newValue,{remove:"delete"===action}),currentValue:currentValue,newValue:"delete"!==action?newValue:void 0}},getFilterFunction=propValue=>"boolean"==typeof propValue?()=>propValue:"number"==typeof propValue?({level:level})=>level>=propValue:propValue,getSearchFilter=searchFilterInput=>{if(void 0!==searchFilterInput)return"value"===searchFilterInput?matchNode:"key"===searchFilterInput?matchNodeKey:"all"===searchFilterInput?(inputData,searchText)=>matchNode(inputData,searchText)||matchNodeKey(inputData,searchText):searchFilterInput},LinkCustomComponent=({value:value,setIsEditing:setIsEditing,getStyles:getStyles,customNodeProps:customNodeProps,nodeData:nodeData})=>{var _a,_b;const stringTruncateLength=null!==(_a=null==customNodeProps?void 0:customNodeProps.stringTruncate)&&void 0!==_a?_a:100,styles=getStyles("string",nodeData);return jsxRuntime.jsx("div",{onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string jer-hyperlink",style:styles,children:jsxRuntime.jsxs("a",{href:value,target:"_blank",rel:"noreferrer",style:{color:null!==(_b=styles.color)&&void 0!==_b?_b:void 0},children:['"',truncate(value,stringTruncateLength),'"']})})},LinkCustomNodeDefinition={condition:({value:value})=>"string"==typeof value&&/^https?:\/\/.+\..+$/.test(value),element:LinkCustomComponent,showOnView:!0,showOnEdit:!1};exports.assign=assign,exports.extract=extract,exports.IconAdd=IconAdd,exports.IconCancel=IconCancel,exports.IconChevron=IconChevron,exports.IconCopy=IconCopy,exports.IconDelete=IconDelete,exports.IconEdit=IconEdit,exports.IconOk=IconOk,exports.JsonEditor=props=>jsxRuntime.jsx(ThemeProvider,{children:jsxRuntime.jsx(TreeStateProvider,{children:jsxRuntime.jsx(Editor,Object.assign({},props))})}),exports.LinkCustomComponent=LinkCustomComponent,exports.LinkCustomNodeDefinition=LinkCustomNodeDefinition,exports.isCollection=isCollection,exports.matchNode=matchNode,exports.matchNodeKey=matchNodeKey,exports.themes=themes,exports.truncate=truncate;
"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),assign=require("object-property-assigner"),extract=require("object-property-extractor"),JSON5=require("json5"),clone=require("just-clone");function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){var value;result.done?resolve(result.value):(value=result.value,value instanceof P?value:new P((function(resolve){resolve(value)}))).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;var e=[],t=[];!function(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}(":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.5s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: 0.8em;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 16px;\n line-height: 1;\n padding: 1em;\n padding-left: 2em;\n /* margin-top: 1em; */\n /* margin-bottom: 1em; */\n border-radius: 0.5em;\n text-align: left;\n}\n\n.jer-editor-container textarea {\n color: var(--jer-input-color);\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container textarea:focus {\n border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n font-family: inherit;\n}\n\n.jer-editor-container input:focus {\n border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n display: flex;\n min-height: 1.7em;\n gap: 0.3em;\n align-items: center;\n}\n\n.jer-collection-header-row {\n display: flex;\n flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-bracket-outside {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collapse-icon {\n position: absolute;\n left: -1.2em;\n top: 0.35em;\n}\n\n.jer-collection-inner {\n position: relative;\n}\n\n.jer-collection-text-edit {\n display: flex;\n flex-direction: column;\n gap: 0.3em;\n align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n font-family: inherit;\n font-size: 0.85em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n margin-top: 0.4em;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.jer-hyperlink {\n text-decoration: underline;\n}\n\n.jer-input-text {\n resize: none;\n margin: 0;\n height: 1.4em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-top: 0.25em;\n padding-bottom: 0.2em;\n min-width: 6em;\n overflow: hidden;\n line-height: 1.2em;\n font-family: inherit;\n font-size: 0.9em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-key-text {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-key-edit {\n padding: 0 0.3em;\n font-size: inherit;\n font-size: 0.9em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n.jer-input-number {\n min-width: 3em;\n font-size: 90%;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n height: 1em;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n position: relative;\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n content: '';\n display: block;\n position: absolute;\n border-radius: 50%;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: all 0.5s;\n box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n position: absolute;\n border-radius: 4em;\n left: 0;\n top: 0;\n opacity: 1;\n transition: 0s;\n}\n\n.jer-copy-pulse:active {\n top: 0.07em;\n}\n\n.jer-rotate-90 {\n transform: rotate(-90deg);\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n /* font-size: '2em'; */\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n",{});const AutogrowTextArea=({className:className,name:name,value:value,setValue:setValue,handleKeyPress:handleKeyPress,styles:styles})=>{const dummyValue="\n"===value.slice(-1)?value+".":value;return jsxRuntime.jsxs("div",{style:{display:"grid"},children:[jsxRuntime.jsx("textarea",{id:`${name}_textarea`,style:Object.assign({height:"auto",gridArea:"1 / 1 / 2 / 2",overflowY:"auto",whiteSpace:"pre-wrap"},styles),rows:1,className:className,name:`${name}_textarea`,value:value,onChange:e=>setValue(e.target.value),autoFocus:!0,onFocus:e=>{value.length<40&&e.target.select()},onKeyDown:handleKeyPress}),jsxRuntime.jsx("span",{className:className,style:Object.assign({visibility:"hidden",height:"auto",gridArea:"1 / 1 / 2 / 2",color:"red",opacity:.9,whiteSpace:"pre-wrap",overflowY:"auto",border:"1px solid transparent"},styles),children:dummyValue})]})},themes={default:{displayName:"Default",fragments:{edit:"rgb(42, 161, 152)"},styles:{container:{backgroundColor:"#f6f6f6",fontFamily:"monospace"},collection:{},collectionInner:{},collectionElement:{},property:"#292929",bracket:{color:"rgb(0, 43, 54)",fontWeight:"bold"},itemCount:{color:"rgba(0, 0, 0, 0.3)",fontStyle:"italic"},string:"rgb(203, 75, 22)",number:"rgb(38, 139, 210)",boolean:"green",null:{color:"rgb(220, 50, 47)",fontVariant:"small-caps",fontWeight:"bold"},input:["#292929"],inputHighlight:"#b3d8ff",error:{fontSize:"0.8em",color:"red",fontWeight:"bold"},iconCollection:"rgb(0, 43, 54)",iconEdit:"edit",iconDelete:"rgb(203, 75, 22)",iconAdd:"edit",iconCopy:"rgb(38, 139, 210)",iconOk:"green",iconCancel:"rgb(203, 75, 22)"}},githubDark:{displayName:"Github Dark",styles:{container:{backgroundColor:"#0d1117",color:"white"},property:"#E6EDF3",bracket:"#56d364",itemCount:"#8B949E",string:"#A5D6FF",number:"#D2A8FF",boolean:{color:"#FF7B72",fontSize:"90%",fontWeight:"bold"},null:"green",iconCollection:"#D2A8FF",iconEdit:"#D2A8FF",iconDelete:"rgb(203, 75, 22)",iconAdd:"rgb(203, 75, 22)",iconCopy:"#A5D6FF",iconOk:"#56d364",iconCancel:"rgb(203, 75, 22)"}},githubLight:{displayName:"Github Light",styles:{container:"white",property:"#1F2328",bracket:"#00802e",itemCount:"#8B949E",string:"#0A3069",number:"#953800",boolean:{color:"#CF222E",fontSize:"90%",fontWeight:"bold"},null:"#FF7B72",iconCollection:"#8250DF",iconEdit:"#8250DF",iconDelete:"rgb(203, 75, 22)",iconAdd:"#8250DF",iconCopy:"#57606A"}},monoDark:{displayName:"Black & White",fragments:{lightText:{color:"white"},midGrey:"#5c5c5c"},styles:{container:["lightText",{backgroundColor:"black"}],property:"lightText",bracket:"midGrey",itemCount:"#4a4a4a",string:"#a8a8a8",number:"#666666",boolean:{color:"#848484",fontStyle:"italic"},null:"#333333",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},monoLight:{fragments:{midGrey:"#a3a3a3"},displayName:"White & Black",styles:{container:"white",property:"black",bracket:"midGrey",itemCount:"#b5b5b5",string:"#575757",number:"#999999",boolean:{color:"#7b7b7b",fontStyle:"italic"},null:"#cccccc",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},candyWrapper:{displayName:"Candy Wrapper",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},darkBlue:{color:"#2B2D42"}},styles:{container:"minty",property:"pop",bracket:"dark",itemCount:"pale",string:"mid",number:["darkBlue",{fontSize:"85%"}],boolean:["mid",{fontStyle:"italic",fontWeight:"bold",fontSize:"80%"}],null:["#cccccc",{fontWeight:"bold"}],input:{border:"1px solid rgb(115, 194, 198)"},iconCollection:"#1D3557",iconEdit:"#457B9D",iconDelete:"#E63946",iconAdd:"#2B2D42",iconCopy:"#1D3557",iconCancel:"#E63946"}},psychedelic:{displayName:"Psychedelic",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},fluroYellow:"rgb(242, 228, 21)",fluroGreen:"rgb(68, 255, 62)",hotPink:"#f7379a"},styles:{container:{backgroundColor:"unset",background:"linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)",color:"black"},property:"black",bracket:"fluroYellow",itemCount:["pale",{opacity:.7}],string:"white",number:["#33d9ff",{fontSize:"90%",fontWeight:"bold"}],boolean:["fluroGreen",{fontWeight:"bold",fontSize:"80%"}],null:["black",{fontWeight:"bold",opacity:.3,backgroundColor:"rgb(255, 255, 255, 0.5)",padding:"0 0.4em",borderRadius:"0.4em"}],iconCollection:"fluroYellow",iconEdit:["black"],iconDelete:["white",{opacity:.5}],iconAdd:["white",{opacity:.5}],iconCopy:"rgb(32, 84, 242)",iconOk:"fluroGreen",iconCancel:"hotPink"}}},emptyStyleObject={container:{},collection:{},collectionInner:{},collectionElement:{},property:{},bracket:{},itemCount:{},string:{},number:{},boolean:{},null:{},input:{},inputHighlight:{},error:{},iconCollection:{},iconEdit:{},iconDelete:{},iconAdd:{},iconCopy:{},iconOk:{},iconCancel:{}},defaultTheme=themes.default,ThemeProviderContext=react.createContext({getStyles:()=>({}),setTheme:_=>{},icons:{},setIcons:()=>{}}),ThemeProvider=({children:children})=>{const[styles,setStyles]=react.useState(emptyStyleObject),[icons,setIcons]=react.useState({});return jsxRuntime.jsx(ThemeProviderContext.Provider,{value:{getStyles:(element,nodeData)=>"function"==typeof styles[element]?styles[element](nodeData):styles[element],setTheme:theme=>{const styles=compileStyles(theme);setStyles(styles)},icons:icons,setIcons:setIcons},children:children})},useTheme=()=>react.useContext(ThemeProviderContext),compileStyles=themeInput=>{var _a,_b,_c,_d;const collectedFunctions={},stylesArray=(Array.isArray(themeInput)?themeInput:[themeInput]).map((theme=>"default"===themeInput?{}:"string"==typeof theme?buildStyleObject(themes[theme],collectedFunctions):isStyleObject(theme)?buildStyleObject({fragments:{},styles:theme},collectedFunctions):buildStyleObject(theme,collectedFunctions))),mergedStyleObject=buildStyleObject(defaultTheme,{});Object.keys(mergedStyleObject).forEach((k=>{const key=k;stylesArray.forEach((styleObj=>{styleObj[key]&&(mergedStyleObject[key]=Object.assign(Object.assign({},mergedStyleObject[key]),styleObj[key]))}))}));const finalStyles=Object.assign({},mergedStyleObject);return Object.entries(collectedFunctions).forEach((([key,func])=>{const element=key;finalStyles[element]=nodeData=>{const funcResult=func(nodeData)||{};return Object.assign(Object.assign({},mergedStyleObject[element]),funcResult)}})),"function"!=typeof(null==finalStyles?void 0:finalStyles.inputHighlight)&&(null===(_a=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_a?void 0:_a.backgroundColor)&&document.documentElement.style.setProperty("--jer-highlight-color",null===(_b=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_b?void 0:_b.backgroundColor),"function"!=typeof(null==finalStyles?void 0:finalStyles.iconCopy)&&(null===(_c=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_c?void 0:_c.color)&&document.documentElement.style.setProperty("--jer-icon-copy-color",null===(_d=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_d?void 0:_d.color),finalStyles},buildStyleObject=(theme,collectedFunctions)=>{const{fragments:fragments,styles:styles}=theme,styleObject={};return Object.entries(styles).forEach((([key,value])=>{const cssStyles=(Array.isArray(value)?value:[value]).reduce(((acc,curr)=>{var _a;if("function"==typeof curr)return collectedFunctions[key]=curr,Object.assign({},acc);if("string"==typeof curr){const style=null!==(_a=null==fragments?void 0:fragments[curr])&&void 0!==_a?_a:curr;return"string"==typeof style?Object.assign(Object.assign({},acc),{[defaultStyleProperties[key]]:style}):Object.assign(Object.assign({},acc),style)}return Object.assign(Object.assign({},acc),curr)}),{});styleObject[key]=cssStyles})),styleObject},isStyleObject=overrideObject=>!("styles"in overrideObject),defaultStyleProperties={container:"backgroundColor",collection:"backgroundColor",collectionInner:"backgroundColor",collectionElement:"backgroundColor",property:"color",bracket:"color",itemCount:"color",string:"color",number:"color",boolean:"color",null:"color",input:"color",inputHighlight:"backgroundColor",error:"color",iconCollection:"color",iconEdit:"color",iconDelete:"color",iconAdd:"color",iconCopy:"color",iconOk:"color",iconCancel:"color"},truncate=(string,length=200)=>string.length<length?string:`${string.slice(0,length-2).trim()}...`,toPathString=path=>path.join(".").replace(/"/g,"_"),StringValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme(),pathString=toPathString(path),quoteChar=showStringQuotes?'"':"";return isEditing?jsxRuntime.jsx(AutogrowTextArea,{className:"jer-input-text",name:pathString,value:value,setValue:setValue,isEditing:isEditing,handleKeyPress:e=>{"Enter"!==e.key||e.shiftKey?"Escape"===e.key&&handleCancel():handleEdit()},styles:getStyles("input",nodeData)}):jsxRuntime.jsxs("div",{id:`${pathString}_display`,onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string",style:getStyles("string",nodeData),children:[quoteChar,truncate(value,stringTruncate),quoteChar]})},NumberValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();return isEditing?jsxRuntime.jsx("input",{className:"jer-input-number",type:"text",name:toPathString(path),value:value,onChange:e=>setValue(e.target.value.replace(/[^0-9.-]/g,"")),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{switch(e.key){case"Enter":handleEdit();break;case"Escape":handleCancel();break;case"ArrowUp":e.preventDefault(),setValue(Number(value)+1);break;case"ArrowDown":e.preventDefault(),setValue(Number(value)-1)}},style:{width:String(value).length/1.5+2+"em"}}):jsxRuntime.jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-number",style:getStyles("number",nodeData),children:value})},BooleanValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing,handleEdit]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsxRuntime.jsx("input",{className:"jer-input-boolean",type:"checkbox",name:toPathString(path),checked:value,onChange:()=>setValue(!value)}):jsxRuntime.jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-boolean",style:getStyles("boolean",nodeData),children:String(value)})},NullValue=({value:value,isEditing:isEditing,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsxRuntime.jsx("div",{className:"jer-input-null",children:"null"}):jsxRuntime.jsx("div",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-null",style:getStyles("null",nodeData),children:String(value)})},ObjectValue=({value:value,translate:translate,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsxRuntime.jsx("span",{className:"jer-value-object",children:`{${translate("DEFAULT_NEW_KEY",nodeData)}: "${String(value)}" }`})},ArrayValue=({value:value,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{react.useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsxRuntime.jsx("span",{className:"jer-value-array",children:`[${null===value?"":String(value)}]`})},InvalidValue=({value:value})=>{let message="Error!";switch(typeof value){case"string":"**INVALID_FUNCTION**"===value&&(message="Function");break;case"undefined":message="Undefined";break;case"symbol":message="Symbol"}return jsxRuntime.jsx("span",{className:"jer-value-invalid",children:message})},IconAdd=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z"}),jsxRuntime.jsx("path",{d:"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"})]}),IconEdit=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,transform:"translate(0, 0.5)",children:[jsxRuntime.jsx("path",{d:"M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"}),jsxRuntime.jsx("path",{d:"M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"})]}),IconDelete=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z"})}),IconCopy=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z"}),jsxRuntime.jsx("path",{d:"M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11"}),jsxRuntime.jsx("path",{d:"M15 10l-4 4 4 4"})]}),IconOk=({size:size,style:style,className:className})=>jsxRuntime.jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsxRuntime.jsx("path",{d:"M22 11.08V12a10 10 0 11-5.93-9.14"}),jsxRuntime.jsx("path",{d:"M22 4L12 14.01l-3-3"})]}),IconCancel=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{baseProfile:"tiny",viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z"})}),IconChevron=({size:size,style:style,className:className})=>jsxRuntime.jsx("svg",{viewBox:"0 0 512 512",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsxRuntime.jsx("path",{d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})}),Icon=({name:name,nodeData:nodeData,rotate:rotate})=>{var _a,_b,_c,_d,_e,_f,_g;const{getStyles:getStyles,icons:icons}=useTheme(),commonProps={size:"1.4em",className:"jer-icon"};switch(name){case"add":return null!==(_a=null==icons?void 0:icons.add)&&void 0!==_a?_a:jsxRuntime.jsx(IconAdd,Object.assign({},commonProps,{style:getStyles("iconAdd",nodeData)}));case"edit":return null!==(_b=null==icons?void 0:icons.edit)&&void 0!==_b?_b:jsxRuntime.jsx(IconEdit,Object.assign({},commonProps,{style:getStyles("iconEdit",nodeData)}));case"delete":return null!==(_c=null==icons?void 0:icons.delete)&&void 0!==_c?_c:jsxRuntime.jsx(IconDelete,Object.assign({},commonProps,{style:getStyles("iconDelete",nodeData),size:"1.45em"}));case"copy":return null!==(_d=null==icons?void 0:icons.copy)&&void 0!==_d?_d:jsxRuntime.jsx(IconCopy,Object.assign({},commonProps,{style:getStyles("iconCopy",nodeData),size:"1.2em"}));case"ok":return null!==(_e=null==icons?void 0:icons.ok)&&void 0!==_e?_e:jsxRuntime.jsx(IconOk,Object.assign({},commonProps,{style:Object.assign({fontSize:"90%"},getStyles("iconOk",nodeData))}));case"cancel":return null!==(_f=null==icons?void 0:icons.cancel)&&void 0!==_f?_f:jsxRuntime.jsx(IconCancel,Object.assign({},commonProps,{style:Object.assign({fontSize:"130%"},getStyles("iconCancel",nodeData))}));case"chevron":return null!==(_g=null==icons?void 0:icons.chevron)&&void 0!==_g?_g:jsxRuntime.jsx(IconChevron,{className:"jer-accordion-icon"+(rotate?" jer-rotate-90":""),size:"1em",style:getStyles("iconCollection",nodeData)});default:return jsxRuntime.jsx(jsxRuntime.Fragment,{})}},EditButtons=({startEdit:startEdit,handleDelete:handleDelete,handleAdd:handleAdd,enableClipboard:enableClipboard,type:type,nodeData:nodeData,translate:translate})=>{const{getStyles:getStyles}=useTheme(),NEW_KEY_PROMPT=translate("KEY_NEW",nodeData),[isAdding,setIsAdding]=react.useState(!1),[newKey,setNewKey]=react.useState(NEW_KEY_PROMPT),{key:key,path:path,value:data}=nodeData;react.useEffect((()=>{isAdding||setNewKey(NEW_KEY_PROMPT)}),[isAdding]);return jsxRuntime.jsxs("div",{className:"jer-edit-buttons",style:isAdding?{opacity:1}:void 0,children:[enableClipboard&&jsxRuntime.jsx("div",{onClick:e=>{let value,copyType="value",stringValue="";if(enableClipboard){if(!0===(e.ctrlKey||e.metaKey))value=stringifyPath(path),stringValue=value,copyType="path";else value=data,stringValue=type?JSON.stringify(data,null,2):String(value);navigator.clipboard.writeText(stringValue)}"function"==typeof enableClipboard&&enableClipboard({value:value,stringValue:stringValue,path:path,key:key,type:copyType})},className:"jer-copy-pulse",children:jsxRuntime.jsx(Icon,{name:"copy",nodeData:nodeData})}),startEdit&&jsxRuntime.jsx("div",{onClick:startEdit,children:jsxRuntime.jsx(Icon,{name:"edit",nodeData:nodeData})}),handleDelete&&jsxRuntime.jsx("div",{onClick:handleDelete,children:jsxRuntime.jsx(Icon,{name:"delete",nodeData:nodeData})}),handleAdd&&jsxRuntime.jsx("div",{onClick:()=>{"object"===type?setIsAdding(!0):handleAdd("")},children:jsxRuntime.jsx(Icon,{name:"add",nodeData:nodeData})}),isAdding&&handleAdd&&"object"===type&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("input",{className:"jer-input-new-key",type:"text",name:"new-object-key",value:newKey,onChange:e=>setNewKey(e.target.value),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&handleAdd?(setIsAdding(!1),handleAdd(newKey)):"Escape"===e.key&&setIsAdding(!1)},style:getStyles("input",nodeData)}),jsxRuntime.jsx(InputButtons,{onOk:()=>{newKey&&(setIsAdding(!1),handleAdd(newKey))},onCancel:()=>{setIsAdding(!1)},nodeData:nodeData})]})]})},InputButtons=({onOk:onOk,onCancel:onCancel,nodeData:nodeData})=>jsxRuntime.jsxs("div",{className:"jer-confirm-buttons",children:[jsxRuntime.jsx("div",{onClick:onOk,children:jsxRuntime.jsx(Icon,{name:"ok",nodeData:nodeData})}),jsxRuntime.jsx("div",{onClick:onCancel,children:jsxRuntime.jsx(Icon,{name:"cancel",nodeData:nodeData})})]}),stringifyPath=path=>path.reduce(((str,part)=>"number"==typeof part?`${str}[${part}]`:""===str?part:`${str}.${part}`),""),DataTypes=["string","number","boolean","null","object","array"],getCustomNode=(customNodeDefinitions=[],nodeData)=>{const matchingDefinitions=customNodeDefinitions.filter((({condition:condition})=>condition(nodeData)));if(0===matchingDefinitions.length)return{};const _a=matchingDefinitions[0],{element:element,wrapperElement:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey=!1,showEditTools:showEditTools=!0,showOnEdit:showOnEdit=!1,showOnView:showOnView=!0,showCollectionWrapper:showCollectionWrapper=!0}=_a,rest=__rest(_a,["element","wrapperElement","customNodeProps","wrapperProps","hideKey","showEditTools","showOnEdit","showOnView","showCollectionWrapper"]);return Object.assign({CustomNode:element,CustomWrapper:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey,showEditTools:showEditTools,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper},rest)},isCollection=value=>null!==value&&"object"==typeof value,filterNode=(type,nodeData,searchFilter,searchText="")=>{if(!searchFilter&&!searchText)return!0;switch(type){case"collection":if(searchFilter){if(searchFilter(nodeData,searchText))return!0;if(!filterCollection(searchText,nodeData,searchFilter))return!1}if(!searchFilter&&searchText&&!filterCollection(searchText,nodeData))return!1;break;case"value":if(searchFilter&&!searchFilter(nodeData,searchText))return!1;if(!searchFilter&&searchText&&!matchNode(nodeData,searchText))return!1}return!0},filterCollection=(searchText="",nodeData,matcher=matchNode)=>{const collection=nodeData.value;return Object.entries(collection).some((([key,value])=>{const childPath=[...nodeData.path,key],childNodeData=Object.assign(Object.assign({},nodeData),{key:key,path:childPath,level:nodeData.level+1,value:value,size:childPath.length,parentData:collection});return isCollection(value)?filterCollection(searchText,childNodeData,matcher):matcher(childNodeData,searchText)}))},matchNode=(nodeData,searchText="")=>{const{value:value}=nodeData;if(null===value&&"null".includes(searchText.toLowerCase()))return!0;switch(typeof value){case"string":return value.toLowerCase().includes(searchText.toLowerCase());case"number":return!!String(value).includes(searchText);case"boolean":return value?"true".includes(searchText.toLowerCase())||"1"===searchText:"false".includes(searchText.toLowerCase())||"0"===searchText;default:return!1}},matchNodeKey=({key:key,path:path},searchText="")=>!!matchNode({value:key},searchText)||!!path.some((field=>matchNode({value:field},searchText))),TreeStateProviderContext=react.createContext({collapseState:null,setCollapseState:()=>{},doesPathMatch:()=>!1,currentlyEditingElement:null,setCurrentlyEditingElement:()=>{},areChildrenBeingEdited:()=>!1}),TreeStateProvider=({children:children})=>{const[collapseState,setCollapseState]=react.useState(null),[currentlyEditingElement,setCurrentlyEditingElement]=react.useState(null);return jsxRuntime.jsx(TreeStateProviderContext.Provider,{value:{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:path=>{if(null===collapseState)return!1;for(const[index,value]of collapseState.path.entries())if(value!==path[index])return!1;return!0},currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:pathString=>null!==currentlyEditingElement&&currentlyEditingElement.includes(pathString)},children:children})},useTreeState=()=>react.useContext(TreeStateProviderContext),ValueNodeWrapper=props=>{const{data:data,parentData:parentData,nodeData:nodeData,onEdit:onEdit,onDelete:onDelete,onChange:onChange,enableClipboard:enableClipboard,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:searchText,showLabel:showLabel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,indent:indent,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,{getStyles:getStyles}=useTheme(),{currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement}=useTreeState(),[value,setValue]=react.useState("function"==typeof data?"**INVALID_FUNCTION**":data),[error,setError]=react.useState(null),{key:name,path:path}=nodeData,customNodeData=getCustomNode(customNodeDefinitions,nodeData),[dataType,setDataType]=react.useState(getDataType(data,customNodeData)),pathString=toPathString(path),updateValue=react.useCallback((newValue=>{if(!onChange)return void setValue(newValue);const modifiedValue=onChange({currentData:nodeData.fullData,newValue:newValue,currentValue:value,name:name,path:path});setValue(modifiedValue)}),[onChange]);react.useEffect((()=>{setValue("function"==typeof data?"**INVALID_FUNCTION**":data),setDataType(getDataType(data,customNodeData))}),[data,error]);const canEdit=react.useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=react.useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView}=customNodeData,allDataTypes=[...DataTypes,...customNodeDefinitions.filter((({showInTypesSelector:showInTypesSelector=!1,name:name})=>showInTypesSelector&&!!name)).map((({name:name})=>name))],allowedDataTypes=react.useMemo((()=>{if("boolean"==typeof restrictTypeSelection)return restrictTypeSelection?[]:allDataTypes;if(Array.isArray(restrictTypeSelection))return restrictTypeSelection;const result=restrictTypeSelection(nodeData);return"boolean"==typeof result?result?[]:allDataTypes:result}),[nodeData,restrictTypeSelection]);if(!filterNode("value",nodeData,searchFilter,searchText))return null;const logError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{let newValue;switch(setCurrentlyEditingElement(null),dataType){case"object":newValue={[translate("DEFAULT_NEW_KEY",nodeData)]:value};break;case"array":newValue=null!=value?value:[];break;case"number":{const n=Number(value);newValue=isNaN(n)?0:n;break}default:newValue=value}onEdit(newValue,path).then((error=>{error&&logError(error)}))},handleCancel=()=>{setCurrentlyEditingElement(null),setValue(data),setDataType(getDataType(data,customNodeData))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,canEditKey=!("number"==typeof path.slice(-1)[0])&&canEdit&&canDelete,showError=!isEditing&&error,showTypeSelector=isEditing&&allowedDataTypes.length>0,showEditButtons="invalid"!==dataType&&!error&&showEditTools,showKeyEdit=showLabel&&isEditingKey,showKey=showLabel&&!isEditingKey&&!hideKey,inputProps={value:value,parentData:parentData,setValue:updateValue,isEditing:isEditing,setIsEditing:canEdit?()=>setCurrentlyEditingElement(pathString):()=>{},handleEdit:handleEdit,handleCancel:handleCancel,path:path,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData,translate:translate},ValueComponent=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView)?jsxRuntime.jsx(CustomNode,Object.assign({},props,{value:value,customNodeProps:customNodeProps,setValue:updateValue,handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:e=>{"Enter"===e.key?handleEdit():"Escape"===e.key&&handleCancel()},isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles})):getInputComponent(getDataType(data),inputProps);return jsxRuntime.jsx("div",{className:"jer-component jer-value-component",style:{marginLeft:indent/2+"em"},children:jsxRuntime.jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[showKey&&jsxRuntime.jsxs("span",{className:"jer-key-text",style:Object.assign(Object.assign({},getStyles("property",nodeData)),{minWidth:`${Math.min(String(name).length+1,5)}ch`,flexShrink:name.length>10?1:0}),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:[name,":"," "]}),showKeyEdit&&jsxRuntime.jsx("input",{className:"jer-input-text jer-key-edit",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),jsxRuntime.jsxs("div",{className:"jer-value-and-buttons",children:[jsxRuntime.jsx("div",{className:"jer-input-component",children:ValueComponent}),isEditing?jsxRuntime.jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData}):showEditButtons&&jsxRuntime.jsx(EditButtons,{startEdit:canEdit?()=>setCurrentlyEditingElement(pathString):void 0,handleDelete:canDelete?()=>{onDelete(value,path).then((error=>{error&&logError(error)}))}:void 0,enableClipboard:enableClipboard,translate:translate,nodeData:nodeData}),showTypeSelector&&jsxRuntime.jsxs("div",{className:"jer-select",children:[jsxRuntime.jsx("select",{name:`${name}-type-select`,className:"jer-type-select",onChange:e=>(type=>{const customNode=customNodeDefinitions.find((customNode=>customNode.name===type));if(customNode)onEdit(customNode.defaultValue,path),setDataType(type);else{const newValue=convertValue(value,type,translate("DEFAULT_NEW_KEY",nodeData),(null==customNodeData?void 0:customNodeData.CustomNode)?translate("DEFAULT_STRING",nodeData):void 0);updateValue(newValue),onEdit(newValue,path),setDataType(type)}})(e.target.value),value:dataType,children:allowedDataTypes.map((type=>jsxRuntime.jsx("option",{value:type,children:type},type)))}),jsxRuntime.jsx("span",{className:"focus"})]}),showError&&jsxRuntime.jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})]})]})})},getDataType=(value,customNodeData)=>(null==customNodeData?void 0:customNodeData.CustomNode)&&(null==customNodeData?void 0:customNodeData.name)&&customNodeData.showInTypesSelector?customNodeData.name:"string"==typeof value?"string":"number"==typeof value?"number":"boolean"==typeof value?"boolean":null===value?"null":"invalid",getInputComponent=(dataType,inputProps)=>{const value=inputProps.value;switch(dataType){case"string":return jsxRuntime.jsx(StringValue,Object.assign({},inputProps,{value:value}));case"number":return jsxRuntime.jsx(NumberValue,Object.assign({},inputProps,{value:value}));case"boolean":return jsxRuntime.jsx(BooleanValue,Object.assign({},inputProps,{value:value}));case"null":return jsxRuntime.jsx(NullValue,Object.assign({},inputProps));case"object":return jsxRuntime.jsx(ObjectValue,Object.assign({},inputProps,{value:value}));case"array":return jsxRuntime.jsx(ArrayValue,Object.assign({},inputProps));default:return jsxRuntime.jsx(InvalidValue,Object.assign({},inputProps))}},convertValue=(value,type,defaultNewKey,defaultString)=>{switch(type){case"string":return null!=defaultString?defaultString:String(value);case"number":{const n=Number(value);return isNaN(n)?0:n}case"boolean":return!!value;case"null":return null;case"object":return{[defaultNewKey]:value};case"array":return[value];default:return String(value)}},CollectionNode=_a=>{var{data:data,nodeData:incomingNodeData,parentData:parentData,showCollectionCount:showCollectionCount}=_a,props=__rest(_a,["data","nodeData","parentData","showCollectionCount"]);const{getStyles:getStyles}=useTheme(),{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:doesPathMatch,currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:areChildrenBeingEdited}=useTreeState(),{onEdit:onEdit,onAdd:onAdd,onDelete:onDelete,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,collapseFilter:collapseFilter,enableClipboard:enableClipboard,searchFilter:searchFilter,searchText:searchText,indent:indent,keySort:keySort,showArrayIndices:showArrayIndices,defaultValue:defaultValue,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,[stringifiedValue,setStringifiedValue]=react.useState(JSON.stringify(data,null,2)),[error,setError]=react.useState(null),startCollapsed=collapseFilter(incomingNodeData),[collapsed,setCollapsed]=react.useState(startCollapsed),nodeData=Object.assign(Object.assign({},incomingNodeData),{collapsed:collapsed}),{path:path,key:name,size:size}=nodeData,pathString=toPathString(path),hasBeenOpened=react.useRef(!startCollapsed),[isAnimating,setIsAnimating]=react.useState(!1);react.useEffect((()=>{setStringifiedValue(JSON.stringify(data,null,2))}),[data]),react.useEffect((()=>{const isCollapsed=collapseFilter(nodeData);hasBeenOpened.current=!isCollapsed,setCollapsed(isCollapsed)}),[collapseFilter]),react.useEffect((()=>{null!==collapseState&&doesPathMatch(path)&&(hasBeenOpened.current=!0,setCollapsed(collapseState.open))}),[collapseState]);const canEdit=react.useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=react.useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),canAdd=react.useMemo((()=>!restrictAddFilter(nodeData)),[nodeData]),canEditKey=null!==parentData&&canEdit&&canAdd&&canDelete,getDefaultNewValue=react.useMemo((()=>nodeData=>"function"!=typeof defaultValue?defaultValue:defaultValue(nodeData)),[defaultValue]),{CustomNode:CustomNode,customNodeProps:customNodeProps,CustomWrapper:CustomWrapper,wrapperProps:wrapperProps={},hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper=!0}=react.useMemo((()=>getCustomNode(customNodeDefinitions,nodeData)),[]);if(!filterNode("collection",nodeData,searchFilter,searchText)&&nodeData.level>0)return null;const collectionType=Array.isArray(data)?"array":"object",brackets="array"===collectionType?{open:"[",close:"]"}:{open:"{",close:"}"},transitionTime=getComputedStyle(document.documentElement).getPropertyValue("--jer-expand-transition-time"),handleKeyPress=e=>{"Enter"===e.key&&(e.metaKey||e.shiftKey||e.ctrlKey)?handleEdit():"Escape"===e.key&&handleCancel()},showError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{try{const value=JSON5.parse(stringifiedValue);if(setCurrentlyEditingElement(null),setError(null),JSON.stringify(value)===JSON.stringify(data))return;onEdit(value,path).then((error=>{error&&showError(error)}))}catch(_a){setError(translate("ERROR_INVALID_JSON",nodeData)),setTimeout((()=>setError(null)),2500),console.log("Invalid JSON")}},handleDelete=path.length>0?()=>{onDelete(data,path).then((result=>{result&&showError(result)}))}:void 0,handleCancel=()=>{setCurrentlyEditingElement(null),setError(null),setStringifiedValue(JSON.stringify(data,null,2))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,isArray="number"==typeof path.slice(-1)[0],showCount="when-closed"===showCollectionCount?collapsed:showCollectionCount,showEditButtons=!isEditing&&showEditTools,showKey=(showArrayIndices||!isArray)&&!hideKey&&""!==name&&void 0!==name,showCustomNodeContents=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView),sortKeys=keySort&&"object"===collectionType,keyValueArray=Object.entries(data).map((([key,value])=>["array"===collectionType?Number(key):key,value]));sortKeys&&keyValueArray.sort("function"==typeof keySort?(a,b)=>keySort(a[0],b[0]):void 0);const numOfLines=JSON.stringify(data,null,2).replace(/\\n/g,"\n").split("\n").length,CollectionChildren=hasBeenOpened.current?isEditing?jsxRuntime.jsx("div",{className:"jer-collection-text-edit",children:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(AutogrowTextArea,{className:"jer-collection-text-area",name:pathString,value:stringifiedValue,setValue:setStringifiedValue,isEditing:isEditing,handleKeyPress:handleKeyPress,styles:getStyles("input",nodeData)}),jsxRuntime.jsx("div",{className:"jer-collection-input-button-row",children:jsxRuntime.jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData})})]})}):keyValueArray.map((([key,value],index)=>{const childNodeData={key:key,value:value,path:[...path,key],level:path.length+1,index:index,size:isCollection(value)?Object.keys(value).length:1,parentData:data,fullData:nodeData.fullData};return jsxRuntime.jsx("div",{className:"jer-collection-element",style:getStyles("collectionElement",childNodeData),children:isCollection(value)?jsxRuntime.jsx(CollectionNode,Object.assign({data:value,parentData:data,nodeData:childNodeData,showCollectionCount:showCollectionCount},props),key):jsxRuntime.jsx(ValueNodeWrapper,Object.assign({data:value,parentData:data,nodeData:childNodeData},props,{showLabel:"object"===collectionType||showArrayIndices}),key)},key)})):null,isCollapsed=!!showCollectionWrapper&&collapsed;isCollapsed||(hasBeenOpened.current=!0);const customNodeAllProps=Object.assign(Object.assign({},props),{data:data,value:data,parentData:parentData,nodeData:nodeData,setValue:val=>__awaiter(void 0,void 0,void 0,(function*(){return yield onEdit(val,path)})),handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:handleKeyPress,isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles}),CollectionContents=showCustomNodeContents?jsxRuntime.jsx(CustomNode,Object.assign({customNodeProps:customNodeProps},customNodeAllProps,{children:CollectionChildren})):CollectionChildren,KeyDisplay=isEditingKey?jsxRuntime.jsx("input",{className:"jer-input-text jer-key-edit",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}):jsxRuntime.jsx("span",{className:"jer-key-text",style:getStyles("property",nodeData),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:showKey?`${name}:`:null}),EditButtonDisplay=showEditButtons&&jsxRuntime.jsx(EditButtons,{startEdit:canEdit?()=>{hasBeenOpened.current=!0,setCurrentlyEditingElement(pathString),setCollapsed(!1)}:void 0,handleAdd:canAdd?key=>{setCollapsed(!1);const newValue=getDefaultNewValue(nodeData);"array"===collectionType?onAdd(newValue,[...path,data.length]).then((error=>{error&&showError(error)})):key in data?showError(translate("ERROR_KEY_EXISTS",nodeData)):onAdd(newValue,[...path,key]).then((error=>{error&&showError(error)}))}:void 0,handleDelete:canDelete?handleDelete:void 0,enableClipboard:enableClipboard,type:collectionType,nodeData:nodeData,translate:translate}),CollectionNodeComponent=jsxRuntime.jsxs("div",{className:"jer-component jer-collection-component",style:Object.assign({marginLeft:(0===path.length?0:indent/2)+"em"},getStyles("collection",nodeData)),children:[showCollectionWrapper?jsxRuntime.jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[jsxRuntime.jsxs("div",{className:"jer-collection-name",children:[jsxRuntime.jsx("div",{className:"jer-collapse-icon",onClick:e=>(e=>{if(e.getModifierState("Alt"))return hasBeenOpened.current=!0,void setCollapseState({open:!collapsed,path:path});currentlyEditingElement&&currentlyEditingElement.includes(pathString)||(setIsAnimating(!0),hasBeenOpened.current=!0,setCollapsed(!collapsed),setTimeout((()=>setIsAnimating(!1)),500))})(e),children:jsxRuntime.jsx(Icon,{name:"chevron",rotate:collapsed,nodeData:nodeData})}),KeyDisplay,!isEditing&&jsxRuntime.jsx("span",{className:"jer-brackets jer-bracket-open",style:getStyles("bracket",nodeData),children:brackets.open})]}),!isEditing&&showCount&&jsxRuntime.jsx("div",{className:"jer-collection-item-count"+(showCount?" jer-visible":" jer-hidden"),style:getStyles("itemCount",nodeData),children:1===size?translate("ITEM_SINGLE",Object.assign(Object.assign({},nodeData),{size:1}),1):translate("ITEMS_MULTIPLE",nodeData,size)}),jsxRuntime.jsx("div",{className:"jer-brackets"+(isCollapsed?" jer-visible":" jer-hidden"),style:getStyles("bracket",nodeData),children:brackets.close}),EditButtonDisplay]}):hideKey?jsxRuntime.jsx(jsxRuntime.Fragment,{}):jsxRuntime.jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[KeyDisplay,EditButtonDisplay]}),jsxRuntime.jsxs("div",{className:"jer-collection-inner",style:Object.assign({maxHeight:isCollapsed?0:areChildrenBeingEdited(pathString)?void 0:3*numOfLines+"em",overflowY:isCollapsed||isAnimating?"hidden":"visible",transition:`max-height ${transitionTime}`},getStyles("collectionInner",nodeData)),children:[CollectionContents,jsxRuntime.jsx("div",{className:isEditing?"jer-collection-error-row":"jer-collection-error-row-edit",children:error&&jsxRuntime.jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})}),!isEditing&&showCollectionWrapper&&jsxRuntime.jsx("div",{className:"jer-brackets jer-bracket-outside",style:getStyles("bracket",nodeData),children:brackets.close})]})]});return CustomWrapper?jsxRuntime.jsx(CustomWrapper,Object.assign({customNodeProps:wrapperProps},customNodeAllProps,{children:CollectionNodeComponent})):CollectionNodeComponent},localisedStrings={ITEM_SINGLE:"{{count}} item",ITEMS_MULTIPLE:"{{count}} items",KEY_NEW:"Enter new key",ERROR_KEY_EXISTS:"Key already exists",ERROR_INVALID_JSON:"Invalid JSON",ERROR_UPDATE:"Update unsuccessful",ERROR_DELETE:"Delete unsuccessful",ERROR_ADD:"Adding node unsuccessful",DEFAULT_STRING:"New data!",DEFAULT_NEW_KEY:"key"},getTranslateFunction=(translations,customText)=>(key,customTextData,count)=>((translations,customText,customTextData,key,count)=>{if(customText[key]){const output=customText[key](customTextData);if(null!==output)return output}const string=key in translations?translations[key]:localisedStrings[key];return void 0===count?string:null==string?void 0:string.replace("{{count}}",String(count))})(translations,customText,customTextData,key,count),Editor=({data:srcData,rootName:rootName="root",onUpdate:onUpdate=(()=>{}),onEdit:srcEdit=onUpdate,onDelete:srcDelete=onUpdate,onAdd:srcAdd=onUpdate,onChange:onChange,enableClipboard:enableClipboard=!0,theme:theme="default",icons:icons,indent:indent=3,collapse:collapse=!1,showCollectionCount:showCollectionCount=!0,restrictEdit:restrictEdit=!1,restrictDelete:restrictDelete=!1,restrictAdd:restrictAdd=!1,restrictTypeSelection:restrictTypeSelection=!1,searchFilter:searchFilterInput,searchText:searchText,searchDebounceTime:searchDebounceTime=350,keySort:keySort=!1,showArrayIndices:showArrayIndices=!0,showStringQuotes:showStringQuotes=!0,defaultValue:defaultValue=null,minWidth:minWidth=250,maxWidth:maxWidth="min(600px, 90vw)",rootFontSize:rootFontSize,stringTruncate:stringTruncate=250,translations:translations={},className:className,id:id,customText:customText={},customNodeDefinitions:customNodeDefinitions=[]})=>{const{getStyles:getStyles,setTheme:setTheme,setIcons:setIcons}=useTheme(),{setCollapseState:setCollapseState}=useTreeState(),collapseFilter=react.useCallback(getFilterFunction(collapse),[collapse]),translate=react.useCallback(getTranslateFunction(translations,customText),[translations,customText]),[debouncedSearchText,setDebouncedSearchText]=react.useState(searchText),[data,setData]=react.useState(srcData);react.useEffect((()=>{theme&&setTheme(theme),icons&&setIcons(icons)}),[theme,icons]),react.useEffect((()=>{setCollapseState(null),setData(srcData)}),[srcData]),react.useEffect((()=>{const debounce=setTimeout((()=>setDebouncedSearchText(searchText)),searchDebounceTime);return()=>clearTimeout(debounce)}),[searchText,searchDebounceTime]);const nodeData={key:rootName,path:[],level:0,index:0,value:data,size:Object.keys(data).length,parentData:null,fullData:data},restrictEditFilter=getFilterFunction(restrictEdit),restrictDeleteFilter=getFilterFunction(restrictDelete),restrictAddFilter=getFilterFunction(restrictAdd),searchFilter=getSearchFilter(searchFilterInput),otherProps={name:rootName,nodeData:nodeData,onEdit:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"update");if(currentValue===newValue)return;setData(newData);const result=yield srcEdit({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return void 0!==result?(setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result):void 0})),onDelete:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"delete");setData(newData);const result=yield srcDelete({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onAdd:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"add");setData(newData);const result=yield srcAdd({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onChange:onChange,showCollectionCount:showCollectionCount,collapseFilter:collapseFilter,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:debouncedSearchText,enableClipboard:enableClipboard,keySort:keySort,showArrayIndices:showArrayIndices,showStringQuotes:showStringQuotes,indent:indent,defaultValue:defaultValue,stringTruncate:stringTruncate,translate:translate,customNodeDefinitions:customNodeDefinitions,parentData:null},mainContainerStyles=Object.assign(Object.assign({},getStyles("container",nodeData)),{minWidth:minWidth,maxWidth:maxWidth});return mainContainerStyles.fontSize=null!=rootFontSize?rootFontSize:mainContainerStyles.fontSize,jsxRuntime.jsx("div",{id:id,className:"jer-editor-container "+className,style:mainContainerStyles,children:isCollection(data)?jsxRuntime.jsx(CollectionNode,Object.assign({data:data},otherProps)):jsxRuntime.jsx(ValueNodeWrapper,Object.assign({data:data,showLabel:!0},otherProps))})},updateDataObject=(data,path,newValue,action)=>{if(0===path.length)return{currentData:data,newData:newValue,currentValue:data,newValue:newValue};const currentValue="add"!==action?extract(data,path):void 0;return{currentData:data,newData:assign(clone(data),path,newValue,{remove:"delete"===action}),currentValue:currentValue,newValue:"delete"!==action?newValue:void 0}},getFilterFunction=propValue=>"boolean"==typeof propValue?()=>propValue:"number"==typeof propValue?({level:level})=>level>=propValue:propValue,getSearchFilter=searchFilterInput=>{if(void 0!==searchFilterInput)return"value"===searchFilterInput?matchNode:"key"===searchFilterInput?matchNodeKey:"all"===searchFilterInput?(inputData,searchText)=>matchNode(inputData,searchText)||matchNodeKey(inputData,searchText):searchFilterInput},LinkCustomComponent=({value:value,setIsEditing:setIsEditing,getStyles:getStyles,customNodeProps:customNodeProps,nodeData:nodeData})=>{var _a,_b;const stringTruncateLength=null!==(_a=null==customNodeProps?void 0:customNodeProps.stringTruncate)&&void 0!==_a?_a:100,styles=getStyles("string",nodeData);return jsxRuntime.jsx("div",{onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string jer-hyperlink",style:styles,children:jsxRuntime.jsxs("a",{href:value,target:"_blank",rel:"noreferrer",style:{color:null!==(_b=styles.color)&&void 0!==_b?_b:void 0},children:['"',truncate(value,stringTruncateLength),'"']})})},LinkCustomNodeDefinition={condition:({value:value})=>"string"==typeof value&&/^https?:\/\/.+\..+$/.test(value),element:LinkCustomComponent,showOnView:!0,showOnEdit:!1};exports.assign=assign,exports.extract=extract,exports.IconAdd=IconAdd,exports.IconCancel=IconCancel,exports.IconChevron=IconChevron,exports.IconCopy=IconCopy,exports.IconDelete=IconDelete,exports.IconEdit=IconEdit,exports.IconOk=IconOk,exports.JsonEditor=props=>jsxRuntime.jsx(ThemeProvider,{children:jsxRuntime.jsx(TreeStateProvider,{children:jsxRuntime.jsx(Editor,Object.assign({},props))})}),exports.LinkCustomComponent=LinkCustomComponent,exports.LinkCustomNodeDefinition=LinkCustomNodeDefinition,exports.isCollection=isCollection,exports.matchNode=matchNode,exports.matchNodeKey=matchNodeKey,exports.themes=themes,exports.truncate=truncate;

1

build/index.d.ts

@@ -50,2 +50,3 @@ /// <reference types="react" />

maxWidth?: string | number;
rootFontSize?: string | number;
stringTruncate?: number;

@@ -52,0 +53,0 @@ translations?: Partial<LocalisedStrings>;

2

build/index.esm.js

@@ -1,1 +0,1 @@

import{jsxs,jsx,Fragment}from"react/jsx-runtime";import{createContext,useState,useContext,useEffect,useCallback,useMemo,useRef}from"react";import assign from"object-property-assigner";export{default as assign}from"object-property-assigner";import extract from"object-property-extractor";export{default as extract}from"object-property-extractor";import JSON5 from"json5";import clone from"just-clone";function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){var value;result.done?resolve(result.value):(value=result.value,value instanceof P?value:new P((function(resolve){resolve(value)}))).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;var e=[],t=[];!function(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}(":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.5s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: inherit;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n font-size: 1em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 1.1em;\n line-height: 1;\n padding: 1em;\n padding-left: 2em;\n /* margin-top: 1em; */\n /* margin-bottom: 1em; */\n border-radius: 0.5em;\n text-align: left;\n}\n\n.jer-editor-container textarea {\n /* width: 90%; */\n color: var(--jer-input-color);\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container textarea:focus {\n border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container input:focus {\n border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n display: flex;\n min-height: 1.7em;\n gap: 0.3em;\n align-items: center;\n}\n\n.jer-collection-header-row {\n display: flex;\n flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-bracket-outside {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collapse-icon {\n position: absolute;\n left: -1.2em;\n top: 0.35em;\n}\n\n.jer-collection-inner {\n position: relative;\n}\n\n.jer-collection-text-edit {\n display: flex;\n flex-direction: column;\n gap: 0.3em;\n align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.jer-hyperlink {\n text-decoration: underline;\n}\n\n.jer-input-text {\n resize: none;\n margin: 0;\n height: 1.4em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-top: 0.25em;\n padding-bottom: 0.2em;\n min-width: 6em;\n overflow: hidden;\n /* max-height: 20em; */\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n height: 1.6em;\n}\n\n.jer-input-number {\n min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n position: relative;\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n content: '';\n display: block;\n position: absolute;\n border-radius: 50%;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: all 0.5s;\n box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n position: absolute;\n border-radius: 4em;\n left: 0;\n top: 0;\n opacity: 1;\n transition: 0s;\n}\n\n.jer-copy-pulse:active {\n top: 0.07em;\n}\n\n.jer-rotate-90 {\n transform: rotate(-90deg);\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n /* font-size: '2em'; */\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n",{});const AutogrowTextArea=({className:className,name:name,value:value,setValue:setValue,handleKeyPress:handleKeyPress,styles:styles})=>{const dummyValue="\n"===value.slice(-1)?value+".":value;return jsxs("div",{style:{display:"grid"},children:[jsx("textarea",{id:`${name}_textarea`,style:Object.assign({height:"auto",gridArea:"1 / 1 / 2 / 2",overflowY:"auto",whiteSpace:"pre-wrap"},styles),rows:1,className:className,name:`${name}_textarea`,value:value,onChange:e=>setValue(e.target.value),autoFocus:!0,onFocus:e=>{value.length<40&&e.target.select()},onKeyDown:handleKeyPress}),jsx("span",{className:className,style:Object.assign({visibility:"hidden",height:"auto",gridArea:"1 / 1 / 2 / 2",color:"red",opacity:.9,whiteSpace:"pre-wrap",overflowY:"auto",border:"1px solid transparent"},styles),children:dummyValue})]})},themes={default:{displayName:"Default",fragments:{edit:"rgb(42, 161, 152)"},styles:{container:{backgroundColor:"#f6f6f6",fontFamily:"monospace"},collection:{},collectionInner:{},collectionElement:{},property:"#292929",bracket:{color:"rgb(0, 43, 54)",fontWeight:"bold"},itemCount:{color:"rgba(0, 0, 0, 0.3)",fontStyle:"italic"},string:"rgb(203, 75, 22)",number:"rgb(38, 139, 210)",boolean:"green",null:{color:"rgb(220, 50, 47)",fontVariant:"small-caps",fontWeight:"bold"},input:["#292929",{fontSize:"90%"}],inputHighlight:"#b3d8ff",error:{fontSize:"0.8em",color:"red",fontWeight:"bold"},iconCollection:"rgb(0, 43, 54)",iconEdit:"edit",iconDelete:"rgb(203, 75, 22)",iconAdd:"edit",iconCopy:"rgb(38, 139, 210)",iconOk:"green",iconCancel:"rgb(203, 75, 22)"}},githubDark:{displayName:"Github Dark",styles:{container:{backgroundColor:"#0d1117",color:"white"},property:"#E6EDF3",bracket:"#56d364",itemCount:"#8B949E",string:"#A5D6FF",number:"#D2A8FF",boolean:{color:"#FF7B72",fontSize:"90%",fontWeight:"bold"},null:"green",iconCollection:"#D2A8FF",iconEdit:"#D2A8FF",iconDelete:"rgb(203, 75, 22)",iconAdd:"rgb(203, 75, 22)",iconCopy:"#A5D6FF",iconOk:"#56d364",iconCancel:"rgb(203, 75, 22)"}},githubLight:{displayName:"Github Light",styles:{container:"white",property:"#1F2328",bracket:"#00802e",itemCount:"#8B949E",string:"#0A3069",number:"#953800",boolean:{color:"#CF222E",fontSize:"90%",fontWeight:"bold"},null:"#FF7B72",iconCollection:"#8250DF",iconEdit:"#8250DF",iconDelete:"rgb(203, 75, 22)",iconAdd:"#8250DF",iconCopy:"#57606A"}},monoDark:{displayName:"Black & White",fragments:{lightText:{color:"white"},midGrey:"#5c5c5c"},styles:{container:["lightText",{backgroundColor:"black"}],property:"lightText",bracket:"midGrey",itemCount:"#4a4a4a",string:"#a8a8a8",number:"#666666",boolean:{color:"#848484",fontStyle:"italic"},null:"#333333",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},monoLight:{fragments:{midGrey:"#a3a3a3"},displayName:"White & Black",styles:{container:"white",property:"black",bracket:"midGrey",itemCount:"#b5b5b5",string:"#575757",number:"#999999",boolean:{color:"#7b7b7b",fontStyle:"italic"},null:"#cccccc",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},candyWrapper:{displayName:"Candy Wrapper",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},darkBlue:{color:"#2B2D42"}},styles:{container:"minty",property:"pop",bracket:"dark",itemCount:"pale",string:"mid",number:["darkBlue",{fontSize:"85%"}],boolean:["mid",{fontStyle:"italic",fontWeight:"bold",fontSize:"80%"}],null:["#cccccc",{fontWeight:"bold"}],input:{border:"1px solid rgb(115, 194, 198)"},iconCollection:"#1D3557",iconEdit:"#457B9D",iconDelete:"#E63946",iconAdd:"#2B2D42",iconCopy:"#1D3557",iconCancel:"#E63946"}},psychedelic:{displayName:"Psychedelic",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},fluroYellow:"rgb(242, 228, 21)",fluroGreen:"rgb(68, 255, 62)",hotPink:"#f7379a"},styles:{container:{backgroundColor:"unset",background:"linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)",color:"black"},property:"black",bracket:"fluroYellow",itemCount:["pale",{opacity:.7}],string:"white",number:["#33d9ff",{fontSize:"90%",fontWeight:"bold"}],boolean:["fluroGreen",{fontWeight:"bold",fontSize:"80%"}],null:["black",{fontWeight:"bold",opacity:.3,backgroundColor:"rgb(255, 255, 255, 0.5)",padding:"0 0.4em",borderRadius:"0.4em"}],iconCollection:"fluroYellow",iconEdit:["black"],iconDelete:["white",{opacity:.5}],iconAdd:["white",{opacity:.5}],iconCopy:"rgb(32, 84, 242)",iconOk:"fluroGreen",iconCancel:"hotPink"}}},emptyStyleObject={container:{},collection:{},collectionInner:{},collectionElement:{},property:{},bracket:{},itemCount:{},string:{},number:{},boolean:{},null:{},input:{},inputHighlight:{},error:{},iconCollection:{},iconEdit:{},iconDelete:{},iconAdd:{},iconCopy:{},iconOk:{},iconCancel:{}},defaultTheme=themes.default,ThemeProviderContext=createContext({getStyles:()=>({}),setTheme:_=>{},icons:{},setIcons:()=>{}}),ThemeProvider=({children:children})=>{const[styles,setStyles]=useState(emptyStyleObject),[icons,setIcons]=useState({});return jsx(ThemeProviderContext.Provider,{value:{getStyles:(element,nodeData)=>"function"==typeof styles[element]?styles[element](nodeData):styles[element],setTheme:theme=>{const styles=compileStyles(theme);setStyles(styles)},icons:icons,setIcons:setIcons},children:children})},useTheme=()=>useContext(ThemeProviderContext),compileStyles=themeInput=>{var _a,_b,_c,_d;const collectedFunctions={},stylesArray=(Array.isArray(themeInput)?themeInput:[themeInput]).map((theme=>"default"===themeInput?{}:"string"==typeof theme?buildStyleObject(themes[theme],collectedFunctions):isStyleObject(theme)?buildStyleObject({fragments:{},styles:theme},collectedFunctions):buildStyleObject(theme,collectedFunctions))),mergedStyleObject=buildStyleObject(defaultTheme,{});Object.keys(mergedStyleObject).forEach((k=>{const key=k;stylesArray.forEach((styleObj=>{styleObj[key]&&(mergedStyleObject[key]=Object.assign(Object.assign({},mergedStyleObject[key]),styleObj[key]))}))}));const finalStyles=Object.assign({},mergedStyleObject);return Object.entries(collectedFunctions).forEach((([key,func])=>{const element=key;finalStyles[element]=nodeData=>{const funcResult=func(nodeData)||{};return Object.assign(Object.assign({},mergedStyleObject[element]),funcResult)}})),"function"!=typeof(null==finalStyles?void 0:finalStyles.inputHighlight)&&(null===(_a=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_a?void 0:_a.backgroundColor)&&document.documentElement.style.setProperty("--jer-highlight-color",null===(_b=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_b?void 0:_b.backgroundColor),"function"!=typeof(null==finalStyles?void 0:finalStyles.iconCopy)&&(null===(_c=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_c?void 0:_c.color)&&document.documentElement.style.setProperty("--jer-icon-copy-color",null===(_d=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_d?void 0:_d.color),finalStyles},buildStyleObject=(theme,collectedFunctions)=>{const{fragments:fragments,styles:styles}=theme,styleObject={};return Object.entries(styles).forEach((([key,value])=>{const cssStyles=(Array.isArray(value)?value:[value]).reduce(((acc,curr)=>{var _a;if("function"==typeof curr)return collectedFunctions[key]=curr,Object.assign({},acc);if("string"==typeof curr){const style=null!==(_a=null==fragments?void 0:fragments[curr])&&void 0!==_a?_a:curr;return"string"==typeof style?Object.assign(Object.assign({},acc),{[defaultStyleProperties[key]]:style}):Object.assign(Object.assign({},acc),style)}return Object.assign(Object.assign({},acc),curr)}),{});styleObject[key]=cssStyles})),styleObject},isStyleObject=overrideObject=>!("styles"in overrideObject),defaultStyleProperties={container:"backgroundColor",collection:"backgroundColor",collectionInner:"backgroundColor",collectionElement:"backgroundColor",property:"color",bracket:"color",itemCount:"color",string:"color",number:"color",boolean:"color",null:"color",input:"color",inputHighlight:"backgroundColor",error:"color",iconCollection:"color",iconEdit:"color",iconDelete:"color",iconAdd:"color",iconCopy:"color",iconOk:"color",iconCancel:"color"},truncate=(string,length=200)=>string.length<length?string:`${string.slice(0,length-2).trim()}...`,toPathString=path=>path.join(".").replace(/"/g,"_"),StringValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme(),pathString=toPathString(path),quoteChar=showStringQuotes?'"':"";return isEditing?jsx(AutogrowTextArea,{className:"jer-input-text",name:pathString,value:value,setValue:setValue,isEditing:isEditing,handleKeyPress:e=>{"Enter"!==e.key||e.shiftKey?"Escape"===e.key&&handleCancel():handleEdit()},styles:getStyles("input",nodeData)}):jsxs("div",{id:`${pathString}_display`,onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string",style:getStyles("string",nodeData),children:[quoteChar,truncate(value,stringTruncate),quoteChar]})},NumberValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();return isEditing?jsx("input",{className:"jer-input-number",type:"text",name:toPathString(path),value:value,onChange:e=>setValue(e.target.value.replace(/[^0-9.-]/g,"")),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{switch(e.key){case"Enter":handleEdit();break;case"Escape":handleCancel();break;case"ArrowUp":e.preventDefault(),setValue(Number(value)+1);break;case"ArrowDown":e.preventDefault(),setValue(Number(value)-1)}},style:{width:String(value).length/1.5+2+"em"}}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-number",style:getStyles("number",nodeData),children:value})},BooleanValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing,handleEdit]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsx("input",{className:"jer-input-boolean",type:"checkbox",name:toPathString(path),checked:value,onChange:()=>setValue(!value)}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-boolean",style:getStyles("boolean",nodeData),children:String(value)})},NullValue=({value:value,isEditing:isEditing,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("div",isEditing?{className:"jer-input-null",children:"null"}:{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-null",style:getStyles("null",nodeData),children:String(value)})},ObjectValue=({value:value,translate:translate,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-object",children:`{${translate("DEFAULT_NEW_KEY",nodeData)}: "${String(value)}" }`})},ArrayValue=({value:value,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-array",children:`[${null===value?"":String(value)}]`})},InvalidValue=({value:value})=>{let message="Error!";switch(typeof value){case"string":"**INVALID_FUNCTION**"===value&&(message="Function");break;case"undefined":message="Undefined";break;case"symbol":message="Symbol"}return jsx("span",{className:"jer-value-invalid",children:message})},IconAdd=({size:size,style:style,className:className})=>jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z"}),jsx("path",{d:"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"})]}),IconEdit=({size:size,style:style,className:className})=>jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,transform:"translate(0, 0.5)",children:[jsx("path",{d:"M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"}),jsx("path",{d:"M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"})]}),IconDelete=({size:size,style:style,className:className})=>jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z"})}),IconCopy=({size:size,style:style,className:className})=>jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z"}),jsx("path",{d:"M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11"}),jsx("path",{d:"M15 10l-4 4 4 4"})]}),IconOk=({size:size,style:style,className:className})=>jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M22 11.08V12a10 10 0 11-5.93-9.14"}),jsx("path",{d:"M22 4L12 14.01l-3-3"})]}),IconCancel=({size:size,style:style,className:className})=>jsx("svg",{baseProfile:"tiny",viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z"})}),IconChevron=({size:size,style:style,className:className})=>jsx("svg",{viewBox:"0 0 512 512",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})}),Icon=({name:name,nodeData:nodeData,rotate:rotate})=>{var _a,_b,_c,_d,_e,_f,_g;const{getStyles:getStyles,icons:icons}=useTheme(),commonProps={size:"1.4em",className:"jer-icon"};switch(name){case"add":return null!==(_a=null==icons?void 0:icons.add)&&void 0!==_a?_a:jsx(IconAdd,Object.assign({},commonProps,{style:getStyles("iconAdd",nodeData)}));case"edit":return null!==(_b=null==icons?void 0:icons.edit)&&void 0!==_b?_b:jsx(IconEdit,Object.assign({},commonProps,{style:getStyles("iconEdit",nodeData)}));case"delete":return null!==(_c=null==icons?void 0:icons.delete)&&void 0!==_c?_c:jsx(IconDelete,Object.assign({},commonProps,{style:getStyles("iconDelete",nodeData),size:"1.45em"}));case"copy":return null!==(_d=null==icons?void 0:icons.copy)&&void 0!==_d?_d:jsx(IconCopy,Object.assign({},commonProps,{style:getStyles("iconCopy",nodeData),size:"1.2em"}));case"ok":return null!==(_e=null==icons?void 0:icons.ok)&&void 0!==_e?_e:jsx(IconOk,Object.assign({},commonProps,{style:Object.assign({fontSize:"90%"},getStyles("iconOk",nodeData))}));case"cancel":return null!==(_f=null==icons?void 0:icons.cancel)&&void 0!==_f?_f:jsx(IconCancel,Object.assign({},commonProps,{style:Object.assign({fontSize:"130%"},getStyles("iconCancel",nodeData))}));case"chevron":return null!==(_g=null==icons?void 0:icons.chevron)&&void 0!==_g?_g:jsx(IconChevron,{className:"jer-accordion-icon"+(rotate?" jer-rotate-90":""),size:"1em",style:getStyles("iconCollection",nodeData)});default:return jsx(Fragment,{})}},EditButtons=({startEdit:startEdit,handleDelete:handleDelete,handleAdd:handleAdd,enableClipboard:enableClipboard,type:type,nodeData:nodeData,translate:translate})=>{const{getStyles:getStyles}=useTheme(),NEW_KEY_PROMPT=translate("KEY_NEW",nodeData),[isAdding,setIsAdding]=useState(!1),[newKey,setNewKey]=useState(NEW_KEY_PROMPT),{key:key,path:path,value:data}=nodeData;useEffect((()=>{isAdding||setNewKey(NEW_KEY_PROMPT)}),[isAdding]);return jsxs("div",{className:"jer-edit-buttons",style:isAdding?{opacity:1}:void 0,children:[enableClipboard&&jsx("div",{onClick:e=>{let value,copyType="value",stringValue="";if(enableClipboard){if(!0===(e.ctrlKey||e.metaKey))value=stringifyPath(path),stringValue=value,copyType="path";else value=data,stringValue=type?JSON.stringify(data,null,2):String(value);navigator.clipboard.writeText(stringValue)}"function"==typeof enableClipboard&&enableClipboard({value:value,stringValue:stringValue,path:path,key:key,type:copyType})},className:"jer-copy-pulse",children:jsx(Icon,{name:"copy",nodeData:nodeData})}),startEdit&&jsx("div",{onClick:startEdit,children:jsx(Icon,{name:"edit",nodeData:nodeData})}),handleDelete&&jsx("div",{onClick:handleDelete,children:jsx(Icon,{name:"delete",nodeData:nodeData})}),handleAdd&&jsx("div",{onClick:()=>{"object"===type?setIsAdding(!0):handleAdd("")},children:jsx(Icon,{name:"add",nodeData:nodeData})}),isAdding&&handleAdd&&"object"===type&&jsxs(Fragment,{children:[jsx("input",{className:"jer-input-new-key",type:"text",name:"new-object-key",value:newKey,onChange:e=>setNewKey(e.target.value),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&handleAdd?(setIsAdding(!1),handleAdd(newKey)):"Escape"===e.key&&setIsAdding(!1)},style:getStyles("input",nodeData)}),jsx(InputButtons,{onOk:()=>{newKey&&(setIsAdding(!1),handleAdd(newKey))},onCancel:()=>{setIsAdding(!1)},nodeData:nodeData})]})]})},InputButtons=({onOk:onOk,onCancel:onCancel,nodeData:nodeData})=>jsxs("div",{className:"jer-confirm-buttons",children:[jsx("div",{onClick:onOk,children:jsx(Icon,{name:"ok",nodeData:nodeData})}),jsx("div",{onClick:onCancel,children:jsx(Icon,{name:"cancel",nodeData:nodeData})})]}),stringifyPath=path=>path.reduce(((str,part)=>"number"==typeof part?`${str}[${part}]`:""===str?part:`${str}.${part}`),""),DataTypes=["string","number","boolean","null","object","array"],getCustomNode=(customNodeDefinitions=[],nodeData)=>{const matchingDefinitions=customNodeDefinitions.filter((({condition:condition})=>condition(nodeData)));if(0===matchingDefinitions.length)return{};const _a=matchingDefinitions[0],{element:element,wrapperElement:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey=!1,showEditTools:showEditTools=!0,showOnEdit:showOnEdit=!1,showOnView:showOnView=!0,showCollectionWrapper:showCollectionWrapper=!0}=_a,rest=__rest(_a,["element","wrapperElement","customNodeProps","wrapperProps","hideKey","showEditTools","showOnEdit","showOnView","showCollectionWrapper"]);return Object.assign({CustomNode:element,CustomWrapper:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey,showEditTools:showEditTools,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper},rest)},isCollection=value=>null!==value&&"object"==typeof value,filterNode=(type,nodeData,searchFilter,searchText="")=>{if(!searchFilter&&!searchText)return!0;switch(type){case"collection":if(searchFilter){if(searchFilter(nodeData,searchText))return!0;if(!filterCollection(searchText,nodeData,searchFilter))return!1}if(!searchFilter&&searchText&&!filterCollection(searchText,nodeData))return!1;break;case"value":if(searchFilter&&!searchFilter(nodeData,searchText))return!1;if(!searchFilter&&searchText&&!matchNode(nodeData,searchText))return!1}return!0},filterCollection=(searchText="",nodeData,matcher=matchNode)=>{const collection=nodeData.value;return Object.entries(collection).some((([key,value])=>{const childPath=[...nodeData.path,key],childNodeData=Object.assign(Object.assign({},nodeData),{key:key,path:childPath,level:nodeData.level+1,value:value,size:childPath.length,parentData:collection});return isCollection(value)?filterCollection(searchText,childNodeData,matcher):matcher(childNodeData,searchText)}))},matchNode=(nodeData,searchText="")=>{const{value:value}=nodeData;if(null===value&&"null".includes(searchText.toLowerCase()))return!0;switch(typeof value){case"string":return value.toLowerCase().includes(searchText.toLowerCase());case"number":return!!String(value).includes(searchText);case"boolean":return value?"true".includes(searchText.toLowerCase())||"1"===searchText:"false".includes(searchText.toLowerCase())||"0"===searchText;default:return!1}},matchNodeKey=({key:key,path:path},searchText="")=>!!matchNode({value:key},searchText)||!!path.some((field=>matchNode({value:field},searchText))),TreeStateProviderContext=createContext({collapseState:null,setCollapseState:()=>{},doesPathMatch:()=>!1,currentlyEditingElement:null,setCurrentlyEditingElement:()=>{},areChildrenBeingEdited:()=>!1}),TreeStateProvider=({children:children})=>{const[collapseState,setCollapseState]=useState(null),[currentlyEditingElement,setCurrentlyEditingElement]=useState(null);return jsx(TreeStateProviderContext.Provider,{value:{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:path=>{if(null===collapseState)return!1;for(const[index,value]of collapseState.path.entries())if(value!==path[index])return!1;return!0},currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:pathString=>null!==currentlyEditingElement&&currentlyEditingElement.includes(pathString)},children:children})},useTreeState=()=>useContext(TreeStateProviderContext),ValueNodeWrapper=props=>{const{data:data,parentData:parentData,nodeData:nodeData,onEdit:onEdit,onDelete:onDelete,onChange:onChange,enableClipboard:enableClipboard,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:searchText,showLabel:showLabel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,indent:indent,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,{getStyles:getStyles}=useTheme(),{currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement}=useTreeState(),[value,setValue]=useState("function"==typeof data?"**INVALID_FUNCTION**":data),[error,setError]=useState(null),{key:name,path:path}=nodeData,customNodeData=getCustomNode(customNodeDefinitions,nodeData),[dataType,setDataType]=useState(getDataType(data,customNodeData)),pathString=toPathString(path),updateValue=useCallback((newValue=>{if(!onChange)return void setValue(newValue);const modifiedValue=onChange({currentData:nodeData.fullData,newValue:newValue,currentValue:value,name:name,path:path});setValue(modifiedValue)}),[onChange]);useEffect((()=>{setValue("function"==typeof data?"**INVALID_FUNCTION**":data),setDataType(getDataType(data,customNodeData))}),[data,error]);const canEdit=useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView}=customNodeData,allDataTypes=[...DataTypes,...customNodeDefinitions.filter((({showInTypesSelector:showInTypesSelector=!1,name:name})=>showInTypesSelector&&!!name)).map((({name:name})=>name))],allowedDataTypes=useMemo((()=>{if("boolean"==typeof restrictTypeSelection)return restrictTypeSelection?[]:allDataTypes;if(Array.isArray(restrictTypeSelection))return restrictTypeSelection;const result=restrictTypeSelection(nodeData);return"boolean"==typeof result?result?[]:allDataTypes:result}),[nodeData,restrictTypeSelection]);if(!filterNode("value",nodeData,searchFilter,searchText))return null;const logError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{let newValue;switch(setCurrentlyEditingElement(null),dataType){case"object":newValue={[translate("DEFAULT_NEW_KEY",nodeData)]:value};break;case"array":newValue=null!=value?value:[];break;case"number":{const n=Number(value);newValue=isNaN(n)?0:n;break}default:newValue=value}onEdit(newValue,path).then((error=>{error&&logError(error)}))},handleCancel=()=>{setCurrentlyEditingElement(null),setValue(data),setDataType(getDataType(data,customNodeData))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,canEditKey=!("number"==typeof path.slice(-1)[0])&&canEdit&&canDelete,showError=!isEditing&&error,showTypeSelector=isEditing&&allowedDataTypes.length>0,showEditButtons="invalid"!==dataType&&!error&&showEditTools,showKeyEdit=showLabel&&isEditingKey,showKey=showLabel&&!isEditingKey&&!hideKey,inputProps={value:value,parentData:parentData,setValue:updateValue,isEditing:isEditing,setIsEditing:canEdit?()=>setCurrentlyEditingElement(pathString):()=>{},handleEdit:handleEdit,handleCancel:handleCancel,path:path,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData,translate:translate},ValueComponent=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView)?jsx(CustomNode,Object.assign({},props,{value:value,customNodeProps:customNodeProps,setValue:updateValue,handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:e=>{"Enter"===e.key?handleEdit():"Escape"===e.key&&handleCancel()},isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles})):getInputComponent(getDataType(data),inputProps);return jsx("div",{className:"jer-component jer-value-component",style:{marginLeft:indent/2+"em"},children:jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[showKey&&jsxs("span",{className:"jer-object-key",style:Object.assign(Object.assign({},getStyles("property",nodeData)),{minWidth:`${Math.min(String(name).length+1,5)}ch`,flexShrink:name.length>10?1:0}),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:[name,":"," "]}),showKeyEdit&&jsx("input",{className:"jer-object-key",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),jsxs("div",{className:"jer-value-and-buttons",children:[jsx("div",{className:"jer-input-component",children:ValueComponent}),isEditing?jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData}):showEditButtons&&jsx(EditButtons,{startEdit:canEdit?()=>setCurrentlyEditingElement(pathString):void 0,handleDelete:canDelete?()=>{onDelete(value,path).then((error=>{error&&logError(error)}))}:void 0,enableClipboard:enableClipboard,translate:translate,nodeData:nodeData}),showTypeSelector&&jsxs("div",{className:"jer-select",children:[jsx("select",{name:`${name}-type-select`,className:"jer-type-select",onChange:e=>(type=>{const customNode=customNodeDefinitions.find((customNode=>customNode.name===type));if(customNode)onEdit(customNode.defaultValue,path),setDataType(type);else{const newValue=convertValue(value,type,translate("DEFAULT_NEW_KEY",nodeData),(null==customNodeData?void 0:customNodeData.CustomNode)?translate("DEFAULT_STRING",nodeData):void 0);updateValue(newValue),onEdit(newValue,path),setDataType(type)}})(e.target.value),value:dataType,children:allowedDataTypes.map((type=>jsx("option",{value:type,children:type},type)))}),jsx("span",{className:"focus"})]}),showError&&jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})]})]})})},getDataType=(value,customNodeData)=>(null==customNodeData?void 0:customNodeData.CustomNode)&&(null==customNodeData?void 0:customNodeData.name)&&customNodeData.showInTypesSelector?customNodeData.name:"string"==typeof value?"string":"number"==typeof value?"number":"boolean"==typeof value?"boolean":null===value?"null":"invalid",getInputComponent=(dataType,inputProps)=>{const value=inputProps.value;switch(dataType){case"string":return jsx(StringValue,Object.assign({},inputProps,{value:value}));case"number":return jsx(NumberValue,Object.assign({},inputProps,{value:value}));case"boolean":return jsx(BooleanValue,Object.assign({},inputProps,{value:value}));case"null":return jsx(NullValue,Object.assign({},inputProps));case"object":return jsx(ObjectValue,Object.assign({},inputProps,{value:value}));case"array":return jsx(ArrayValue,Object.assign({},inputProps));default:return jsx(InvalidValue,Object.assign({},inputProps))}},convertValue=(value,type,defaultNewKey,defaultString)=>{switch(type){case"string":return null!=defaultString?defaultString:String(value);case"number":{const n=Number(value);return isNaN(n)?0:n}case"boolean":return!!value;case"null":return null;case"object":return{[defaultNewKey]:value};case"array":return[value];default:return String(value)}},CollectionNode=_a=>{var{data:data,nodeData:incomingNodeData,parentData:parentData,showCollectionCount:showCollectionCount}=_a,props=__rest(_a,["data","nodeData","parentData","showCollectionCount"]);const{getStyles:getStyles}=useTheme(),{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:doesPathMatch,currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:areChildrenBeingEdited}=useTreeState(),{onEdit:onEdit,onAdd:onAdd,onDelete:onDelete,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,collapseFilter:collapseFilter,enableClipboard:enableClipboard,searchFilter:searchFilter,searchText:searchText,indent:indent,keySort:keySort,showArrayIndices:showArrayIndices,defaultValue:defaultValue,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,[stringifiedValue,setStringifiedValue]=useState(JSON.stringify(data,null,2)),[error,setError]=useState(null),startCollapsed=collapseFilter(incomingNodeData),[collapsed,setCollapsed]=useState(startCollapsed),nodeData=Object.assign(Object.assign({},incomingNodeData),{collapsed:collapsed}),{path:path,key:name,size:size}=nodeData,pathString=toPathString(path),hasBeenOpened=useRef(!startCollapsed),[isAnimating,setIsAnimating]=useState(!1);useEffect((()=>{setStringifiedValue(JSON.stringify(data,null,2))}),[data]),useEffect((()=>{const isCollapsed=collapseFilter(nodeData);hasBeenOpened.current=!isCollapsed,setCollapsed(isCollapsed)}),[collapseFilter]),useEffect((()=>{null!==collapseState&&doesPathMatch(path)&&(hasBeenOpened.current=!0,setCollapsed(collapseState.open))}),[collapseState]);const canEdit=useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),canAdd=useMemo((()=>!restrictAddFilter(nodeData)),[nodeData]),canEditKey=null!==parentData&&canEdit&&canAdd&&canDelete,getDefaultNewValue=useMemo((()=>nodeData=>"function"!=typeof defaultValue?defaultValue:defaultValue(nodeData)),[defaultValue]),{CustomNode:CustomNode,customNodeProps:customNodeProps,CustomWrapper:CustomWrapper,wrapperProps:wrapperProps={},hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper=!0}=useMemo((()=>getCustomNode(customNodeDefinitions,nodeData)),[]);if(!filterNode("collection",nodeData,searchFilter,searchText)&&nodeData.level>0)return null;const collectionType=Array.isArray(data)?"array":"object",brackets="array"===collectionType?{open:"[",close:"]"}:{open:"{",close:"}"},transitionTime=getComputedStyle(document.documentElement).getPropertyValue("--jer-expand-transition-time"),handleKeyPress=e=>{"Enter"===e.key&&(e.metaKey||e.shiftKey||e.ctrlKey)?handleEdit():"Escape"===e.key&&handleCancel()},showError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{try{const value=JSON5.parse(stringifiedValue);if(setCurrentlyEditingElement(null),setError(null),JSON.stringify(value)===JSON.stringify(data))return;onEdit(value,path).then((error=>{error&&showError(error)}))}catch(_a){setError(translate("ERROR_INVALID_JSON",nodeData)),setTimeout((()=>setError(null)),2500),console.log("Invalid JSON")}},handleDelete=path.length>0?()=>{onDelete(data,path).then((result=>{result&&showError(result)}))}:void 0,handleCancel=()=>{setCurrentlyEditingElement(null),setError(null),setStringifiedValue(JSON.stringify(data,null,2))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,isArray="number"==typeof path.slice(-1)[0],showCount="when-closed"===showCollectionCount?collapsed:showCollectionCount,showEditButtons=!isEditing&&showEditTools,showKey=(showArrayIndices||!isArray)&&!hideKey&&""!==name&&void 0!==name,showCustomNodeContents=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView),sortKeys=keySort&&"object"===collectionType,keyValueArray=Object.entries(data).map((([key,value])=>["array"===collectionType?Number(key):key,value]));sortKeys&&keyValueArray.sort("function"==typeof keySort?(a,b)=>keySort(a[0],b[0]):void 0);const numOfLines=JSON.stringify(data,null,2).replace(/\\n/g,"\n").split("\n").length,CollectionChildren=hasBeenOpened.current?isEditing?jsx("div",{className:"jer-collection-text-edit",children:jsxs("div",{children:[jsx(AutogrowTextArea,{className:"jer-collection-text-area",name:pathString,value:stringifiedValue,setValue:setStringifiedValue,isEditing:isEditing,handleKeyPress:handleKeyPress,styles:getStyles("input",nodeData)}),jsx("div",{className:"jer-collection-input-button-row",children:jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData})})]})}):keyValueArray.map((([key,value],index)=>{const childNodeData={key:key,value:value,path:[...path,key],level:path.length+1,index:index,size:isCollection(value)?Object.keys(value).length:1,parentData:data,fullData:nodeData.fullData};return jsx("div",{className:"jer-collection-element",style:getStyles("collectionElement",childNodeData),children:isCollection(value)?jsx(CollectionNode,Object.assign({data:value,parentData:data,nodeData:childNodeData,showCollectionCount:showCollectionCount},props),key):jsx(ValueNodeWrapper,Object.assign({data:value,parentData:data,nodeData:childNodeData},props,{showLabel:"object"===collectionType||showArrayIndices}),key)},key)})):null,isCollapsed=!!showCollectionWrapper&&collapsed;isCollapsed||(hasBeenOpened.current=!0);const customNodeAllProps=Object.assign(Object.assign({},props),{data:data,value:data,parentData:parentData,nodeData:nodeData,setValue:val=>__awaiter(void 0,void 0,void 0,(function*(){return yield onEdit(val,path)})),handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:handleKeyPress,isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles}),CollectionContents=showCustomNodeContents?jsx(CustomNode,Object.assign({customNodeProps:customNodeProps},customNodeAllProps,{children:CollectionChildren})):CollectionChildren,KeyDisplay=isEditingKey?jsx("input",{className:"jer-collection-name",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}):jsx("span",{style:getStyles("property",nodeData),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:showKey?`${name}:`:null}),EditButtonDisplay=showEditButtons&&jsx(EditButtons,{startEdit:canEdit?()=>{hasBeenOpened.current=!0,setCurrentlyEditingElement(pathString),setCollapsed(!1)}:void 0,handleAdd:canAdd?key=>{setCollapsed(!1);const newValue=getDefaultNewValue(nodeData);"array"===collectionType?onAdd(newValue,[...path,data.length]).then((error=>{error&&showError(error)})):key in data?showError(translate("ERROR_KEY_EXISTS",nodeData)):onAdd(newValue,[...path,key]).then((error=>{error&&showError(error)}))}:void 0,handleDelete:canDelete?handleDelete:void 0,enableClipboard:enableClipboard,type:collectionType,nodeData:nodeData,translate:translate}),CollectionNodeComponent=jsxs("div",{className:"jer-component jer-collection-component",style:Object.assign({marginLeft:(0===path.length?0:indent/2)+"em"},getStyles("collection",nodeData)),children:[showCollectionWrapper?jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[jsxs("div",{className:"jer-collection-name",children:[jsx("div",{className:"jer-collapse-icon",onClick:e=>(e=>{if(e.getModifierState("Alt"))return hasBeenOpened.current=!0,void setCollapseState({open:!collapsed,path:path});currentlyEditingElement&&currentlyEditingElement.includes(pathString)||(setIsAnimating(!0),hasBeenOpened.current=!0,setCollapsed(!collapsed),setTimeout((()=>setIsAnimating(!1)),500))})(e),children:jsx(Icon,{name:"chevron",rotate:collapsed,nodeData:nodeData})}),KeyDisplay,!isEditing&&jsx("span",{className:"jer-brackets jer-bracket-open",style:getStyles("bracket",nodeData),children:brackets.open})]}),!isEditing&&showCount&&jsx("div",{className:"jer-collection-item-count"+(showCount?" jer-visible":" jer-hidden"),style:getStyles("itemCount",nodeData),children:1===size?translate("ITEM_SINGLE",Object.assign(Object.assign({},nodeData),{size:1}),1):translate("ITEMS_MULTIPLE",nodeData,size)}),jsx("div",{className:"jer-brackets"+(isCollapsed?" jer-visible":" jer-hidden"),style:getStyles("bracket",nodeData),children:brackets.close}),EditButtonDisplay]}):hideKey?jsx(Fragment,{}):jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[KeyDisplay,EditButtonDisplay]}),jsxs("div",{className:"jer-collection-inner",style:Object.assign({maxHeight:isCollapsed?0:areChildrenBeingEdited(pathString)?void 0:3*numOfLines+"em",overflowY:isCollapsed||isAnimating?"hidden":"visible",transition:`max-height ${transitionTime}`},getStyles("collectionInner",nodeData)),children:[CollectionContents,jsx("div",{className:isEditing?"jer-collection-error-row":"jer-collection-error-row-edit",children:error&&jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})}),!isEditing&&showCollectionWrapper&&jsx("div",{className:"jer-brackets jer-bracket-outside",style:getStyles("bracket",nodeData),children:brackets.close})]})]});return CustomWrapper?jsx(CustomWrapper,Object.assign({customNodeProps:wrapperProps},customNodeAllProps,{children:CollectionNodeComponent})):CollectionNodeComponent},localisedStrings={ITEM_SINGLE:"{{count}} item",ITEMS_MULTIPLE:"{{count}} items",KEY_NEW:"Enter new key",ERROR_KEY_EXISTS:"Key already exists",ERROR_INVALID_JSON:"Invalid JSON",ERROR_UPDATE:"Update unsuccessful",ERROR_DELETE:"Delete unsuccessful",ERROR_ADD:"Adding node unsuccessful",DEFAULT_STRING:"New data!",DEFAULT_NEW_KEY:"key"},getTranslateFunction=(translations,customText)=>(key,customTextData,count)=>((translations,customText,customTextData,key,count)=>{if(customText[key]){const output=customText[key](customTextData);if(null!==output)return output}const string=key in translations?translations[key]:localisedStrings[key];return void 0===count?string:null==string?void 0:string.replace("{{count}}",String(count))})(translations,customText,customTextData,key,count),Editor=({data:srcData,rootName:rootName="root",onUpdate:onUpdate=(()=>{}),onEdit:srcEdit=onUpdate,onDelete:srcDelete=onUpdate,onAdd:srcAdd=onUpdate,onChange:onChange,enableClipboard:enableClipboard=!0,theme:theme="default",icons:icons,indent:indent=3,collapse:collapse=!1,showCollectionCount:showCollectionCount=!0,restrictEdit:restrictEdit=!1,restrictDelete:restrictDelete=!1,restrictAdd:restrictAdd=!1,restrictTypeSelection:restrictTypeSelection=!1,searchFilter:searchFilterInput,searchText:searchText,searchDebounceTime:searchDebounceTime=350,keySort:keySort=!1,showArrayIndices:showArrayIndices=!0,showStringQuotes:showStringQuotes=!0,defaultValue:defaultValue=null,minWidth:minWidth=250,maxWidth:maxWidth="min(600px, 90vw)",stringTruncate:stringTruncate=250,translations:translations={},className:className,id:id,customText:customText={},customNodeDefinitions:customNodeDefinitions=[]})=>{const{getStyles:getStyles,setTheme:setTheme,setIcons:setIcons}=useTheme(),{setCollapseState:setCollapseState}=useTreeState(),collapseFilter=useCallback(getFilterFunction(collapse),[collapse]),translate=useCallback(getTranslateFunction(translations,customText),[translations,customText]),[debouncedSearchText,setDebouncedSearchText]=useState(searchText),[data,setData]=useState(srcData);useEffect((()=>{theme&&setTheme(theme),icons&&setIcons(icons)}),[theme,icons]),useEffect((()=>{setCollapseState(null),setData(srcData)}),[srcData]),useEffect((()=>{const debounce=setTimeout((()=>setDebouncedSearchText(searchText)),searchDebounceTime);return()=>clearTimeout(debounce)}),[searchText,searchDebounceTime]);const nodeData={key:rootName,path:[],level:0,index:0,value:data,size:Object.keys(data).length,parentData:null,fullData:data},restrictEditFilter=getFilterFunction(restrictEdit),restrictDeleteFilter=getFilterFunction(restrictDelete),restrictAddFilter=getFilterFunction(restrictAdd),searchFilter=getSearchFilter(searchFilterInput),otherProps={name:rootName,nodeData:nodeData,onEdit:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"update");if(currentValue===newValue)return;setData(newData);const result=yield srcEdit({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return void 0!==result?(setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result):void 0})),onDelete:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"delete");setData(newData);const result=yield srcDelete({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onAdd:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"add");setData(newData);const result=yield srcAdd({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onChange:onChange,showCollectionCount:showCollectionCount,collapseFilter:collapseFilter,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:debouncedSearchText,enableClipboard:enableClipboard,keySort:keySort,showArrayIndices:showArrayIndices,showStringQuotes:showStringQuotes,indent:indent,defaultValue:defaultValue,stringTruncate:stringTruncate,translate:translate,customNodeDefinitions:customNodeDefinitions,parentData:null};return jsx("div",{id:id,className:"jer-editor-container "+className,style:Object.assign(Object.assign({},getStyles("container",nodeData)),{minWidth:minWidth,maxWidth:maxWidth}),children:isCollection(data)?jsx(CollectionNode,Object.assign({data:data},otherProps)):jsx(ValueNodeWrapper,Object.assign({data:data,showLabel:!0},otherProps))})},JsonEditor=props=>jsx(ThemeProvider,{children:jsx(TreeStateProvider,{children:jsx(Editor,Object.assign({},props))})}),updateDataObject=(data,path,newValue,action)=>{if(0===path.length)return{currentData:data,newData:newValue,currentValue:data,newValue:newValue};const currentValue="add"!==action?extract(data,path):void 0;return{currentData:data,newData:assign(clone(data),path,newValue,{remove:"delete"===action}),currentValue:currentValue,newValue:"delete"!==action?newValue:void 0}},getFilterFunction=propValue=>"boolean"==typeof propValue?()=>propValue:"number"==typeof propValue?({level:level})=>level>=propValue:propValue,getSearchFilter=searchFilterInput=>{if(void 0!==searchFilterInput)return"value"===searchFilterInput?matchNode:"key"===searchFilterInput?matchNodeKey:"all"===searchFilterInput?(inputData,searchText)=>matchNode(inputData,searchText)||matchNodeKey(inputData,searchText):searchFilterInput},LinkCustomComponent=({value:value,setIsEditing:setIsEditing,getStyles:getStyles,customNodeProps:customNodeProps,nodeData:nodeData})=>{var _a,_b;const stringTruncateLength=null!==(_a=null==customNodeProps?void 0:customNodeProps.stringTruncate)&&void 0!==_a?_a:100,styles=getStyles("string",nodeData);return jsx("div",{onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string jer-hyperlink",style:styles,children:jsxs("a",{href:value,target:"_blank",rel:"noreferrer",style:{color:null!==(_b=styles.color)&&void 0!==_b?_b:void 0},children:['"',truncate(value,stringTruncateLength),'"']})})},LinkCustomNodeDefinition={condition:({value:value})=>"string"==typeof value&&/^https?:\/\/.+\..+$/.test(value),element:LinkCustomComponent,showOnView:!0,showOnEdit:!1};export{IconAdd,IconCancel,IconChevron,IconCopy,IconDelete,IconEdit,IconOk,JsonEditor,LinkCustomComponent,LinkCustomNodeDefinition,isCollection,matchNode,matchNodeKey,themes,truncate};
import{jsxs,jsx,Fragment}from"react/jsx-runtime";import{createContext,useState,useContext,useEffect,useCallback,useMemo,useRef}from"react";import assign from"object-property-assigner";export{default as assign}from"object-property-assigner";import extract from"object-property-extractor";export{default as extract}from"object-property-extractor";import JSON5 from"json5";import clone from"just-clone";function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){var value;result.done?resolve(result.value):(value=result.value,value instanceof P?value:new P((function(resolve){resolve(value)}))).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;var e=[],t=[];!function(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}(":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.5s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: 0.8em;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 16px;\n line-height: 1;\n padding: 1em;\n padding-left: 2em;\n /* margin-top: 1em; */\n /* margin-bottom: 1em; */\n border-radius: 0.5em;\n text-align: left;\n}\n\n.jer-editor-container textarea {\n color: var(--jer-input-color);\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n}\n\n.jer-editor-container textarea:focus {\n border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n border: var(--jer-form-border);\n border-radius: 0.3em;\n outline: none;\n font-family: inherit;\n}\n\n.jer-editor-container input:focus {\n border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n display: flex;\n min-height: 1.7em;\n gap: 0.3em;\n align-items: center;\n}\n\n.jer-collection-header-row {\n display: flex;\n flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-bracket-outside {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collapse-icon {\n position: absolute;\n left: -1.2em;\n top: 0.35em;\n}\n\n.jer-collection-inner {\n position: relative;\n}\n\n.jer-collection-text-edit {\n display: flex;\n flex-direction: column;\n gap: 0.3em;\n align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n font-family: inherit;\n font-size: 0.85em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n margin-top: 0.4em;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n\n.jer-hyperlink {\n text-decoration: underline;\n}\n\n.jer-input-text {\n resize: none;\n margin: 0;\n height: 1.4em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-top: 0.25em;\n padding-bottom: 0.2em;\n min-width: 6em;\n overflow: hidden;\n line-height: 1.2em;\n font-family: inherit;\n font-size: 0.9em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-key-text {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-key-edit {\n padding: 0 0.3em;\n font-size: inherit;\n font-size: 0.9em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n.jer-input-number {\n min-width: 3em;\n font-size: 90%;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n height: 1em;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n position: relative;\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n content: '';\n display: block;\n position: absolute;\n border-radius: 50%;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: all 0.5s;\n box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n position: absolute;\n border-radius: 4em;\n left: 0;\n top: 0;\n opacity: 1;\n transition: 0s;\n}\n\n.jer-copy-pulse:active {\n top: 0.07em;\n}\n\n.jer-rotate-90 {\n transform: rotate(-90deg);\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n /* font-size: '2em'; */\n transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n opacity: 0.85;\n transition: 0.3s;\n transform: scale(1.2);\n}\n",{});const AutogrowTextArea=({className:className,name:name,value:value,setValue:setValue,handleKeyPress:handleKeyPress,styles:styles})=>{const dummyValue="\n"===value.slice(-1)?value+".":value;return jsxs("div",{style:{display:"grid"},children:[jsx("textarea",{id:`${name}_textarea`,style:Object.assign({height:"auto",gridArea:"1 / 1 / 2 / 2",overflowY:"auto",whiteSpace:"pre-wrap"},styles),rows:1,className:className,name:`${name}_textarea`,value:value,onChange:e=>setValue(e.target.value),autoFocus:!0,onFocus:e=>{value.length<40&&e.target.select()},onKeyDown:handleKeyPress}),jsx("span",{className:className,style:Object.assign({visibility:"hidden",height:"auto",gridArea:"1 / 1 / 2 / 2",color:"red",opacity:.9,whiteSpace:"pre-wrap",overflowY:"auto",border:"1px solid transparent"},styles),children:dummyValue})]})},themes={default:{displayName:"Default",fragments:{edit:"rgb(42, 161, 152)"},styles:{container:{backgroundColor:"#f6f6f6",fontFamily:"monospace"},collection:{},collectionInner:{},collectionElement:{},property:"#292929",bracket:{color:"rgb(0, 43, 54)",fontWeight:"bold"},itemCount:{color:"rgba(0, 0, 0, 0.3)",fontStyle:"italic"},string:"rgb(203, 75, 22)",number:"rgb(38, 139, 210)",boolean:"green",null:{color:"rgb(220, 50, 47)",fontVariant:"small-caps",fontWeight:"bold"},input:["#292929"],inputHighlight:"#b3d8ff",error:{fontSize:"0.8em",color:"red",fontWeight:"bold"},iconCollection:"rgb(0, 43, 54)",iconEdit:"edit",iconDelete:"rgb(203, 75, 22)",iconAdd:"edit",iconCopy:"rgb(38, 139, 210)",iconOk:"green",iconCancel:"rgb(203, 75, 22)"}},githubDark:{displayName:"Github Dark",styles:{container:{backgroundColor:"#0d1117",color:"white"},property:"#E6EDF3",bracket:"#56d364",itemCount:"#8B949E",string:"#A5D6FF",number:"#D2A8FF",boolean:{color:"#FF7B72",fontSize:"90%",fontWeight:"bold"},null:"green",iconCollection:"#D2A8FF",iconEdit:"#D2A8FF",iconDelete:"rgb(203, 75, 22)",iconAdd:"rgb(203, 75, 22)",iconCopy:"#A5D6FF",iconOk:"#56d364",iconCancel:"rgb(203, 75, 22)"}},githubLight:{displayName:"Github Light",styles:{container:"white",property:"#1F2328",bracket:"#00802e",itemCount:"#8B949E",string:"#0A3069",number:"#953800",boolean:{color:"#CF222E",fontSize:"90%",fontWeight:"bold"},null:"#FF7B72",iconCollection:"#8250DF",iconEdit:"#8250DF",iconDelete:"rgb(203, 75, 22)",iconAdd:"#8250DF",iconCopy:"#57606A"}},monoDark:{displayName:"Black & White",fragments:{lightText:{color:"white"},midGrey:"#5c5c5c"},styles:{container:["lightText",{backgroundColor:"black"}],property:"lightText",bracket:"midGrey",itemCount:"#4a4a4a",string:"#a8a8a8",number:"#666666",boolean:{color:"#848484",fontStyle:"italic"},null:"#333333",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},monoLight:{fragments:{midGrey:"#a3a3a3"},displayName:"White & Black",styles:{container:"white",property:"black",bracket:"midGrey",itemCount:"#b5b5b5",string:"#575757",number:"#999999",boolean:{color:"#7b7b7b",fontStyle:"italic"},null:"#cccccc",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},candyWrapper:{displayName:"Candy Wrapper",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},darkBlue:{color:"#2B2D42"}},styles:{container:"minty",property:"pop",bracket:"dark",itemCount:"pale",string:"mid",number:["darkBlue",{fontSize:"85%"}],boolean:["mid",{fontStyle:"italic",fontWeight:"bold",fontSize:"80%"}],null:["#cccccc",{fontWeight:"bold"}],input:{border:"1px solid rgb(115, 194, 198)"},iconCollection:"#1D3557",iconEdit:"#457B9D",iconDelete:"#E63946",iconAdd:"#2B2D42",iconCopy:"#1D3557",iconCancel:"#E63946"}},psychedelic:{displayName:"Psychedelic",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},fluroYellow:"rgb(242, 228, 21)",fluroGreen:"rgb(68, 255, 62)",hotPink:"#f7379a"},styles:{container:{backgroundColor:"unset",background:"linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)",color:"black"},property:"black",bracket:"fluroYellow",itemCount:["pale",{opacity:.7}],string:"white",number:["#33d9ff",{fontSize:"90%",fontWeight:"bold"}],boolean:["fluroGreen",{fontWeight:"bold",fontSize:"80%"}],null:["black",{fontWeight:"bold",opacity:.3,backgroundColor:"rgb(255, 255, 255, 0.5)",padding:"0 0.4em",borderRadius:"0.4em"}],iconCollection:"fluroYellow",iconEdit:["black"],iconDelete:["white",{opacity:.5}],iconAdd:["white",{opacity:.5}],iconCopy:"rgb(32, 84, 242)",iconOk:"fluroGreen",iconCancel:"hotPink"}}},emptyStyleObject={container:{},collection:{},collectionInner:{},collectionElement:{},property:{},bracket:{},itemCount:{},string:{},number:{},boolean:{},null:{},input:{},inputHighlight:{},error:{},iconCollection:{},iconEdit:{},iconDelete:{},iconAdd:{},iconCopy:{},iconOk:{},iconCancel:{}},defaultTheme=themes.default,ThemeProviderContext=createContext({getStyles:()=>({}),setTheme:_=>{},icons:{},setIcons:()=>{}}),ThemeProvider=({children:children})=>{const[styles,setStyles]=useState(emptyStyleObject),[icons,setIcons]=useState({});return jsx(ThemeProviderContext.Provider,{value:{getStyles:(element,nodeData)=>"function"==typeof styles[element]?styles[element](nodeData):styles[element],setTheme:theme=>{const styles=compileStyles(theme);setStyles(styles)},icons:icons,setIcons:setIcons},children:children})},useTheme=()=>useContext(ThemeProviderContext),compileStyles=themeInput=>{var _a,_b,_c,_d;const collectedFunctions={},stylesArray=(Array.isArray(themeInput)?themeInput:[themeInput]).map((theme=>"default"===themeInput?{}:"string"==typeof theme?buildStyleObject(themes[theme],collectedFunctions):isStyleObject(theme)?buildStyleObject({fragments:{},styles:theme},collectedFunctions):buildStyleObject(theme,collectedFunctions))),mergedStyleObject=buildStyleObject(defaultTheme,{});Object.keys(mergedStyleObject).forEach((k=>{const key=k;stylesArray.forEach((styleObj=>{styleObj[key]&&(mergedStyleObject[key]=Object.assign(Object.assign({},mergedStyleObject[key]),styleObj[key]))}))}));const finalStyles=Object.assign({},mergedStyleObject);return Object.entries(collectedFunctions).forEach((([key,func])=>{const element=key;finalStyles[element]=nodeData=>{const funcResult=func(nodeData)||{};return Object.assign(Object.assign({},mergedStyleObject[element]),funcResult)}})),"function"!=typeof(null==finalStyles?void 0:finalStyles.inputHighlight)&&(null===(_a=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_a?void 0:_a.backgroundColor)&&document.documentElement.style.setProperty("--jer-highlight-color",null===(_b=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_b?void 0:_b.backgroundColor),"function"!=typeof(null==finalStyles?void 0:finalStyles.iconCopy)&&(null===(_c=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_c?void 0:_c.color)&&document.documentElement.style.setProperty("--jer-icon-copy-color",null===(_d=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_d?void 0:_d.color),finalStyles},buildStyleObject=(theme,collectedFunctions)=>{const{fragments:fragments,styles:styles}=theme,styleObject={};return Object.entries(styles).forEach((([key,value])=>{const cssStyles=(Array.isArray(value)?value:[value]).reduce(((acc,curr)=>{var _a;if("function"==typeof curr)return collectedFunctions[key]=curr,Object.assign({},acc);if("string"==typeof curr){const style=null!==(_a=null==fragments?void 0:fragments[curr])&&void 0!==_a?_a:curr;return"string"==typeof style?Object.assign(Object.assign({},acc),{[defaultStyleProperties[key]]:style}):Object.assign(Object.assign({},acc),style)}return Object.assign(Object.assign({},acc),curr)}),{});styleObject[key]=cssStyles})),styleObject},isStyleObject=overrideObject=>!("styles"in overrideObject),defaultStyleProperties={container:"backgroundColor",collection:"backgroundColor",collectionInner:"backgroundColor",collectionElement:"backgroundColor",property:"color",bracket:"color",itemCount:"color",string:"color",number:"color",boolean:"color",null:"color",input:"color",inputHighlight:"backgroundColor",error:"color",iconCollection:"color",iconEdit:"color",iconDelete:"color",iconAdd:"color",iconCopy:"color",iconOk:"color",iconCancel:"color"},truncate=(string,length=200)=>string.length<length?string:`${string.slice(0,length-2).trim()}...`,toPathString=path=>path.join(".").replace(/"/g,"_"),StringValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme(),pathString=toPathString(path),quoteChar=showStringQuotes?'"':"";return isEditing?jsx(AutogrowTextArea,{className:"jer-input-text",name:pathString,value:value,setValue:setValue,isEditing:isEditing,handleKeyPress:e=>{"Enter"!==e.key||e.shiftKey?"Escape"===e.key&&handleCancel():handleEdit()},styles:getStyles("input",nodeData)}):jsxs("div",{id:`${pathString}_display`,onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string",style:getStyles("string",nodeData),children:[quoteChar,truncate(value,stringTruncate),quoteChar]})},NumberValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();return isEditing?jsx("input",{className:"jer-input-number",type:"text",name:toPathString(path),value:value,onChange:e=>setValue(e.target.value.replace(/[^0-9.-]/g,"")),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{switch(e.key){case"Enter":handleEdit();break;case"Escape":handleCancel();break;case"ArrowUp":e.preventDefault(),setValue(Number(value)+1);break;case"ArrowDown":e.preventDefault(),setValue(Number(value)-1)}},style:{width:String(value).length/1.5+2+"em"}}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-number",style:getStyles("number",nodeData),children:value})},BooleanValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing,handleEdit]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsx("input",{className:"jer-input-boolean",type:"checkbox",name:toPathString(path),checked:value,onChange:()=>setValue(!value)}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-boolean",style:getStyles("boolean",nodeData),children:String(value)})},NullValue=({value:value,isEditing:isEditing,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{const{getStyles:getStyles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("div",isEditing?{className:"jer-input-null",children:"null"}:{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-null",style:getStyles("null",nodeData),children:String(value)})},ObjectValue=({value:value,translate:translate,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel,nodeData:nodeData})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-object",children:`{${translate("DEFAULT_NEW_KEY",nodeData)}: "${String(value)}" }`})},ArrayValue=({value:value,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-array",children:`[${null===value?"":String(value)}]`})},InvalidValue=({value:value})=>{let message="Error!";switch(typeof value){case"string":"**INVALID_FUNCTION**"===value&&(message="Function");break;case"undefined":message="Undefined";break;case"symbol":message="Symbol"}return jsx("span",{className:"jer-value-invalid",children:message})},IconAdd=({size:size,style:style,className:className})=>jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z"}),jsx("path",{d:"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"})]}),IconEdit=({size:size,style:style,className:className})=>jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,transform:"translate(0, 0.5)",children:[jsx("path",{d:"M7 17.013l4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z"}),jsx("path",{d:"M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z"})]}),IconDelete=({size:size,style:style,className:className})=>jsx("svg",{viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12m2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12M15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5z"})}),IconCopy=({size:size,style:style,className:className})=>jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M9 2 H15 A1 1 0 0 1 16 3 V5 A1 1 0 0 1 15 6 H9 A1 1 0 0 1 8 5 V3 A1 1 0 0 1 9 2 z"}),jsx("path",{d:"M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2M16 4h2a2 2 0 012 2v4M21 14H11"}),jsx("path",{d:"M15 10l-4 4 4 4"})]}),IconOk=({size:size,style:style,className:className})=>jsxs("svg",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,viewBox:"0 0 24 24",width:size,height:size,className:className,style:style,children:[jsx("path",{d:"M22 11.08V12a10 10 0 11-5.93-9.14"}),jsx("path",{d:"M22 4L12 14.01l-3-3"})]}),IconCancel=({size:size,style:style,className:className})=>jsx("svg",{baseProfile:"tiny",viewBox:"0 0 24 24",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm-5 8c0-.832.224-1.604.584-2.295l6.711 6.711A4.943 4.943 0 0112 17c-2.757 0-5-2.243-5-5zm9.416 2.295L9.705 7.584A4.943 4.943 0 0112 7c2.757 0 5 2.243 5 5 0 .832-.224 1.604-.584 2.295z"})}),IconChevron=({size:size,style:style,className:className})=>jsx("svg",{viewBox:"0 0 512 512",fill:"currentColor",width:size,height:size,className:className,style:style,children:jsx("path",{d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})}),Icon=({name:name,nodeData:nodeData,rotate:rotate})=>{var _a,_b,_c,_d,_e,_f,_g;const{getStyles:getStyles,icons:icons}=useTheme(),commonProps={size:"1.4em",className:"jer-icon"};switch(name){case"add":return null!==(_a=null==icons?void 0:icons.add)&&void 0!==_a?_a:jsx(IconAdd,Object.assign({},commonProps,{style:getStyles("iconAdd",nodeData)}));case"edit":return null!==(_b=null==icons?void 0:icons.edit)&&void 0!==_b?_b:jsx(IconEdit,Object.assign({},commonProps,{style:getStyles("iconEdit",nodeData)}));case"delete":return null!==(_c=null==icons?void 0:icons.delete)&&void 0!==_c?_c:jsx(IconDelete,Object.assign({},commonProps,{style:getStyles("iconDelete",nodeData),size:"1.45em"}));case"copy":return null!==(_d=null==icons?void 0:icons.copy)&&void 0!==_d?_d:jsx(IconCopy,Object.assign({},commonProps,{style:getStyles("iconCopy",nodeData),size:"1.2em"}));case"ok":return null!==(_e=null==icons?void 0:icons.ok)&&void 0!==_e?_e:jsx(IconOk,Object.assign({},commonProps,{style:Object.assign({fontSize:"90%"},getStyles("iconOk",nodeData))}));case"cancel":return null!==(_f=null==icons?void 0:icons.cancel)&&void 0!==_f?_f:jsx(IconCancel,Object.assign({},commonProps,{style:Object.assign({fontSize:"130%"},getStyles("iconCancel",nodeData))}));case"chevron":return null!==(_g=null==icons?void 0:icons.chevron)&&void 0!==_g?_g:jsx(IconChevron,{className:"jer-accordion-icon"+(rotate?" jer-rotate-90":""),size:"1em",style:getStyles("iconCollection",nodeData)});default:return jsx(Fragment,{})}},EditButtons=({startEdit:startEdit,handleDelete:handleDelete,handleAdd:handleAdd,enableClipboard:enableClipboard,type:type,nodeData:nodeData,translate:translate})=>{const{getStyles:getStyles}=useTheme(),NEW_KEY_PROMPT=translate("KEY_NEW",nodeData),[isAdding,setIsAdding]=useState(!1),[newKey,setNewKey]=useState(NEW_KEY_PROMPT),{key:key,path:path,value:data}=nodeData;useEffect((()=>{isAdding||setNewKey(NEW_KEY_PROMPT)}),[isAdding]);return jsxs("div",{className:"jer-edit-buttons",style:isAdding?{opacity:1}:void 0,children:[enableClipboard&&jsx("div",{onClick:e=>{let value,copyType="value",stringValue="";if(enableClipboard){if(!0===(e.ctrlKey||e.metaKey))value=stringifyPath(path),stringValue=value,copyType="path";else value=data,stringValue=type?JSON.stringify(data,null,2):String(value);navigator.clipboard.writeText(stringValue)}"function"==typeof enableClipboard&&enableClipboard({value:value,stringValue:stringValue,path:path,key:key,type:copyType})},className:"jer-copy-pulse",children:jsx(Icon,{name:"copy",nodeData:nodeData})}),startEdit&&jsx("div",{onClick:startEdit,children:jsx(Icon,{name:"edit",nodeData:nodeData})}),handleDelete&&jsx("div",{onClick:handleDelete,children:jsx(Icon,{name:"delete",nodeData:nodeData})}),handleAdd&&jsx("div",{onClick:()=>{"object"===type?setIsAdding(!0):handleAdd("")},children:jsx(Icon,{name:"add",nodeData:nodeData})}),isAdding&&handleAdd&&"object"===type&&jsxs(Fragment,{children:[jsx("input",{className:"jer-input-new-key",type:"text",name:"new-object-key",value:newKey,onChange:e=>setNewKey(e.target.value),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&handleAdd?(setIsAdding(!1),handleAdd(newKey)):"Escape"===e.key&&setIsAdding(!1)},style:getStyles("input",nodeData)}),jsx(InputButtons,{onOk:()=>{newKey&&(setIsAdding(!1),handleAdd(newKey))},onCancel:()=>{setIsAdding(!1)},nodeData:nodeData})]})]})},InputButtons=({onOk:onOk,onCancel:onCancel,nodeData:nodeData})=>jsxs("div",{className:"jer-confirm-buttons",children:[jsx("div",{onClick:onOk,children:jsx(Icon,{name:"ok",nodeData:nodeData})}),jsx("div",{onClick:onCancel,children:jsx(Icon,{name:"cancel",nodeData:nodeData})})]}),stringifyPath=path=>path.reduce(((str,part)=>"number"==typeof part?`${str}[${part}]`:""===str?part:`${str}.${part}`),""),DataTypes=["string","number","boolean","null","object","array"],getCustomNode=(customNodeDefinitions=[],nodeData)=>{const matchingDefinitions=customNodeDefinitions.filter((({condition:condition})=>condition(nodeData)));if(0===matchingDefinitions.length)return{};const _a=matchingDefinitions[0],{element:element,wrapperElement:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey=!1,showEditTools:showEditTools=!0,showOnEdit:showOnEdit=!1,showOnView:showOnView=!0,showCollectionWrapper:showCollectionWrapper=!0}=_a,rest=__rest(_a,["element","wrapperElement","customNodeProps","wrapperProps","hideKey","showEditTools","showOnEdit","showOnView","showCollectionWrapper"]);return Object.assign({CustomNode:element,CustomWrapper:wrapperElement,customNodeProps:customNodeProps,wrapperProps:wrapperProps,hideKey:hideKey,showEditTools:showEditTools,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper},rest)},isCollection=value=>null!==value&&"object"==typeof value,filterNode=(type,nodeData,searchFilter,searchText="")=>{if(!searchFilter&&!searchText)return!0;switch(type){case"collection":if(searchFilter){if(searchFilter(nodeData,searchText))return!0;if(!filterCollection(searchText,nodeData,searchFilter))return!1}if(!searchFilter&&searchText&&!filterCollection(searchText,nodeData))return!1;break;case"value":if(searchFilter&&!searchFilter(nodeData,searchText))return!1;if(!searchFilter&&searchText&&!matchNode(nodeData,searchText))return!1}return!0},filterCollection=(searchText="",nodeData,matcher=matchNode)=>{const collection=nodeData.value;return Object.entries(collection).some((([key,value])=>{const childPath=[...nodeData.path,key],childNodeData=Object.assign(Object.assign({},nodeData),{key:key,path:childPath,level:nodeData.level+1,value:value,size:childPath.length,parentData:collection});return isCollection(value)?filterCollection(searchText,childNodeData,matcher):matcher(childNodeData,searchText)}))},matchNode=(nodeData,searchText="")=>{const{value:value}=nodeData;if(null===value&&"null".includes(searchText.toLowerCase()))return!0;switch(typeof value){case"string":return value.toLowerCase().includes(searchText.toLowerCase());case"number":return!!String(value).includes(searchText);case"boolean":return value?"true".includes(searchText.toLowerCase())||"1"===searchText:"false".includes(searchText.toLowerCase())||"0"===searchText;default:return!1}},matchNodeKey=({key:key,path:path},searchText="")=>!!matchNode({value:key},searchText)||!!path.some((field=>matchNode({value:field},searchText))),TreeStateProviderContext=createContext({collapseState:null,setCollapseState:()=>{},doesPathMatch:()=>!1,currentlyEditingElement:null,setCurrentlyEditingElement:()=>{},areChildrenBeingEdited:()=>!1}),TreeStateProvider=({children:children})=>{const[collapseState,setCollapseState]=useState(null),[currentlyEditingElement,setCurrentlyEditingElement]=useState(null);return jsx(TreeStateProviderContext.Provider,{value:{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:path=>{if(null===collapseState)return!1;for(const[index,value]of collapseState.path.entries())if(value!==path[index])return!1;return!0},currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:pathString=>null!==currentlyEditingElement&&currentlyEditingElement.includes(pathString)},children:children})},useTreeState=()=>useContext(TreeStateProviderContext),ValueNodeWrapper=props=>{const{data:data,parentData:parentData,nodeData:nodeData,onEdit:onEdit,onDelete:onDelete,onChange:onChange,enableClipboard:enableClipboard,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:searchText,showLabel:showLabel,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,indent:indent,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,{getStyles:getStyles}=useTheme(),{currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement}=useTreeState(),[value,setValue]=useState("function"==typeof data?"**INVALID_FUNCTION**":data),[error,setError]=useState(null),{key:name,path:path}=nodeData,customNodeData=getCustomNode(customNodeDefinitions,nodeData),[dataType,setDataType]=useState(getDataType(data,customNodeData)),pathString=toPathString(path),updateValue=useCallback((newValue=>{if(!onChange)return void setValue(newValue);const modifiedValue=onChange({currentData:nodeData.fullData,newValue:newValue,currentValue:value,name:name,path:path});setValue(modifiedValue)}),[onChange]);useEffect((()=>{setValue("function"==typeof data?"**INVALID_FUNCTION**":data),setDataType(getDataType(data,customNodeData))}),[data,error]);const canEdit=useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView}=customNodeData,allDataTypes=[...DataTypes,...customNodeDefinitions.filter((({showInTypesSelector:showInTypesSelector=!1,name:name})=>showInTypesSelector&&!!name)).map((({name:name})=>name))],allowedDataTypes=useMemo((()=>{if("boolean"==typeof restrictTypeSelection)return restrictTypeSelection?[]:allDataTypes;if(Array.isArray(restrictTypeSelection))return restrictTypeSelection;const result=restrictTypeSelection(nodeData);return"boolean"==typeof result?result?[]:allDataTypes:result}),[nodeData,restrictTypeSelection]);if(!filterNode("value",nodeData,searchFilter,searchText))return null;const logError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{let newValue;switch(setCurrentlyEditingElement(null),dataType){case"object":newValue={[translate("DEFAULT_NEW_KEY",nodeData)]:value};break;case"array":newValue=null!=value?value:[];break;case"number":{const n=Number(value);newValue=isNaN(n)?0:n;break}default:newValue=value}onEdit(newValue,path).then((error=>{error&&logError(error)}))},handleCancel=()=>{setCurrentlyEditingElement(null),setValue(data),setDataType(getDataType(data,customNodeData))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,canEditKey=!("number"==typeof path.slice(-1)[0])&&canEdit&&canDelete,showError=!isEditing&&error,showTypeSelector=isEditing&&allowedDataTypes.length>0,showEditButtons="invalid"!==dataType&&!error&&showEditTools,showKeyEdit=showLabel&&isEditingKey,showKey=showLabel&&!isEditingKey&&!hideKey,inputProps={value:value,parentData:parentData,setValue:updateValue,isEditing:isEditing,setIsEditing:canEdit?()=>setCurrentlyEditingElement(pathString):()=>{},handleEdit:handleEdit,handleCancel:handleCancel,path:path,stringTruncate:stringTruncate,showStringQuotes:showStringQuotes,nodeData:nodeData,translate:translate},ValueComponent=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView)?jsx(CustomNode,Object.assign({},props,{value:value,customNodeProps:customNodeProps,setValue:updateValue,handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:e=>{"Enter"===e.key?handleEdit():"Escape"===e.key&&handleCancel()},isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles})):getInputComponent(getDataType(data),inputProps);return jsx("div",{className:"jer-component jer-value-component",style:{marginLeft:indent/2+"em"},children:jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[showKey&&jsxs("span",{className:"jer-key-text",style:Object.assign(Object.assign({},getStyles("property",nodeData)),{minWidth:`${Math.min(String(name).length+1,5)}ch`,flexShrink:name.length>10?1:0}),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:[name,":"," "]}),showKeyEdit&&jsx("input",{className:"jer-input-text jer-key-edit",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),jsxs("div",{className:"jer-value-and-buttons",children:[jsx("div",{className:"jer-input-component",children:ValueComponent}),isEditing?jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData}):showEditButtons&&jsx(EditButtons,{startEdit:canEdit?()=>setCurrentlyEditingElement(pathString):void 0,handleDelete:canDelete?()=>{onDelete(value,path).then((error=>{error&&logError(error)}))}:void 0,enableClipboard:enableClipboard,translate:translate,nodeData:nodeData}),showTypeSelector&&jsxs("div",{className:"jer-select",children:[jsx("select",{name:`${name}-type-select`,className:"jer-type-select",onChange:e=>(type=>{const customNode=customNodeDefinitions.find((customNode=>customNode.name===type));if(customNode)onEdit(customNode.defaultValue,path),setDataType(type);else{const newValue=convertValue(value,type,translate("DEFAULT_NEW_KEY",nodeData),(null==customNodeData?void 0:customNodeData.CustomNode)?translate("DEFAULT_STRING",nodeData):void 0);updateValue(newValue),onEdit(newValue,path),setDataType(type)}})(e.target.value),value:dataType,children:allowedDataTypes.map((type=>jsx("option",{value:type,children:type},type)))}),jsx("span",{className:"focus"})]}),showError&&jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})]})]})})},getDataType=(value,customNodeData)=>(null==customNodeData?void 0:customNodeData.CustomNode)&&(null==customNodeData?void 0:customNodeData.name)&&customNodeData.showInTypesSelector?customNodeData.name:"string"==typeof value?"string":"number"==typeof value?"number":"boolean"==typeof value?"boolean":null===value?"null":"invalid",getInputComponent=(dataType,inputProps)=>{const value=inputProps.value;switch(dataType){case"string":return jsx(StringValue,Object.assign({},inputProps,{value:value}));case"number":return jsx(NumberValue,Object.assign({},inputProps,{value:value}));case"boolean":return jsx(BooleanValue,Object.assign({},inputProps,{value:value}));case"null":return jsx(NullValue,Object.assign({},inputProps));case"object":return jsx(ObjectValue,Object.assign({},inputProps,{value:value}));case"array":return jsx(ArrayValue,Object.assign({},inputProps));default:return jsx(InvalidValue,Object.assign({},inputProps))}},convertValue=(value,type,defaultNewKey,defaultString)=>{switch(type){case"string":return null!=defaultString?defaultString:String(value);case"number":{const n=Number(value);return isNaN(n)?0:n}case"boolean":return!!value;case"null":return null;case"object":return{[defaultNewKey]:value};case"array":return[value];default:return String(value)}},CollectionNode=_a=>{var{data:data,nodeData:incomingNodeData,parentData:parentData,showCollectionCount:showCollectionCount}=_a,props=__rest(_a,["data","nodeData","parentData","showCollectionCount"]);const{getStyles:getStyles}=useTheme(),{collapseState:collapseState,setCollapseState:setCollapseState,doesPathMatch:doesPathMatch,currentlyEditingElement:currentlyEditingElement,setCurrentlyEditingElement:setCurrentlyEditingElement,areChildrenBeingEdited:areChildrenBeingEdited}=useTreeState(),{onEdit:onEdit,onAdd:onAdd,onDelete:onDelete,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,collapseFilter:collapseFilter,enableClipboard:enableClipboard,searchFilter:searchFilter,searchText:searchText,indent:indent,keySort:keySort,showArrayIndices:showArrayIndices,defaultValue:defaultValue,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,[stringifiedValue,setStringifiedValue]=useState(JSON.stringify(data,null,2)),[error,setError]=useState(null),startCollapsed=collapseFilter(incomingNodeData),[collapsed,setCollapsed]=useState(startCollapsed),nodeData=Object.assign(Object.assign({},incomingNodeData),{collapsed:collapsed}),{path:path,key:name,size:size}=nodeData,pathString=toPathString(path),hasBeenOpened=useRef(!startCollapsed),[isAnimating,setIsAnimating]=useState(!1);useEffect((()=>{setStringifiedValue(JSON.stringify(data,null,2))}),[data]),useEffect((()=>{const isCollapsed=collapseFilter(nodeData);hasBeenOpened.current=!isCollapsed,setCollapsed(isCollapsed)}),[collapseFilter]),useEffect((()=>{null!==collapseState&&doesPathMatch(path)&&(hasBeenOpened.current=!0,setCollapsed(collapseState.open))}),[collapseState]);const canEdit=useMemo((()=>!restrictEditFilter(nodeData)),[nodeData]),canDelete=useMemo((()=>!restrictDeleteFilter(nodeData)),[nodeData]),canAdd=useMemo((()=>!restrictAddFilter(nodeData)),[nodeData]),canEditKey=null!==parentData&&canEdit&&canAdd&&canDelete,getDefaultNewValue=useMemo((()=>nodeData=>"function"!=typeof defaultValue?defaultValue:defaultValue(nodeData)),[defaultValue]),{CustomNode:CustomNode,customNodeProps:customNodeProps,CustomWrapper:CustomWrapper,wrapperProps:wrapperProps={},hideKey:hideKey,showEditTools:showEditTools=!0,showOnEdit:showOnEdit,showOnView:showOnView,showCollectionWrapper:showCollectionWrapper=!0}=useMemo((()=>getCustomNode(customNodeDefinitions,nodeData)),[]);if(!filterNode("collection",nodeData,searchFilter,searchText)&&nodeData.level>0)return null;const collectionType=Array.isArray(data)?"array":"object",brackets="array"===collectionType?{open:"[",close:"]"}:{open:"{",close:"}"},transitionTime=getComputedStyle(document.documentElement).getPropertyValue("--jer-expand-transition-time"),handleKeyPress=e=>{"Enter"===e.key&&(e.metaKey||e.shiftKey||e.ctrlKey)?handleEdit():"Escape"===e.key&&handleCancel()},showError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{try{const value=JSON5.parse(stringifiedValue);if(setCurrentlyEditingElement(null),setError(null),JSON.stringify(value)===JSON.stringify(data))return;onEdit(value,path).then((error=>{error&&showError(error)}))}catch(_a){setError(translate("ERROR_INVALID_JSON",nodeData)),setTimeout((()=>setError(null)),2500),console.log("Invalid JSON")}},handleDelete=path.length>0?()=>{onDelete(data,path).then((result=>{result&&showError(result)}))}:void 0,handleCancel=()=>{setCurrentlyEditingElement(null),setError(null),setStringifiedValue(JSON.stringify(data,null,2))},isEditing=currentlyEditingElement===pathString,isEditingKey=currentlyEditingElement===`key_${pathString}`,isArray="number"==typeof path.slice(-1)[0],showCount="when-closed"===showCollectionCount?collapsed:showCollectionCount,showEditButtons=!isEditing&&showEditTools,showKey=(showArrayIndices||!isArray)&&!hideKey&&""!==name&&void 0!==name,showCustomNodeContents=CustomNode&&(isEditing&&showOnEdit||!isEditing&&showOnView),sortKeys=keySort&&"object"===collectionType,keyValueArray=Object.entries(data).map((([key,value])=>["array"===collectionType?Number(key):key,value]));sortKeys&&keyValueArray.sort("function"==typeof keySort?(a,b)=>keySort(a[0],b[0]):void 0);const numOfLines=JSON.stringify(data,null,2).replace(/\\n/g,"\n").split("\n").length,CollectionChildren=hasBeenOpened.current?isEditing?jsx("div",{className:"jer-collection-text-edit",children:jsxs("div",{children:[jsx(AutogrowTextArea,{className:"jer-collection-text-area",name:pathString,value:stringifiedValue,setValue:setStringifiedValue,isEditing:isEditing,handleKeyPress:handleKeyPress,styles:getStyles("input",nodeData)}),jsx("div",{className:"jer-collection-input-button-row",children:jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,nodeData:nodeData})})]})}):keyValueArray.map((([key,value],index)=>{const childNodeData={key:key,value:value,path:[...path,key],level:path.length+1,index:index,size:isCollection(value)?Object.keys(value).length:1,parentData:data,fullData:nodeData.fullData};return jsx("div",{className:"jer-collection-element",style:getStyles("collectionElement",childNodeData),children:isCollection(value)?jsx(CollectionNode,Object.assign({data:value,parentData:data,nodeData:childNodeData,showCollectionCount:showCollectionCount},props),key):jsx(ValueNodeWrapper,Object.assign({data:value,parentData:data,nodeData:childNodeData},props,{showLabel:"object"===collectionType||showArrayIndices}),key)},key)})):null,isCollapsed=!!showCollectionWrapper&&collapsed;isCollapsed||(hasBeenOpened.current=!0);const customNodeAllProps=Object.assign(Object.assign({},props),{data:data,value:data,parentData:parentData,nodeData:nodeData,setValue:val=>__awaiter(void 0,void 0,void 0,(function*(){return yield onEdit(val,path)})),handleEdit:handleEdit,handleCancel:handleCancel,handleKeyPress:handleKeyPress,isEditing:isEditing,setIsEditing:()=>setCurrentlyEditingElement(pathString),getStyles:getStyles}),CollectionContents=showCustomNodeContents?jsx(CustomNode,Object.assign({customNodeProps:customNodeProps},customNodeAllProps,{children:CollectionChildren})):CollectionChildren,KeyDisplay=isEditingKey?jsx("input",{className:"jer-input-text jer-key-edit",type:"text",name:pathString,defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setCurrentlyEditingElement(null),name===newKey)return;if(!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}):jsx("span",{className:"jer-key-text",style:getStyles("property",nodeData),onDoubleClick:()=>canEditKey&&setCurrentlyEditingElement(`key_${pathString}`),children:showKey?`${name}:`:null}),EditButtonDisplay=showEditButtons&&jsx(EditButtons,{startEdit:canEdit?()=>{hasBeenOpened.current=!0,setCurrentlyEditingElement(pathString),setCollapsed(!1)}:void 0,handleAdd:canAdd?key=>{setCollapsed(!1);const newValue=getDefaultNewValue(nodeData);"array"===collectionType?onAdd(newValue,[...path,data.length]).then((error=>{error&&showError(error)})):key in data?showError(translate("ERROR_KEY_EXISTS",nodeData)):onAdd(newValue,[...path,key]).then((error=>{error&&showError(error)}))}:void 0,handleDelete:canDelete?handleDelete:void 0,enableClipboard:enableClipboard,type:collectionType,nodeData:nodeData,translate:translate}),CollectionNodeComponent=jsxs("div",{className:"jer-component jer-collection-component",style:Object.assign({marginLeft:(0===path.length?0:indent/2)+"em"},getStyles("collection",nodeData)),children:[showCollectionWrapper?jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[jsxs("div",{className:"jer-collection-name",children:[jsx("div",{className:"jer-collapse-icon",onClick:e=>(e=>{if(e.getModifierState("Alt"))return hasBeenOpened.current=!0,void setCollapseState({open:!collapsed,path:path});currentlyEditingElement&&currentlyEditingElement.includes(pathString)||(setIsAnimating(!0),hasBeenOpened.current=!0,setCollapsed(!collapsed),setTimeout((()=>setIsAnimating(!1)),500))})(e),children:jsx(Icon,{name:"chevron",rotate:collapsed,nodeData:nodeData})}),KeyDisplay,!isEditing&&jsx("span",{className:"jer-brackets jer-bracket-open",style:getStyles("bracket",nodeData),children:brackets.open})]}),!isEditing&&showCount&&jsx("div",{className:"jer-collection-item-count"+(showCount?" jer-visible":" jer-hidden"),style:getStyles("itemCount",nodeData),children:1===size?translate("ITEM_SINGLE",Object.assign(Object.assign({},nodeData),{size:1}),1):translate("ITEMS_MULTIPLE",nodeData,size)}),jsx("div",{className:"jer-brackets"+(isCollapsed?" jer-visible":" jer-hidden"),style:getStyles("bracket",nodeData),children:brackets.close}),EditButtonDisplay]}):hideKey?jsx(Fragment,{}):jsxs("div",{className:"jer-collection-header-row",style:{position:"relative"},children:[KeyDisplay,EditButtonDisplay]}),jsxs("div",{className:"jer-collection-inner",style:Object.assign({maxHeight:isCollapsed?0:areChildrenBeingEdited(pathString)?void 0:3*numOfLines+"em",overflowY:isCollapsed||isAnimating?"hidden":"visible",transition:`max-height ${transitionTime}`},getStyles("collectionInner",nodeData)),children:[CollectionContents,jsx("div",{className:isEditing?"jer-collection-error-row":"jer-collection-error-row-edit",children:error&&jsx("span",{className:"jer-error-slug",style:getStyles("error",nodeData),children:error})}),!isEditing&&showCollectionWrapper&&jsx("div",{className:"jer-brackets jer-bracket-outside",style:getStyles("bracket",nodeData),children:brackets.close})]})]});return CustomWrapper?jsx(CustomWrapper,Object.assign({customNodeProps:wrapperProps},customNodeAllProps,{children:CollectionNodeComponent})):CollectionNodeComponent},localisedStrings={ITEM_SINGLE:"{{count}} item",ITEMS_MULTIPLE:"{{count}} items",KEY_NEW:"Enter new key",ERROR_KEY_EXISTS:"Key already exists",ERROR_INVALID_JSON:"Invalid JSON",ERROR_UPDATE:"Update unsuccessful",ERROR_DELETE:"Delete unsuccessful",ERROR_ADD:"Adding node unsuccessful",DEFAULT_STRING:"New data!",DEFAULT_NEW_KEY:"key"},getTranslateFunction=(translations,customText)=>(key,customTextData,count)=>((translations,customText,customTextData,key,count)=>{if(customText[key]){const output=customText[key](customTextData);if(null!==output)return output}const string=key in translations?translations[key]:localisedStrings[key];return void 0===count?string:null==string?void 0:string.replace("{{count}}",String(count))})(translations,customText,customTextData,key,count),Editor=({data:srcData,rootName:rootName="root",onUpdate:onUpdate=(()=>{}),onEdit:srcEdit=onUpdate,onDelete:srcDelete=onUpdate,onAdd:srcAdd=onUpdate,onChange:onChange,enableClipboard:enableClipboard=!0,theme:theme="default",icons:icons,indent:indent=3,collapse:collapse=!1,showCollectionCount:showCollectionCount=!0,restrictEdit:restrictEdit=!1,restrictDelete:restrictDelete=!1,restrictAdd:restrictAdd=!1,restrictTypeSelection:restrictTypeSelection=!1,searchFilter:searchFilterInput,searchText:searchText,searchDebounceTime:searchDebounceTime=350,keySort:keySort=!1,showArrayIndices:showArrayIndices=!0,showStringQuotes:showStringQuotes=!0,defaultValue:defaultValue=null,minWidth:minWidth=250,maxWidth:maxWidth="min(600px, 90vw)",rootFontSize:rootFontSize,stringTruncate:stringTruncate=250,translations:translations={},className:className,id:id,customText:customText={},customNodeDefinitions:customNodeDefinitions=[]})=>{const{getStyles:getStyles,setTheme:setTheme,setIcons:setIcons}=useTheme(),{setCollapseState:setCollapseState}=useTreeState(),collapseFilter=useCallback(getFilterFunction(collapse),[collapse]),translate=useCallback(getTranslateFunction(translations,customText),[translations,customText]),[debouncedSearchText,setDebouncedSearchText]=useState(searchText),[data,setData]=useState(srcData);useEffect((()=>{theme&&setTheme(theme),icons&&setIcons(icons)}),[theme,icons]),useEffect((()=>{setCollapseState(null),setData(srcData)}),[srcData]),useEffect((()=>{const debounce=setTimeout((()=>setDebouncedSearchText(searchText)),searchDebounceTime);return()=>clearTimeout(debounce)}),[searchText,searchDebounceTime]);const nodeData={key:rootName,path:[],level:0,index:0,value:data,size:Object.keys(data).length,parentData:null,fullData:data},restrictEditFilter=getFilterFunction(restrictEdit),restrictDeleteFilter=getFilterFunction(restrictDelete),restrictAddFilter=getFilterFunction(restrictAdd),searchFilter=getSearchFilter(searchFilterInput),otherProps={name:rootName,nodeData:nodeData,onEdit:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"update");if(currentValue===newValue)return;setData(newData);const result=yield srcEdit({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return void 0!==result?(setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result):void 0})),onDelete:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"delete");setData(newData);const result=yield srcDelete({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onAdd:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"add");setData(newData);const result=yield srcAdd({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});if(void 0!==result)return setData(currentData),!1===result?translate("ERROR_UPDATE",nodeData):result})),onChange:onChange,showCollectionCount:showCollectionCount,collapseFilter:collapseFilter,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,restrictTypeSelection:restrictTypeSelection,searchFilter:searchFilter,searchText:debouncedSearchText,enableClipboard:enableClipboard,keySort:keySort,showArrayIndices:showArrayIndices,showStringQuotes:showStringQuotes,indent:indent,defaultValue:defaultValue,stringTruncate:stringTruncate,translate:translate,customNodeDefinitions:customNodeDefinitions,parentData:null},mainContainerStyles=Object.assign(Object.assign({},getStyles("container",nodeData)),{minWidth:minWidth,maxWidth:maxWidth});return mainContainerStyles.fontSize=null!=rootFontSize?rootFontSize:mainContainerStyles.fontSize,jsx("div",{id:id,className:"jer-editor-container "+className,style:mainContainerStyles,children:isCollection(data)?jsx(CollectionNode,Object.assign({data:data},otherProps)):jsx(ValueNodeWrapper,Object.assign({data:data,showLabel:!0},otherProps))})},JsonEditor=props=>jsx(ThemeProvider,{children:jsx(TreeStateProvider,{children:jsx(Editor,Object.assign({},props))})}),updateDataObject=(data,path,newValue,action)=>{if(0===path.length)return{currentData:data,newData:newValue,currentValue:data,newValue:newValue};const currentValue="add"!==action?extract(data,path):void 0;return{currentData:data,newData:assign(clone(data),path,newValue,{remove:"delete"===action}),currentValue:currentValue,newValue:"delete"!==action?newValue:void 0}},getFilterFunction=propValue=>"boolean"==typeof propValue?()=>propValue:"number"==typeof propValue?({level:level})=>level>=propValue:propValue,getSearchFilter=searchFilterInput=>{if(void 0!==searchFilterInput)return"value"===searchFilterInput?matchNode:"key"===searchFilterInput?matchNodeKey:"all"===searchFilterInput?(inputData,searchText)=>matchNode(inputData,searchText)||matchNodeKey(inputData,searchText):searchFilterInput},LinkCustomComponent=({value:value,setIsEditing:setIsEditing,getStyles:getStyles,customNodeProps:customNodeProps,nodeData:nodeData})=>{var _a,_b;const stringTruncateLength=null!==(_a=null==customNodeProps?void 0:customNodeProps.stringTruncate)&&void 0!==_a?_a:100,styles=getStyles("string",nodeData);return jsx("div",{onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string jer-hyperlink",style:styles,children:jsxs("a",{href:value,target:"_blank",rel:"noreferrer",style:{color:null!==(_b=styles.color)&&void 0!==_b?_b:void 0},children:['"',truncate(value,stringTruncateLength),'"']})})},LinkCustomNodeDefinition={condition:({value:value})=>"string"==typeof value&&/^https?:\/\/.+\..+$/.test(value),element:LinkCustomComponent,showOnView:!0,showOnEdit:!1};export{IconAdd,IconCancel,IconChevron,IconCopy,IconDelete,IconEdit,IconOk,JsonEditor,LinkCustomComponent,LinkCustomNodeDefinition,isCollection,matchNode,matchNodeKey,themes,truncate};

2

package.json
{
"name": "json-edit-react",
"version": "1.10.2",
"version": "1.11.0",
"description": "React component for editing or viewing JSON/object data",

@@ -5,0 +5,0 @@ "main": "build/index.cjs.js",

8

README.md

@@ -122,2 +122,3 @@ # json-edit-react

| `maxWidth` | `number\|string` (CSS value) | `600` | Maximum width for the editor container. |
| `rootFontSize` | `number\|string` (CSS value) | `16px` | The "base" font size from which all other sizings are derived (in `em`s). By changing this you will scale the entire component. container. |
| `customNodeDefinitions` | `CustomNodeDefinition[]` | | You can provide customised components to override specific nodes in the data tree, according to a condition function. See see [Custom nodes](#custom-nodes) for more detail. (A simple custom component to turn url strings into active links is provided in the main package -- see [here](#active-hyperlinks)) |

@@ -403,3 +404,3 @@ | `customText` | `CustomTextDefinitions` | | In addition to [localising the component](#localisation) text strings, you can also *dynamically* alter it, depending on the data. See [Custom Text](#custom-text) for more detail. |

Internally, all sizing and spacing is done in `em`s, never `px`. This makes scaling a lot easier — just change the font-size of the main container (either via the `className` prop or in the `container` prop of the theme) (or its parent), and watch the *whole* component scale accordingly.
Internally, all sizing and spacing is done in `em`s, never `px` (aside from the [`rootFontSize`](#props-overview), which sets the "base" size). This makes scaling a lot easier — just change the `rootFontSize` prop (or set `fontSize` on the main container via targeting the class, or tweaking the [theme](#themes--styles)), and watch the *whole* component scale accordingly.

@@ -588,3 +589,6 @@ ### Icons

- **1.10.0**:
- **1.11.0**:
- Improve CSS definitions to prevent properties from being overridden by the host environment's CSS
- Add `rootFontSize` prop to set the "base" size for the component
- **1.10.2**:
- Fixes for text wrapping and content overlaps when values and inputs contain very long strings (#57, #58)

@@ -591,0 +595,0 @@ - Only allow one element to be edited at a time, and prevent collapsing when an inner element is being edited.

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc