json-edit-react - npm Package Compare versions

Comparing version 0.9.1 to 0.9.3

build/index.cjs.js

@@ -15,2 +15,41 @@ 'use strict';
 
+/******************************************************************************
+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}}
@@ -277,3 +316,3 @@
     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 })));
 };
@@ -291,2 +330,3 @@ const useTheme = () => react.useContext(ThemeProviderContext);
 const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
+    var _a, _b, _c, _d;
     const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
@@ -298,13 +338,14 @@ const { fragments, styles } = theme;
             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);
             }, {});
@@ -317,12 +358,8 @@ compiledStyles[key] = cssStyles;
     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;
@@ -357,21 +394,6 @@ };
     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 }))] })));
 };
@@ -389,6 +411,6 @@
     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)), "\""] })));
 };
@@ -403,26 +425,24 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, 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();
@@ -432,15 +452,15 @@ const commonProps = { size: '1.4em', className: 'jer-icon' };
         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:
@@ -485,3 +505,3 @@ return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     };
-    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')
@@ -491,3 +511,3 @@ setIsAdding(true);
                         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) {
@@ -499,6 +519,6 @@ setIsAdding(false);
                             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" }) }))] })));
 };
@@ -584,7 +604,4 @@ const stringifyPath = (path) => path.reduce((str, part) => {
     };
-    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 })))] })) })));
 };
@@ -606,15 +623,15 @@ const getDataType = (value) => {
         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));
     }
@@ -643,3 +660,4 @@ };
 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();
@@ -683,3 +701,3 @@ const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
         }
-        catch {
+        catch (_a) {
             setError(translate('ERROR_INVALID_JSON'));
@@ -733,8 +751,8 @@ setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
     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
                             ? () => {
@@ -744,7 +762,7 @@ setIsEditing(true);
                             }
-                            : 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 })))] })));
 };
@@ -764,3 +782,3 @@
     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));
 };
@@ -783,6 +801,6 @@ const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
     }, [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,
@@ -803,7 +821,7 @@ newData,
             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,
@@ -824,7 +842,7 @@ newData,
             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,
@@ -845,3 +863,3 @@ newData,
             setData(newData);
-    };
+    });
     const restrictEditFilter = getFilterFunction(restrictEdit);
@@ -869,5 +887,5 @@ const restrictDeleteFilter = getFilterFunction(restrictDelete);
         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) => {
@@ -874,0 +892,0 @@ if (path.length === 0) {

build/index.d.ts

@@ -35,2 +35,3 @@ /// <reference types="react" />
 type LocalisedStrings = typeof localisedStrings;
+type TranslateFunction = (key: keyof LocalisedStrings, count?: number) => string;
 
@@ -99,2 +100,2 @@ interface JsonEditorProps {
 
-export { JsonEditor, Theme, ThemeInput, ThemeName, themes };
+export { CompareFunction, CopyFunction, FilterFunction, IconReplacements, JsonEditor, JsonEditorProps, LocalisedStrings, Theme, ThemeInput, ThemeName, TranslateFunction, UpdateFunction, themes };

build/index.esm.js

@@ -13,2 +13,41 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+/******************************************************************************
+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}}
@@ -275,3 +314,3 @@
     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 })));
 };
@@ -289,2 +328,3 @@ const useTheme = () => useContext(ThemeProviderContext);
 const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
+    var _a, _b, _c, _d;
     const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
@@ -296,13 +336,14 @@ const { fragments, styles } = theme;
             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);
             }, {});
@@ -315,12 +356,8 @@ compiledStyles[key] = cssStyles;
     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;
@@ -355,21 +392,6 @@ };
     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 }))] })));
 };
@@ -387,6 +409,6 @@
     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)), "\""] })));
 };
@@ -401,26 +423,24 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, 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();
@@ -430,15 +450,15 @@ const commonProps = { size: '1.4em', className: 'jer-icon' };
         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:
@@ -483,3 +503,3 @@ return jsx(Fragment, {});
     };
-    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')
@@ -489,3 +509,3 @@ setIsAdding(true);
                         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) {
@@ -497,6 +517,6 @@ setIsAdding(false);
                             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" }) }))] })));
 };
@@ -582,7 +602,4 @@ const stringifyPath = (path) => path.reduce((str, part) => {
     };
-    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 })))] })) })));
 };
@@ -604,15 +621,15 @@ const getDataType = (value) => {
         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));
     }
@@ -641,3 +658,4 @@ };
 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();
@@ -681,3 +699,3 @@ const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
         }
-        catch {
+        catch (_a) {
             setError(translate('ERROR_INVALID_JSON'));
@@ -731,8 +749,8 @@ setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
     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
                             ? () => {
@@ -742,7 +760,7 @@ setIsEditing(true);
                             }
-                            : 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 })))] })));
 };
@@ -762,3 +780,3 @@
     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));
 };
@@ -781,6 +799,6 @@ const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
     }, [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,
@@ -801,7 +819,7 @@ newData,
             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,
@@ -822,7 +840,7 @@ newData,
             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,
@@ -843,3 +861,3 @@ newData,
             setData(newData);
-    };
+    });
     const restrictEditFilter = getFilterFunction(restrictEdit);
@@ -867,5 +885,5 @@ const restrictDeleteFilter = getFilterFunction(restrictDelete);
         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) => {
@@ -872,0 +890,0 @@ if (path.length === 0) {

package.json

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

README.md

@@ -338,4 +338,5 @@ # json-edit-react
 
+- **0.9.3**: Bundle as ES6 module
+- **0.9.1**: Export more Types from the package
 - **0.9.0**: Initial release
-- **0.9.1**: Export more Types from the package
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156290

increased by5.76%

Lines of code

1915

increased by2.13%

Number of lines in readme file

342

increased by0.29%

No dependency changes