json-edit-react 0.9.1 → 0.9.3

package/README.md

@@ -335,6 +335,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
-- **0.9.0**: Initial release
+- **0.9.3**: Bundle as ES6 module
 - **0.9.1**: Export more Types from the package
+- **0.9.0**: Initial release
 

package/build/index.cjs.js

@@ -12,6 +12,45 @@ var fi = require('react-icons/fi');
 var ti = require('react-icons/ti');
 var fa = require('react-icons/fa');
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (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) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    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) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 var e=[],t=[];function n(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}}
 
 var css = ":root {\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.2s;\n  --jer-highlight-color: #b3d8ff;\n}\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\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.fb-collection-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-collection-item-count {\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}\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  width: 90%;\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}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\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-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n/* To prevent over-writing by UI libraries */\n.jer-type-select {\n  border: revert;\n  border-radius: revert;\n  padding: revert;\n  font-family: revert;\n  font-size: revert;\n  color: revert;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\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-input-buttons {\n}\n\n.jer-icon-wrapper {\n  height: 1.4em;\n  opacity: 1;\n  transition: 0.2s;\n}\n\n.jer-icon-wrapper:active {\n  position: relative;\n  top: 0.07em;\n}\n\n.jer-icon-wrapper:hover {\n  opacity: 0.85;\n  transition: 0.2s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse {\n  position: relative;\n}\n\n.jer-copy-pulse:hover {\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-icon {\n  /* font-size: '2em'; */\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
@@ -273,7 +312,7 @@ const ThemeProvider = ({ children }) => {
     const [styles, setStyles] = react.useState(emptyStyleObject);
     const [icons, setIcons] = react.useState({});
     const setTheme = (theme) => setStyles(compileStyles(theme));
-    return (jsxRuntime.jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
+    return (jsxRuntime.jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
 };
 const useTheme = () => react.useContext(ThemeProviderContext);
 const compileStyles = (themeInput) => {
@@ -286,23 +325,25 @@ const compileStyles = (themeInput) => {
     return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
 };
 const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
+    var _a, _b, _c, _d;
     const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
         const { fragments, styles } = theme;
         const compiledStyles = {};
         Object.entries(styles).forEach(([key, value]) => {
             const elements = Array.isArray(value) ? value : [value];
             const cssStyles = elements.reduce((acc, curr) => {
+                var _a;
                 if (typeof curr === 'string') {
-                    const style = fragments?.[curr] ?? curr;
+                    const style = (_a = fragments === null || fragments === void 0 ? void 0 : fragments[curr]) !== null && _a !== void 0 ? _a : curr;
                     switch (typeof style) {
                         case 'string':
-                            return { ...acc, [defaultStyleProperties[key]]: style };
+                            return Object.assign(Object.assign({}, acc), { [defaultStyleProperties[key]]: style });
                         default:
-                            return { ...acc, ...style };
+                            return Object.assign(Object.assign({}, acc), style);
                     }
                 }
                 else
-                    return { ...acc, ...curr };
+                    return Object.assign(Object.assign({}, acc), curr);
             }, {});
             compiledStyles[key] = cssStyles;
         });
@@ -310,16 +351,12 @@ const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) =
     });
     const finalStyles = {};
     Object.keys(defaultTheme.styles).forEach((key) => {
-        finalStyles[key] = {
-            ...defaultStyles[key],
-            ...baseStyles[key],
-            ...overrideStyles[key],
-        };
+        finalStyles[key] = Object.assign(Object.assign(Object.assign({}, defaultStyles[key]), baseStyles[key]), overrideStyles[key]);
     });
-    if (finalStyles?.inputHighlight?.backgroundColor)
-        document.documentElement.style.setProperty('--jer-highlight-color', finalStyles?.inputHighlight?.backgroundColor);
-    if (finalStyles?.iconCopy?.color)
-        document.documentElement.style.setProperty('--jer-icon-copy-color', finalStyles?.iconCopy?.color);
+    if ((_a = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _a === void 0 ? void 0 : _a.backgroundColor)
+        document.documentElement.style.setProperty('--jer-highlight-color', (_b = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _b === void 0 ? void 0 : _b.backgroundColor);
+    if ((_c = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _c === void 0 ? void 0 : _c.color)
+        document.documentElement.style.setProperty('--jer-icon-copy-color', (_d = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _d === void 0 ? void 0 : _d.color);
     return finalStyles;
 };
 const isStyleObject = (overrideObject) => {
@@ -349,25 +386,10 @@ const defaultStyleProperties = {
 const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
     const { styles } = useTheme();
     const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
-    return (jsxRuntime.jsxs("div", { style: { display: 'grid' }, children: [jsxRuntime.jsx("textarea", { style: {
-                    height: 'auto',
-                    gridArea: '1 / 1 / 2 / 2',
-                    overflowY: 'auto',
-                    ...styles.input,
-                }, rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ style: { display: 'grid' } }, { children: [jsxRuntime.jsx("textarea", { style: Object.assign({ height: 'auto', gridArea: '1 / 1 / 2 / 2', overflowY: 'auto' }, styles.input), rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
                     if (value.length < 40)
                         e.target.select();
-                }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", { className: className, style: {
-                    visibility: 'hidden',
-                    height: 'auto',
-                    gridArea: '1 / 1 / 2 / 2',
-                    color: 'red',
-                    opacity: 0.9,
-                    whiteSpace: 'pre-wrap',
-                    overflow: 'clip',
-                    border: '1px solid transparent',
-                    ...styles.input,
-                }, children: dummyValue })] }));
+                }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", Object.assign({ className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input) }, { children: dummyValue }))] })));
 };
 
 const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
@@ -380,10 +402,10 @@ const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
             handleCancel();
     };
     const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxRuntime.jsxs("span", { children: [line, index < arr.length - 1 ? jsxRuntime.jsx("br", {}) : null] }, index)));
-    return isEditing ? (jsxRuntime.jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxRuntime.jsxs("div", { onDoubleClick: () => setIsEditing(true), onClick: (e) => {
+    return isEditing ? (jsxRuntime.jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxRuntime.jsxs("div", Object.assign({ onDoubleClick: () => setIsEditing(true), onClick: (e) => {
             if (e.getModifierState('Control') || e.getModifierState('Meta'))
                 setIsEditing(true);
-        }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
+        }, className: "jer-value-string", style: styles.string }, { children: ["\"", breakString(truncate(value, stringTruncate)), "\""] })));
 };
 const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
     const { styles } = useTheme();
@@ -393,47 +415,45 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
         else if (e.key === 'Escape')
             handleCancel();
     };
-    const validateNumber = (input) => {
-        return input.replace(/[^0-9.-]/g, '');
-    };
-    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(validateNumber(e.target.value)), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsxRuntime.jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number, children: value }));
+    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsxRuntime.jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
 };
 const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsxRuntime.jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean, children: String(value) }));
+    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsxRuntime.jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean }, { children: String(value) })));
 };
 const NullValue = ({ value, isEditing, setIsEditing }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsxRuntime.jsx("div", { className: "jer-input-null", children: "null" })) : (jsxRuntime.jsx("div", { onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null, children: String(value) }));
+    return isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsxRuntime.jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
 };
 const ObjectValue = () => {
-    return jsxRuntime.jsx("span", { className: "jer-value-object", children: '{ }' });
+    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
 };
 const ArrayValue = ({ value }) => {
-    return jsxRuntime.jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
+    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
 };
 const InvalidValue = () => {
-    return jsxRuntime.jsx("span", { className: "jer-value-invalid", children: "Invalid value" });
+    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
 };
 
 const Icon = ({ name, rotate }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const { styles, icons } = useTheme();
     const commonProps = { size: '1.4em', className: 'jer-icon' };
     switch (name) {
         case 'add':
-            return icons?.add ?? jsxRuntime.jsx(bi.BiPlusCircle, { ...commonProps, style: styles.iconAdd });
+            return (_a = icons === null || icons === void 0 ? void 0 : icons.add) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(bi.BiPlusCircle, Object.assign({}, commonProps, { style: styles.iconAdd }));
         case 'edit':
-            return icons?.edit ?? jsxRuntime.jsx(bi.BiEdit, { ...commonProps, style: styles.iconEdit });
+            return (_b = icons === null || icons === void 0 ? void 0 : icons.edit) !== null && _b !== void 0 ? _b : jsxRuntime.jsx(bi.BiEdit, Object.assign({}, commonProps, { style: styles.iconEdit }));
         case 'delete':
-            return (icons?.delete ?? jsxRuntime.jsx(md.MdDeleteForever, { ...commonProps, style: styles.iconDelete, size: "1.5em" }));
+            return ((_c = icons === null || icons === void 0 ? void 0 : icons.delete) !== null && _c !== void 0 ? _c : jsxRuntime.jsx(md.MdDeleteForever, Object.assign({}, commonProps, { style: styles.iconDelete, size: "1.5em" })));
         case 'copy':
-            return icons?.copy ?? jsxRuntime.jsx(hi.HiOutlineClipboardCopy, { ...commonProps, style: styles.iconCopy });
+            return (_d = icons === null || icons === void 0 ? void 0 : icons.copy) !== null && _d !== void 0 ? _d : jsxRuntime.jsx(hi.HiOutlineClipboardCopy, Object.assign({}, commonProps, { style: styles.iconCopy }));
         case 'ok':
-            return (icons?.ok ?? (jsxRuntime.jsx(fi.FiCheckCircle, { ...commonProps, style: { fontSize: '90%', ...styles.iconOk } })));
+            return ((_e = icons === null || icons === void 0 ? void 0 : icons.ok) !== null && _e !== void 0 ? _e : (jsxRuntime.jsx(fi.FiCheckCircle, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '90%' }, styles.iconOk) }))));
         case 'cancel':
-            return (icons?.cancel ?? (jsxRuntime.jsx(ti.TiCancel, { ...commonProps, style: { fontSize: '130%', ...styles.iconCancel } })));
+            return ((_f = icons === null || icons === void 0 ? void 0 : icons.cancel) !== null && _f !== void 0 ? _f : (jsxRuntime.jsx(ti.TiCancel, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '130%' }, styles.iconCancel) }))));
         case 'chevron':
-            return (icons?.chevron ?? (jsxRuntime.jsx(fa.FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
+            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsxRuntime.jsx(fa.FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
         default:
             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
@@ -473,22 +493,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
         if (typeof enableClipboard === 'function')
             enableClipboard({ value, path, key: name, type });
     };
-    return (jsxRuntime.jsxs("div", { className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined, children: [enableClipboard && (jsxRuntime.jsx("div", { onClick: handleCopy, className: "jer-copy-pulse", children: jsxRuntime.jsx(Icon, { name: "copy" }) })), startEdit && (jsxRuntime.jsx("div", { onClick: startEdit, children: jsxRuntime.jsx(Icon, { name: "edit" }) })), handleDelete && (jsxRuntime.jsx("div", { onClick: handleDelete, children: jsxRuntime.jsx(Icon, { name: "delete" }) })), handleAdd && (jsxRuntime.jsx("div", { onClick: () => {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsxRuntime.jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsxRuntime.jsx(Icon, { name: "copy" }) }))), startEdit && (jsxRuntime.jsx("div", Object.assign({ onClick: startEdit }, { children: jsxRuntime.jsx(Icon, { name: "edit" }) }))), handleDelete && (jsxRuntime.jsx("div", Object.assign({ onClick: handleDelete }, { children: jsxRuntime.jsx(Icon, { name: "delete" }) }))), handleAdd && (jsxRuntime.jsx("div", Object.assign({ onClick: () => {
                     if (type === 'object')
                         setIsAdding(true);
                     else
                         handleAdd('');
-                }, children: jsxRuntime.jsx(Icon, { name: "add" }) })), isAdding && handleAdd && type === 'object' && (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: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { ...styles.input } }), jsxRuntime.jsx(InputButtons, { onOk: () => {
+                } }, { children: jsxRuntime.jsx(Icon, { name: "add" }) }))), isAdding && handleAdd && type === 'object' && (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: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: Object.assign({}, styles.input) }), jsxRuntime.jsx(InputButtons, { onOk: () => {
                             if (!!newKey) {
                                 setIsAdding(false);
                                 handleAdd(newKey);
                             }
                         }, onCancel: () => {
                             setIsAdding(false);
-                        } })] }))] }));
+                        } })] }))] })));
 };
 const InputButtons = ({ onOk, onCancel }) => {
-    return (jsxRuntime.jsxs("div", { className: "jer-confirm-buttons", children: [jsxRuntime.jsx("div", { onClick: onOk, children: jsxRuntime.jsx(Icon, { name: "ok" }) }), jsxRuntime.jsx("div", { onClick: onCancel, children: jsxRuntime.jsx(Icon, { name: "cancel" }) })] }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-confirm-buttons" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: onOk }, { children: jsxRuntime.jsx(Icon, { name: "ok" }) })), jsxRuntime.jsx("div", Object.assign({ onClick: onCancel }, { children: jsxRuntime.jsx(Icon, { name: "cancel" }) }))] })));
 };
 const stringifyPath = (path) => path.reduce((str, part) => {
     if (typeof part === 'number')
@@ -569,11 +589,8 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         path,
         stringTruncate,
     };
-    return (jsxRuntime.jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxRuntime.jsxs("div", { className: "jer-value-main-row", children: [showArrayIndices && (jsxRuntime.jsxs("label", { htmlFor: path.join('.'), className: "jer-object-key", style: {
-                        ...styles.property,
-                        minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
-                    }, children: [name, ":", ' '] })), jsxRuntime.jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
-                    !error && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsxRuntime.jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: DataTypes.map((type) => (jsxRuntime.jsx("option", { value: type, children: type }, type))) })), !isEditing && error && (jsxRuntime.jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] }) }));
+    return (jsxRuntime.jsx("div", Object.assign({ className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` } }, { children: jsxRuntime.jsxs("div", Object.assign({ className: "jer-value-main-row" }, { children: [showArrayIndices && (jsxRuntime.jsxs("label", Object.assign({ htmlFor: path.join('.'), className: "jer-object-key", style: Object.assign(Object.assign({}, styles.property), { minWidth: `${Math.min(String(name).length + 1, 5)}ch` }) }, { children: [name, ":", ' '] }))), jsxRuntime.jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
+                    !error && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsxRuntime.jsx("select", Object.assign({ name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType }, { children: DataTypes.map((type) => (jsxRuntime.jsx("option", Object.assign({ value: type }, { children: type }), type))) }))), !isEditing && error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] })) })));
 };
 const getDataType = (value) => {
     if (typeof value === 'string')
@@ -590,19 +607,19 @@ const getInputComponent = (dataType, inputProps) => {
     const value = inputProps.value;
     switch (dataType) {
         case 'string':
-            return jsxRuntime.jsx(StringValue, { ...inputProps, value: value });
+            return jsxRuntime.jsx(StringValue, Object.assign({}, inputProps, { value: value }));
         case 'number':
-            return jsxRuntime.jsx(NumberValue, { ...inputProps, value: value });
+            return jsxRuntime.jsx(NumberValue, Object.assign({}, inputProps, { value: value }));
         case 'boolean':
-            return jsxRuntime.jsx(BooleanValue, { ...inputProps, value: value });
+            return jsxRuntime.jsx(BooleanValue, Object.assign({}, inputProps, { value: value }));
         case 'null':
-            return jsxRuntime.jsx(NullValue, { ...inputProps });
+            return jsxRuntime.jsx(NullValue, Object.assign({}, inputProps));
         case 'object':
-            return jsxRuntime.jsx(ObjectValue, { ...inputProps });
+            return jsxRuntime.jsx(ObjectValue, Object.assign({}, inputProps));
         case 'array':
-            return jsxRuntime.jsx(ArrayValue, { ...inputProps });
+            return jsxRuntime.jsx(ArrayValue, Object.assign({}, inputProps));
         default:
-            return jsxRuntime.jsx(InvalidValue, { ...inputProps });
+            return jsxRuntime.jsx(InvalidValue, Object.assign({}, inputProps));
     }
 };
 const convertValue = (value, type) => {
@@ -626,7 +643,8 @@ const convertValue = (value, type) => {
 };
 
 const isCollection = (value) => value !== null && typeof value == 'object';
-const CollectionNode = ({ data, path, name, ...props }) => {
+const CollectionNode = (_a) => {
+    var { data, path, name } = _a, props = __rest(_a, ["data", "path", "name"]);
     const { styles } = useTheme();
     const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
     const [isEditing, setIsEditing] = react.useState(false);
@@ -665,7 +683,7 @@ const CollectionNode = ({ data, path, name, ...props }) => {
                     showError(error);
             });
         }
-        catch {
+        catch (_a) {
             setError(translate('ERROR_INVALID_JSON'));
             setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
             console.log('Invalid JSON');
@@ -714,21 +732,21 @@ const CollectionNode = ({ data, path, name, ...props }) => {
     if (keySort && collectionType === 'object')
         keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
     const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    return (jsxRuntime.jsxs("div", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: [jsxRuntime.jsxs("div", { className: "jer-collection-header-row", children: [jsxRuntime.jsx("div", { onClick: () => {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: () => {
                             if (!isEditing)
                                 setCollapsed(!collapsed);
-                        }, children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxRuntime.jsxs("div", { className: "jer-collection-name", children: [jsxRuntime.jsx("span", { style: styles.property, children: showLabel ? `${name}:` : null }), jsxRuntime.jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open })] }), jsxRuntime.jsx("div", { className: "jer-collection-item-count", style: styles.itemCount, children: collectionSize === 1
+                        } }, { children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsxRuntime.jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), jsxRuntime.jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open }))] })), jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
                             ? translate('ITEM_SINGLE', 1)
-                            : translate('ITEMS_MULTIPLE', collectionSize) }), collapsed && (jsxRuntime.jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
+                            : translate('ITEMS_MULTIPLE', collectionSize) })), collapsed && (jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close }))), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
                             ? () => {
                                 setIsEditing(true);
                                 setCollapsed(false);
                             }
-                            : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] }), jsxRuntime.jsxs("div", { className: 'jer-collection-inner', style: {
+                            : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'jer-collection-inner', style: {
                     maxHeight: collapsed ? 0 : `${numOfLines * 1.6}em`,
                     overflowY: collapsed ? 'hidden' : 'visible',
                     transition: `max-height ${transitionTime}`,
-                }, children: [isEditing ? (jsxRuntime.jsxs("div", { className: "jer-collection-text-edit", children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", { className: "jer-collection-input-button-row", children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) })] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, { data: value, path: [...path, key], name: key, ...props }, key)) : (jsxRuntime.jsx(ValueNodeWrapper, { data: value, path: [...path, key], name: key, ...props, showArrayIndices: collectionType === 'object' ? true : showArrayIndices }, key)) }, key))) })), jsxRuntime.jsx("div", { className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit', children: error && (jsxRuntime.jsx("span", { className: "jer-error-slug", style: styles.error, children: error })) })] }), !collapsed && (jsxRuntime.jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close }))] }));
+                } }, { children: [isEditing ? (jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-text-edit" }, { children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsxRuntime.jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) }))] })), !collapsed && (jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
 };
 
 const localisedStrings = {
@@ -743,7 +761,7 @@ const localisedStrings = {
 };
 const translate = (translations, key, count) => {
     const string = key in translations ? translations[key] : localisedStrings[key];
-    return count === undefined ? string : string?.replace('{{count}}', String(count));
+    return count === undefined ? string : string === null || string === void 0 ? void 0 : string.replace('{{count}}', String(count));
 };
 const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
 
@@ -761,10 +779,10 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         if (icons)
             setIcons(icons);
     }, [theme, icons]);
-    const onEdit = async (value, path) => {
+    const onEdit = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
         if (srcEdit) {
-            const result = await srcEdit({
+            const result = yield srcEdit({
                 currentData,
                 newData,
                 currentValue,
@@ -780,11 +798,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
-    const onDelete = async (value, path) => {
+    });
+    const onDelete = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
         if (srcDelete) {
-            const result = await srcDelete({
+            const result = yield srcDelete({
                 currentData,
                 newData,
                 currentValue,
@@ -800,11 +818,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
-    const onAdd = async (value, path) => {
+    });
+    const onAdd = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
         if (srcAdd) {
-            const result = await srcAdd({
+            const result = yield srcAdd({
                 currentData,
                 newData,
                 currentValue,
@@ -820,7 +838,7 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
+    });
     const restrictEditFilter = getFilterFunction(restrictEdit);
     const restrictDeleteFilter = getFilterFunction(restrictDelete);
     const restrictAddFilter = getFilterFunction(restrictAdd);
@@ -843,9 +861,9 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
     };
     if (!styles)
         return null;
-    return (jsxRuntime.jsx("div", { className: 'jer-editor-container ' + className, style: { ...styles.container, minWidth, maxWidth }, children: isCollection(data) && jsxRuntime.jsx(CollectionNode, { data: data, path: [], ...otherProps }) }));
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }) }, { children: isCollection(data) && jsxRuntime.jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps)) })));
 };
-const JsonEditor = (props) => (jsxRuntime.jsx(ThemeProvider, { children: jsxRuntime.jsx(Editor, { ...props }) }));
+const JsonEditor = (props) => (jsxRuntime.jsx(ThemeProvider, { children: jsxRuntime.jsx(Editor, Object.assign({}, props)) }));
 const updateDataObject = (data, path, newValue, action) => {
     if (path.length === 0) {
         return {

package/build/index.d.ts

@@ -32,6 +32,7 @@ declare const localisedStrings: {
     ERROR_ADD: string;
 };
 type LocalisedStrings = typeof localisedStrings;
+type TranslateFunction = (key: keyof LocalisedStrings, count?: number) => string;
 
 interface JsonEditorProps {
     data: object;
@@ -95,4 +96,4 @@ type CompareFunction = (a: string, b: string) => number;
 
 declare const JsonEditor: React$1.FC<JsonEditorProps>;
 
-export { JsonEditor, Theme, ThemeInput, ThemeName, themes };
+export { CompareFunction, CopyFunction, FilterFunction, IconReplacements, JsonEditor, JsonEditorProps, LocalisedStrings, Theme, ThemeInput, ThemeName, TranslateFunction, UpdateFunction, themes };

package/build/index.esm.js

@@ -10,6 +10,45 @@ import { FiCheckCircle } from 'react-icons/fi';
 import { TiCancel } from 'react-icons/ti';
 import { FaChevronDown } from 'react-icons/fa';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (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) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    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) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 var e=[],t=[];function n(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}}
 
 var css = ":root {\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.2s;\n  --jer-highlight-color: #b3d8ff;\n}\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\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.fb-collection-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-collection-item-count {\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}\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  width: 90%;\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}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\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-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n/* To prevent over-writing by UI libraries */\n.jer-type-select {\n  border: revert;\n  border-radius: revert;\n  padding: revert;\n  font-family: revert;\n  font-size: revert;\n  color: revert;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\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-input-buttons {\n}\n\n.jer-icon-wrapper {\n  height: 1.4em;\n  opacity: 1;\n  transition: 0.2s;\n}\n\n.jer-icon-wrapper:active {\n  position: relative;\n  top: 0.07em;\n}\n\n.jer-icon-wrapper:hover {\n  opacity: 0.85;\n  transition: 0.2s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse {\n  position: relative;\n}\n\n.jer-copy-pulse:hover {\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-icon {\n  /* font-size: '2em'; */\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
@@ -271,7 +310,7 @@ const ThemeProvider = ({ children }) => {
     const [styles, setStyles] = useState(emptyStyleObject);
     const [icons, setIcons] = useState({});
     const setTheme = (theme) => setStyles(compileStyles(theme));
-    return (jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
+    return (jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
 };
 const useTheme = () => useContext(ThemeProviderContext);
 const compileStyles = (themeInput) => {
@@ -284,23 +323,25 @@ const compileStyles = (themeInput) => {
     return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
 };
 const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
+    var _a, _b, _c, _d;
     const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
         const { fragments, styles } = theme;
         const compiledStyles = {};
         Object.entries(styles).forEach(([key, value]) => {
             const elements = Array.isArray(value) ? value : [value];
             const cssStyles = elements.reduce((acc, curr) => {
+                var _a;
                 if (typeof curr === 'string') {
-                    const style = fragments?.[curr] ?? curr;
+                    const style = (_a = fragments === null || fragments === void 0 ? void 0 : fragments[curr]) !== null && _a !== void 0 ? _a : curr;
                     switch (typeof style) {
                         case 'string':
-                            return { ...acc, [defaultStyleProperties[key]]: style };
+                            return Object.assign(Object.assign({}, acc), { [defaultStyleProperties[key]]: style });
                         default:
-                            return { ...acc, ...style };
+                            return Object.assign(Object.assign({}, acc), style);
                     }
                 }
                 else
-                    return { ...acc, ...curr };
+                    return Object.assign(Object.assign({}, acc), curr);
             }, {});
             compiledStyles[key] = cssStyles;
         });
@@ -308,16 +349,12 @@ const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) =
     });
     const finalStyles = {};
     Object.keys(defaultTheme.styles).forEach((key) => {
-        finalStyles[key] = {
-            ...defaultStyles[key],
-            ...baseStyles[key],
-            ...overrideStyles[key],
-        };
+        finalStyles[key] = Object.assign(Object.assign(Object.assign({}, defaultStyles[key]), baseStyles[key]), overrideStyles[key]);
     });
-    if (finalStyles?.inputHighlight?.backgroundColor)
-        document.documentElement.style.setProperty('--jer-highlight-color', finalStyles?.inputHighlight?.backgroundColor);
-    if (finalStyles?.iconCopy?.color)
-        document.documentElement.style.setProperty('--jer-icon-copy-color', finalStyles?.iconCopy?.color);
+    if ((_a = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _a === void 0 ? void 0 : _a.backgroundColor)
+        document.documentElement.style.setProperty('--jer-highlight-color', (_b = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _b === void 0 ? void 0 : _b.backgroundColor);
+    if ((_c = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _c === void 0 ? void 0 : _c.color)
+        document.documentElement.style.setProperty('--jer-icon-copy-color', (_d = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _d === void 0 ? void 0 : _d.color);
     return finalStyles;
 };
 const isStyleObject = (overrideObject) => {
@@ -347,25 +384,10 @@ const defaultStyleProperties = {
 const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
     const { styles } = useTheme();
     const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
-    return (jsxs("div", { style: { display: 'grid' }, children: [jsx("textarea", { style: {
-                    height: 'auto',
-                    gridArea: '1 / 1 / 2 / 2',
-                    overflowY: 'auto',
-                    ...styles.input,
-                }, rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
+    return (jsxs("div", Object.assign({ style: { display: 'grid' } }, { children: [jsx("textarea", { style: Object.assign({ height: 'auto', gridArea: '1 / 1 / 2 / 2', overflowY: 'auto' }, styles.input), rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
                     if (value.length < 40)
                         e.target.select();
-                }, onKeyDown: handleKeyPress }), jsx("span", { className: className, style: {
-                    visibility: 'hidden',
-                    height: 'auto',
-                    gridArea: '1 / 1 / 2 / 2',
-                    color: 'red',
-                    opacity: 0.9,
-                    whiteSpace: 'pre-wrap',
-                    overflow: 'clip',
-                    border: '1px solid transparent',
-                    ...styles.input,
-                }, children: dummyValue })] }));
+                }, onKeyDown: handleKeyPress }), jsx("span", Object.assign({ className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input) }, { children: dummyValue }))] })));
 };
 
 const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
@@ -378,10 +400,10 @@ const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
             handleCancel();
     };
     const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxs("span", { children: [line, index < arr.length - 1 ? jsx("br", {}) : null] }, index)));
-    return isEditing ? (jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxs("div", { onDoubleClick: () => setIsEditing(true), onClick: (e) => {
+    return isEditing ? (jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxs("div", Object.assign({ onDoubleClick: () => setIsEditing(true), onClick: (e) => {
             if (e.getModifierState('Control') || e.getModifierState('Meta'))
                 setIsEditing(true);
-        }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
+        }, className: "jer-value-string", style: styles.string }, { children: ["\"", breakString(truncate(value, stringTruncate)), "\""] })));
 };
 const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
     const { styles } = useTheme();
@@ -391,47 +413,45 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
         else if (e.key === 'Escape')
             handleCancel();
     };
-    const validateNumber = (input) => {
-        return input.replace(/[^0-9.-]/g, '');
-    };
-    return isEditing ? (jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(validateNumber(e.target.value)), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number, children: value }));
+    return isEditing ? (jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
 };
 const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean, children: String(value) }));
+    return isEditing ? (jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean }, { children: String(value) })));
 };
 const NullValue = ({ value, isEditing, setIsEditing }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsx("div", { className: "jer-input-null", children: "null" })) : (jsx("div", { onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null, children: String(value) }));
+    return isEditing ? (jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
 };
 const ObjectValue = () => {
-    return jsx("span", { className: "jer-value-object", children: '{ }' });
+    return jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
 };
 const ArrayValue = ({ value }) => {
-    return jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
+    return jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
 };
 const InvalidValue = () => {
-    return jsx("span", { className: "jer-value-invalid", children: "Invalid value" });
+    return jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
 };
 
 const Icon = ({ name, rotate }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const { styles, icons } = useTheme();
     const commonProps = { size: '1.4em', className: 'jer-icon' };
     switch (name) {
         case 'add':
-            return icons?.add ?? jsx(BiPlusCircle, { ...commonProps, style: styles.iconAdd });
+            return (_a = icons === null || icons === void 0 ? void 0 : icons.add) !== null && _a !== void 0 ? _a : jsx(BiPlusCircle, Object.assign({}, commonProps, { style: styles.iconAdd }));
         case 'edit':
-            return icons?.edit ?? jsx(BiEdit, { ...commonProps, style: styles.iconEdit });
+            return (_b = icons === null || icons === void 0 ? void 0 : icons.edit) !== null && _b !== void 0 ? _b : jsx(BiEdit, Object.assign({}, commonProps, { style: styles.iconEdit }));
         case 'delete':
-            return (icons?.delete ?? jsx(MdDeleteForever, { ...commonProps, style: styles.iconDelete, size: "1.5em" }));
+            return ((_c = icons === null || icons === void 0 ? void 0 : icons.delete) !== null && _c !== void 0 ? _c : jsx(MdDeleteForever, Object.assign({}, commonProps, { style: styles.iconDelete, size: "1.5em" })));
         case 'copy':
-            return icons?.copy ?? jsx(HiOutlineClipboardCopy, { ...commonProps, style: styles.iconCopy });
+            return (_d = icons === null || icons === void 0 ? void 0 : icons.copy) !== null && _d !== void 0 ? _d : jsx(HiOutlineClipboardCopy, Object.assign({}, commonProps, { style: styles.iconCopy }));
         case 'ok':
-            return (icons?.ok ?? (jsx(FiCheckCircle, { ...commonProps, style: { fontSize: '90%', ...styles.iconOk } })));
+            return ((_e = icons === null || icons === void 0 ? void 0 : icons.ok) !== null && _e !== void 0 ? _e : (jsx(FiCheckCircle, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '90%' }, styles.iconOk) }))));
         case 'cancel':
-            return (icons?.cancel ?? (jsx(TiCancel, { ...commonProps, style: { fontSize: '130%', ...styles.iconCancel } })));
+            return ((_f = icons === null || icons === void 0 ? void 0 : icons.cancel) !== null && _f !== void 0 ? _f : (jsx(TiCancel, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '130%' }, styles.iconCancel) }))));
         case 'chevron':
-            return (icons?.chevron ?? (jsx(FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
+            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsx(FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
         default:
             return jsx(Fragment, {});
     }
@@ -471,22 +491,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
         if (typeof enableClipboard === 'function')
             enableClipboard({ value, path, key: name, type });
     };
-    return (jsxs("div", { className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined, children: [enableClipboard && (jsx("div", { onClick: handleCopy, className: "jer-copy-pulse", children: jsx(Icon, { name: "copy" }) })), startEdit && (jsx("div", { onClick: startEdit, children: jsx(Icon, { name: "edit" }) })), handleDelete && (jsx("div", { onClick: handleDelete, children: jsx(Icon, { name: "delete" }) })), handleAdd && (jsx("div", { onClick: () => {
+    return (jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsx(Icon, { name: "copy" }) }))), startEdit && (jsx("div", Object.assign({ onClick: startEdit }, { children: jsx(Icon, { name: "edit" }) }))), handleDelete && (jsx("div", Object.assign({ onClick: handleDelete }, { children: jsx(Icon, { name: "delete" }) }))), handleAdd && (jsx("div", Object.assign({ onClick: () => {
                     if (type === 'object')
                         setIsAdding(true);
                     else
                         handleAdd('');
-                }, children: jsx(Icon, { name: "add" }) })), isAdding && handleAdd && type === 'object' && (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: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { ...styles.input } }), jsx(InputButtons, { onOk: () => {
+                } }, { children: jsx(Icon, { name: "add" }) }))), isAdding && handleAdd && type === 'object' && (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: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: Object.assign({}, styles.input) }), jsx(InputButtons, { onOk: () => {
                             if (!!newKey) {
                                 setIsAdding(false);
                                 handleAdd(newKey);
                             }
                         }, onCancel: () => {
                             setIsAdding(false);
-                        } })] }))] }));
+                        } })] }))] })));
 };
 const InputButtons = ({ onOk, onCancel }) => {
-    return (jsxs("div", { className: "jer-confirm-buttons", children: [jsx("div", { onClick: onOk, children: jsx(Icon, { name: "ok" }) }), jsx("div", { onClick: onCancel, children: jsx(Icon, { name: "cancel" }) })] }));
+    return (jsxs("div", Object.assign({ className: "jer-confirm-buttons" }, { children: [jsx("div", Object.assign({ onClick: onOk }, { children: jsx(Icon, { name: "ok" }) })), jsx("div", Object.assign({ onClick: onCancel }, { children: jsx(Icon, { name: "cancel" }) }))] })));
 };
 const stringifyPath = (path) => path.reduce((str, part) => {
     if (typeof part === 'number')
@@ -567,11 +587,8 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         path,
         stringTruncate,
     };
-    return (jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxs("div", { className: "jer-value-main-row", children: [showArrayIndices && (jsxs("label", { htmlFor: path.join('.'), className: "jer-object-key", style: {
-                        ...styles.property,
-                        minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
-                    }, children: [name, ":", ' '] })), jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
-                    !error && (jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: DataTypes.map((type) => (jsx("option", { value: type, children: type }, type))) })), !isEditing && error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] }) }));
+    return (jsx("div", Object.assign({ className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` } }, { children: jsxs("div", Object.assign({ className: "jer-value-main-row" }, { children: [showArrayIndices && (jsxs("label", Object.assign({ htmlFor: path.join('.'), className: "jer-object-key", style: Object.assign(Object.assign({}, styles.property), { minWidth: `${Math.min(String(name).length + 1, 5)}ch` }) }, { children: [name, ":", ' '] }))), jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
+                    !error && (jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsx("select", Object.assign({ name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType }, { children: DataTypes.map((type) => (jsx("option", Object.assign({ value: type }, { children: type }), type))) }))), !isEditing && error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] })) })));
 };
 const getDataType = (value) => {
     if (typeof value === 'string')
@@ -588,19 +605,19 @@ const getInputComponent = (dataType, inputProps) => {
     const value = inputProps.value;
     switch (dataType) {
         case 'string':
-            return jsx(StringValue, { ...inputProps, value: value });
+            return jsx(StringValue, Object.assign({}, inputProps, { value: value }));
         case 'number':
-            return jsx(NumberValue, { ...inputProps, value: value });
+            return jsx(NumberValue, Object.assign({}, inputProps, { value: value }));
         case 'boolean':
-            return jsx(BooleanValue, { ...inputProps, value: value });
+            return jsx(BooleanValue, Object.assign({}, inputProps, { value: value }));
         case 'null':
-            return jsx(NullValue, { ...inputProps });
+            return jsx(NullValue, Object.assign({}, inputProps));
         case 'object':
-            return jsx(ObjectValue, { ...inputProps });
+            return jsx(ObjectValue, Object.assign({}, inputProps));
         case 'array':
-            return jsx(ArrayValue, { ...inputProps });
+            return jsx(ArrayValue, Object.assign({}, inputProps));
         default:
-            return jsx(InvalidValue, { ...inputProps });
+            return jsx(InvalidValue, Object.assign({}, inputProps));
     }
 };
 const convertValue = (value, type) => {
@@ -624,7 +641,8 @@ const convertValue = (value, type) => {
 };
 
 const isCollection = (value) => value !== null && typeof value == 'object';
-const CollectionNode = ({ data, path, name, ...props }) => {
+const CollectionNode = (_a) => {
+    var { data, path, name } = _a, props = __rest(_a, ["data", "path", "name"]);
     const { styles } = useTheme();
     const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
     const [isEditing, setIsEditing] = useState(false);
@@ -663,7 +681,7 @@ const CollectionNode = ({ data, path, name, ...props }) => {
                     showError(error);
             });
         }
-        catch {
+        catch (_a) {
             setError(translate('ERROR_INVALID_JSON'));
             setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
             console.log('Invalid JSON');
@@ -712,21 +730,21 @@ const CollectionNode = ({ data, path, name, ...props }) => {
     if (keySort && collectionType === 'object')
         keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
     const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    return (jsxs("div", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: [jsxs("div", { className: "jer-collection-header-row", children: [jsx("div", { onClick: () => {
+    return (jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsx("div", Object.assign({ onClick: () => {
                             if (!isEditing)
                                 setCollapsed(!collapsed);
-                        }, children: jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxs("div", { className: "jer-collection-name", children: [jsx("span", { style: styles.property, children: showLabel ? `${name}:` : null }), jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open })] }), jsx("div", { className: "jer-collection-item-count", style: styles.itemCount, children: collectionSize === 1
+                        } }, { children: jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open }))] })), jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
                             ? translate('ITEM_SINGLE', 1)
-                            : translate('ITEMS_MULTIPLE', collectionSize) }), collapsed && (jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })), !isEditing && (jsx(EditButtons, { startEdit: canEdit
+                            : translate('ITEMS_MULTIPLE', collectionSize) })), collapsed && (jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close }))), !isEditing && (jsx(EditButtons, { startEdit: canEdit
                             ? () => {
                                 setIsEditing(true);
                                 setCollapsed(false);
                             }
-                            : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] }), jsxs("div", { className: 'jer-collection-inner', style: {
+                            : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] })), jsxs("div", Object.assign({ className: 'jer-collection-inner', style: {
                     maxHeight: collapsed ? 0 : `${numOfLines * 1.6}em`,
                     overflowY: collapsed ? 'hidden' : 'visible',
                     transition: `max-height ${transitionTime}`,
-                }, children: [isEditing ? (jsxs("div", { className: "jer-collection-text-edit", children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", { className: "jer-collection-input-button-row", children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) })] })) : (jsx(Fragment, { children: keyValueArray.map(([key, value]) => (jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsx(CollectionNode, { data: value, path: [...path, key], name: key, ...props }, key)) : (jsx(ValueNodeWrapper, { data: value, path: [...path, key], name: key, ...props, showArrayIndices: collectionType === 'object' ? true : showArrayIndices }, key)) }, key))) })), jsx("div", { className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit', children: error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error })) })] }), !collapsed && (jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close }))] }));
+                } }, { children: [isEditing ? (jsxs("div", Object.assign({ className: "jer-collection-text-edit" }, { children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }))) : (jsx(Fragment, { children: keyValueArray.map(([key, value]) => (jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) }))] })), !collapsed && (jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
 };
 
 const localisedStrings = {
@@ -741,7 +759,7 @@ const localisedStrings = {
 };
 const translate = (translations, key, count) => {
     const string = key in translations ? translations[key] : localisedStrings[key];
-    return count === undefined ? string : string?.replace('{{count}}', String(count));
+    return count === undefined ? string : string === null || string === void 0 ? void 0 : string.replace('{{count}}', String(count));
 };
 const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
 
@@ -759,10 +777,10 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         if (icons)
             setIcons(icons);
     }, [theme, icons]);
-    const onEdit = async (value, path) => {
+    const onEdit = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
         if (srcEdit) {
-            const result = await srcEdit({
+            const result = yield srcEdit({
                 currentData,
                 newData,
                 currentValue,
@@ -778,11 +796,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
-    const onDelete = async (value, path) => {
+    });
+    const onDelete = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
         if (srcDelete) {
-            const result = await srcDelete({
+            const result = yield srcDelete({
                 currentData,
                 newData,
                 currentValue,
@@ -798,11 +816,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
-    const onAdd = async (value, path) => {
+    });
+    const onAdd = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
         const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
         if (srcAdd) {
-            const result = await srcAdd({
+            const result = yield srcAdd({
                 currentData,
                 newData,
                 currentValue,
@@ -818,7 +836,7 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         }
         else
             setData(newData);
-    };
+    });
     const restrictEditFilter = getFilterFunction(restrictEdit);
     const restrictDeleteFilter = getFilterFunction(restrictDelete);
     const restrictAddFilter = getFilterFunction(restrictAdd);
@@ -841,9 +859,9 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
     };
     if (!styles)
         return null;
-    return (jsx("div", { className: 'jer-editor-container ' + className, style: { ...styles.container, minWidth, maxWidth }, children: isCollection(data) && jsx(CollectionNode, { data: data, path: [], ...otherProps }) }));
+    return (jsx("div", Object.assign({ className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }) }, { children: isCollection(data) && jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps)) })));
 };
-const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, { ...props }) }));
+const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, Object.assign({}, props)) }));
 const updateDataObject = (data, path, newValue, action) => {
     if (path.length === 0) {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",