json-edit-react 0.9.1 → 0.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +5 -1
  2. package/build/index.cjs.js +113 -87
  3. package/build/index.d.ts +3 -2
  4. package/build/index.esm.js +111 -88
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -335,6 +335,10 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
335
335
 
336
336
  ## Changelog
337
337
 
338
- - **0.9.0**: Initial release
338
+ - **0.9.4**:
339
+ - Layout improvements
340
+ - Better internal handling of functions in data
341
+ - **0.9.3**: Bundle as ES6 module
339
342
  - **0.9.1**: Export more Types from the package
343
+ - **0.9.0**: Initial release
340
344
 
package/build/index.cjs.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var jsxRuntime = require('react/jsx-runtime');
4
6
  var react = require('react');
5
7
  var assign = require('object-property-assigner');
@@ -12,9 +14,48 @@ var fi = require('react-icons/fi');
12
14
  var ti = require('react-icons/ti');
13
15
  var fa = require('react-icons/fa');
14
16
 
17
+ /******************************************************************************
18
+ Copyright (c) Microsoft Corporation.
19
+
20
+ Permission to use, copy, modify, and/or distribute this software for any
21
+ purpose with or without fee is hereby granted.
22
+
23
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
24
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
25
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
26
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
27
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
28
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
29
+ PERFORMANCE OF THIS SOFTWARE.
30
+ ***************************************************************************** */
31
+ /* global Reflect, Promise */
32
+
33
+
34
+ function __rest(s, e) {
35
+ var t = {};
36
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
37
+ t[p] = s[p];
38
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
39
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
40
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
41
+ t[p[i]] = s[p[i]];
42
+ }
43
+ return t;
44
+ }
45
+
46
+ function __awaiter(thisArg, _arguments, P, generator) {
47
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
48
+ return new (P || (P = Promise))(function (resolve, reject) {
49
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
50
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
51
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
52
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
53
+ });
54
+ }
55
+
15
56
  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}}
16
57
 
17
- 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";
58
+ var css = ":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.2s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: inherit;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n font-size: 1em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 1.1em;\n /* 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.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 align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n}\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.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n height: 1.6em;\n}\n\n.jer-input-number {\n min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-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";
18
59
  n(css,{});
19
60
 
20
61
  const defaultTheme$1 = {
@@ -273,7 +314,7 @@ const ThemeProvider = ({ children }) => {
273
314
  const [styles, setStyles] = react.useState(emptyStyleObject);
274
315
  const [icons, setIcons] = react.useState({});
275
316
  const setTheme = (theme) => setStyles(compileStyles(theme));
276
- return (jsxRuntime.jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
317
+ return (jsxRuntime.jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
277
318
  };
278
319
  const useTheme = () => react.useContext(ThemeProviderContext);
279
320
  const compileStyles = (themeInput) => {
@@ -286,23 +327,25 @@ const compileStyles = (themeInput) => {
286
327
  return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
287
328
  };
288
329
  const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
330
+ var _a, _b, _c, _d;
289
331
  const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
290
332
  const { fragments, styles } = theme;
291
333
  const compiledStyles = {};
292
334
  Object.entries(styles).forEach(([key, value]) => {
293
335
  const elements = Array.isArray(value) ? value : [value];
294
336
  const cssStyles = elements.reduce((acc, curr) => {
337
+ var _a;
295
338
  if (typeof curr === 'string') {
296
- const style = fragments?.[curr] ?? curr;
339
+ const style = (_a = fragments === null || fragments === void 0 ? void 0 : fragments[curr]) !== null && _a !== void 0 ? _a : curr;
297
340
  switch (typeof style) {
298
341
  case 'string':
299
- return { ...acc, [defaultStyleProperties[key]]: style };
342
+ return Object.assign(Object.assign({}, acc), { [defaultStyleProperties[key]]: style });
300
343
  default:
301
- return { ...acc, ...style };
344
+ return Object.assign(Object.assign({}, acc), style);
302
345
  }
303
346
  }
304
347
  else
305
- return { ...acc, ...curr };
348
+ return Object.assign(Object.assign({}, acc), curr);
306
349
  }, {});
307
350
  compiledStyles[key] = cssStyles;
308
351
  });
@@ -310,16 +353,12 @@ const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) =
310
353
  });
311
354
  const finalStyles = {};
312
355
  Object.keys(defaultTheme.styles).forEach((key) => {
313
- finalStyles[key] = {
314
- ...defaultStyles[key],
315
- ...baseStyles[key],
316
- ...overrideStyles[key],
317
- };
356
+ finalStyles[key] = Object.assign(Object.assign(Object.assign({}, defaultStyles[key]), baseStyles[key]), overrideStyles[key]);
318
357
  });
319
- if (finalStyles?.inputHighlight?.backgroundColor)
320
- document.documentElement.style.setProperty('--jer-highlight-color', finalStyles?.inputHighlight?.backgroundColor);
321
- if (finalStyles?.iconCopy?.color)
322
- document.documentElement.style.setProperty('--jer-icon-copy-color', finalStyles?.iconCopy?.color);
358
+ if ((_a = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _a === void 0 ? void 0 : _a.backgroundColor)
359
+ 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);
360
+ if ((_c = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _c === void 0 ? void 0 : _c.color)
361
+ 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);
323
362
  return finalStyles;
324
363
  };
325
364
  const isStyleObject = (overrideObject) => {
@@ -349,25 +388,10 @@ const defaultStyleProperties = {
349
388
  const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
350
389
  const { styles } = useTheme();
351
390
  const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
352
- return (jsxRuntime.jsxs("div", { style: { display: 'grid' }, children: [jsxRuntime.jsx("textarea", { style: {
353
- height: 'auto',
354
- gridArea: '1 / 1 / 2 / 2',
355
- overflowY: 'auto',
356
- ...styles.input,
357
- }, rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
391
+ 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) => {
358
392
  if (value.length < 40)
359
393
  e.target.select();
360
- }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", { className: className, style: {
361
- visibility: 'hidden',
362
- height: 'auto',
363
- gridArea: '1 / 1 / 2 / 2',
364
- color: 'red',
365
- opacity: 0.9,
366
- whiteSpace: 'pre-wrap',
367
- overflow: 'clip',
368
- border: '1px solid transparent',
369
- ...styles.input,
370
- }, children: dummyValue })] }));
394
+ }, 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 }))] })));
371
395
  };
372
396
 
373
397
  const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
@@ -380,10 +404,10 @@ const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
380
404
  handleCancel();
381
405
  };
382
406
  const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxRuntime.jsxs("span", { children: [line, index < arr.length - 1 ? jsxRuntime.jsx("br", {}) : null] }, index)));
383
- 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) => {
407
+ 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) => {
384
408
  if (e.getModifierState('Control') || e.getModifierState('Meta'))
385
409
  setIsEditing(true);
386
- }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
410
+ }, className: "jer-value-string", style: styles.string }, { children: ["\"", breakString(truncate(value, stringTruncate)), "\""] })));
387
411
  };
388
412
  const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
389
413
  const { styles } = useTheme();
@@ -396,44 +420,45 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
396
420
  const validateNumber = (input) => {
397
421
  return input.replace(/[^0-9.-]/g, '');
398
422
  };
399
- 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 }));
423
+ 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", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
400
424
  };
401
425
  const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
402
426
  const { styles } = useTheme();
403
- 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) }));
427
+ 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) })));
404
428
  };
405
429
  const NullValue = ({ value, isEditing, setIsEditing }) => {
406
430
  const { styles } = useTheme();
407
- 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) }));
431
+ 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) })));
408
432
  };
409
433
  const ObjectValue = () => {
410
- return jsxRuntime.jsx("span", { className: "jer-value-object", children: '{ }' });
434
+ return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
411
435
  };
412
436
  const ArrayValue = ({ value }) => {
413
- return jsxRuntime.jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
437
+ return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
414
438
  };
415
439
  const InvalidValue = () => {
416
- return jsxRuntime.jsx("span", { className: "jer-value-invalid", children: "Invalid value" });
440
+ return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
417
441
  };
418
442
 
419
443
  const Icon = ({ name, rotate }) => {
444
+ var _a, _b, _c, _d, _e, _f, _g;
420
445
  const { styles, icons } = useTheme();
421
446
  const commonProps = { size: '1.4em', className: 'jer-icon' };
422
447
  switch (name) {
423
448
  case 'add':
424
- return icons?.add ?? jsxRuntime.jsx(bi.BiPlusCircle, { ...commonProps, style: styles.iconAdd });
449
+ 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 }));
425
450
  case 'edit':
426
- return icons?.edit ?? jsxRuntime.jsx(bi.BiEdit, { ...commonProps, style: styles.iconEdit });
451
+ 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 }));
427
452
  case 'delete':
428
- return (icons?.delete ?? jsxRuntime.jsx(md.MdDeleteForever, { ...commonProps, style: styles.iconDelete, size: "1.5em" }));
453
+ 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" })));
429
454
  case 'copy':
430
- return icons?.copy ?? jsxRuntime.jsx(hi.HiOutlineClipboardCopy, { ...commonProps, style: styles.iconCopy });
455
+ 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 }));
431
456
  case 'ok':
432
- return (icons?.ok ?? (jsxRuntime.jsx(fi.FiCheckCircle, { ...commonProps, style: { fontSize: '90%', ...styles.iconOk } })));
457
+ 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) }))));
433
458
  case 'cancel':
434
- return (icons?.cancel ?? (jsxRuntime.jsx(ti.TiCancel, { ...commonProps, style: { fontSize: '130%', ...styles.iconCancel } })));
459
+ 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) }))));
435
460
  case 'chevron':
436
- return (icons?.chevron ?? (jsxRuntime.jsx(fa.FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
461
+ 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 })));
437
462
  default:
438
463
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
439
464
  }
@@ -458,14 +483,14 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
458
483
  };
459
484
  const handleCopy = (e) => {
460
485
  let type = 'value';
461
- let value;
486
+ let value = '';
462
487
  if (enableClipboard) {
463
488
  switch (e.ctrlKey || e.metaKey) {
464
489
  case true:
465
490
  value = stringifyPath(path);
466
491
  type = 'path';
467
492
  break;
468
- case false:
493
+ default:
469
494
  value = JSON.stringify(data, null, 2);
470
495
  }
471
496
  navigator.clipboard.writeText(value);
@@ -473,22 +498,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
473
498
  if (typeof enableClipboard === 'function')
474
499
  enableClipboard({ value, path, key: name, type });
475
500
  };
476
- 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: () => {
501
+ 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: () => {
477
502
  if (type === 'object')
478
503
  setIsAdding(true);
479
504
  else
480
505
  handleAdd('');
481
- }, 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: () => {
506
+ } }, { 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: () => {
482
507
  if (!!newKey) {
483
508
  setIsAdding(false);
484
509
  handleAdd(newKey);
485
510
  }
486
511
  }, onCancel: () => {
487
512
  setIsAdding(false);
488
- } })] }))] }));
513
+ } })] }))] })));
489
514
  };
490
515
  const InputButtons = ({ onOk, onCancel }) => {
491
- 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" }) })] }));
516
+ 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" }) }))] })));
492
517
  };
493
518
  const stringifyPath = (path) => path.reduce((str, part) => {
494
519
  if (typeof part === 'number')
@@ -505,11 +530,11 @@ const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
505
530
  const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, showArrayIndices, stringTruncate, indent, translate, }) => {
506
531
  const { styles } = useTheme();
507
532
  const [isEditing, setIsEditing] = react.useState(false);
508
- const [value, setValue] = react.useState(data);
533
+ const [value, setValue] = react.useState(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
509
534
  const [error, setError] = react.useState(null);
510
535
  const [dataType, setDataType] = react.useState(getDataType(data));
511
536
  react.useEffect(() => {
512
- setValue(data);
537
+ setValue(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
513
538
  setDataType(getDataType(data));
514
539
  }, [data, error]);
515
540
  const handleChangeDataType = (type) => {
@@ -569,11 +594,10 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
569
594
  path,
570
595
  stringTruncate,
571
596
  };
572
- 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: {
573
- ...styles.property,
574
- minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
575
- }, children: [name, ":", ' '] })), jsxRuntime.jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
576
- !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 }))] }) }));
597
+ 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", style: {
598
+ flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
599
+ } }, { 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`, flexShrink: name.length > 10 ? 1 : 0 }) }, { children: [name, ":", ' '] }))), jsxRuntime.jsxs("div", Object.assign({ className: "jer-value-and-buttons" }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
600
+ !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.jsxs("div", Object.assign({ className: "jer-select" }, { children: [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))) })), jsxRuntime.jsx("span", { className: "focus" })] }))), !isEditing && error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] }))] })) })));
577
601
  };
578
602
  const getDataType = (value) => {
579
603
  if (typeof value === 'string')
@@ -590,19 +614,19 @@ const getInputComponent = (dataType, inputProps) => {
590
614
  const value = inputProps.value;
591
615
  switch (dataType) {
592
616
  case 'string':
593
- return jsxRuntime.jsx(StringValue, { ...inputProps, value: value });
617
+ return jsxRuntime.jsx(StringValue, Object.assign({}, inputProps, { value: value }));
594
618
  case 'number':
595
- return jsxRuntime.jsx(NumberValue, { ...inputProps, value: value });
619
+ return jsxRuntime.jsx(NumberValue, Object.assign({}, inputProps, { value: value }));
596
620
  case 'boolean':
597
- return jsxRuntime.jsx(BooleanValue, { ...inputProps, value: value });
621
+ return jsxRuntime.jsx(BooleanValue, Object.assign({}, inputProps, { value: value }));
598
622
  case 'null':
599
- return jsxRuntime.jsx(NullValue, { ...inputProps });
623
+ return jsxRuntime.jsx(NullValue, Object.assign({}, inputProps));
600
624
  case 'object':
601
- return jsxRuntime.jsx(ObjectValue, { ...inputProps });
625
+ return jsxRuntime.jsx(ObjectValue, Object.assign({}, inputProps));
602
626
  case 'array':
603
- return jsxRuntime.jsx(ArrayValue, { ...inputProps });
627
+ return jsxRuntime.jsx(ArrayValue, Object.assign({}, inputProps));
604
628
  default:
605
- return jsxRuntime.jsx(InvalidValue, { ...inputProps });
629
+ return jsxRuntime.jsx(InvalidValue, Object.assign({}, inputProps));
606
630
  }
607
631
  };
608
632
  const convertValue = (value, type) => {
@@ -626,7 +650,8 @@ const convertValue = (value, type) => {
626
650
  };
627
651
 
628
652
  const isCollection = (value) => value !== null && typeof value == 'object';
629
- const CollectionNode = ({ data, path, name, ...props }) => {
653
+ const CollectionNode = (_a) => {
654
+ var { data, path, name } = _a, props = __rest(_a, ["data", "path", "name"]);
630
655
  const { styles } = useTheme();
631
656
  const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
632
657
  const [isEditing, setIsEditing] = react.useState(false);
@@ -665,7 +690,7 @@ const CollectionNode = ({ data, path, name, ...props }) => {
665
690
  showError(error);
666
691
  });
667
692
  }
668
- catch {
693
+ catch (_a) {
669
694
  setError(translate('ERROR_INVALID_JSON'));
670
695
  setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
671
696
  console.log('Invalid JSON');
@@ -714,21 +739,21 @@ const CollectionNode = ({ data, path, name, ...props }) => {
714
739
  if (keySort && collectionType === 'object')
715
740
  keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
716
741
  const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
717
- 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: () => {
742
+ 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: () => {
718
743
  if (!isEditing)
719
744
  setCollapsed(!collapsed);
720
- }, 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
745
+ } }, { 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 })), !isEditing && (jsxRuntime.jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
721
746
  ? translate('ITEM_SINGLE', 1)
722
- : translate('ITEMS_MULTIPLE', collectionSize) }), collapsed && (jsxRuntime.jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
747
+ : translate('ITEMS_MULTIPLE', collectionSize) }))), jsxRuntime.jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
723
748
  ? () => {
724
749
  setIsEditing(true);
725
750
  setCollapsed(false);
726
751
  }
727
- : 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: {
728
- maxHeight: collapsed ? 0 : `${numOfLines * 1.6}em`,
752
+ : 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: {
753
+ maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 4}em` : undefined,
729
754
  overflowY: collapsed ? 'hidden' : 'visible',
730
755
  transition: `max-height ${transitionTime}`,
731
- }, 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 }))] }));
756
+ } }, { children: [isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxRuntime.jsxs("div", { 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 && !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
732
757
  };
733
758
 
734
759
  const localisedStrings = {
@@ -743,7 +768,7 @@ const localisedStrings = {
743
768
  };
744
769
  const translate = (translations, key, count) => {
745
770
  const string = key in translations ? translations[key] : localisedStrings[key];
746
- return count === undefined ? string : string?.replace('{{count}}', String(count));
771
+ return count === undefined ? string : string === null || string === void 0 ? void 0 : string.replace('{{count}}', String(count));
747
772
  };
748
773
  const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
749
774
 
@@ -761,10 +786,10 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
761
786
  if (icons)
762
787
  setIcons(icons);
763
788
  }, [theme, icons]);
764
- const onEdit = async (value, path) => {
789
+ const onEdit = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
765
790
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
766
791
  if (srcEdit) {
767
- const result = await srcEdit({
792
+ const result = yield srcEdit({
768
793
  currentData,
769
794
  newData,
770
795
  currentValue,
@@ -780,11 +805,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
780
805
  }
781
806
  else
782
807
  setData(newData);
783
- };
784
- const onDelete = async (value, path) => {
808
+ });
809
+ const onDelete = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
785
810
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
786
811
  if (srcDelete) {
787
- const result = await srcDelete({
812
+ const result = yield srcDelete({
788
813
  currentData,
789
814
  newData,
790
815
  currentValue,
@@ -800,11 +825,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
800
825
  }
801
826
  else
802
827
  setData(newData);
803
- };
804
- const onAdd = async (value, path) => {
828
+ });
829
+ const onAdd = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
805
830
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
806
831
  if (srcAdd) {
807
- const result = await srcAdd({
832
+ const result = yield srcAdd({
808
833
  currentData,
809
834
  newData,
810
835
  currentValue,
@@ -820,7 +845,7 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
820
845
  }
821
846
  else
822
847
  setData(newData);
823
- };
848
+ });
824
849
  const restrictEditFilter = getFilterFunction(restrictEdit);
825
850
  const restrictDeleteFilter = getFilterFunction(restrictDelete);
826
851
  const restrictAddFilter = getFilterFunction(restrictAdd);
@@ -843,9 +868,9 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
843
868
  };
844
869
  if (!styles)
845
870
  return null;
846
- return (jsxRuntime.jsx("div", { className: 'jer-editor-container ' + className, style: { ...styles.container, minWidth, maxWidth }, children: isCollection(data) && jsxRuntime.jsx(CollectionNode, { data: data, path: [], ...otherProps }) }));
871
+ 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)) })));
847
872
  };
848
- const JsonEditor = (props) => (jsxRuntime.jsx(ThemeProvider, { children: jsxRuntime.jsx(Editor, { ...props }) }));
873
+ const JsonEditor = (props) => (jsxRuntime.jsx(ThemeProvider, { children: jsxRuntime.jsx(Editor, Object.assign({}, props)) }));
849
874
  const updateDataObject = (data, path, newValue, action) => {
850
875
  if (path.length === 0) {
851
876
  return {
@@ -873,4 +898,5 @@ const getFilterFunction = (propValue) => {
873
898
  };
874
899
 
875
900
  exports.JsonEditor = JsonEditor;
901
+ exports.default = JsonEditor;
876
902
  exports.themes = themes;
package/build/index.d.ts CHANGED
@@ -32,6 +32,7 @@ declare const localisedStrings: {
32
32
  ERROR_ADD: string;
33
33
  };
34
34
  type LocalisedStrings = typeof localisedStrings;
35
+ type TranslateFunction = (key: keyof LocalisedStrings, count?: number) => string;
35
36
 
36
37
  interface JsonEditorProps {
37
38
  data: object;
@@ -88,11 +89,11 @@ type CopyType = 'path' | 'value';
88
89
  type CopyFunction = (input: {
89
90
  key: CollectionKey;
90
91
  path: CollectionKey[];
91
- value: unknown;
92
+ value: string;
92
93
  type: CopyType;
93
94
  }) => void;
94
95
  type CompareFunction = (a: string, b: string) => number;
95
96
 
96
97
  declare const JsonEditor: React$1.FC<JsonEditorProps>;
97
98
 
98
- export { JsonEditor, Theme, ThemeInput, ThemeName, themes };
99
+ export { CompareFunction, CopyFunction, FilterFunction, IconReplacements, JsonEditor, JsonEditorProps, LocalisedStrings, Theme, ThemeInput, ThemeName, TranslateFunction, UpdateFunction, JsonEditor as default, themes };
package/build/index.esm.js CHANGED
@@ -10,9 +10,48 @@ import { FiCheckCircle } from 'react-icons/fi';
10
10
  import { TiCancel } from 'react-icons/ti';
11
11
  import { FaChevronDown } from 'react-icons/fa';
12
12
 
13
+ /******************************************************************************
14
+ Copyright (c) Microsoft Corporation.
15
+
16
+ Permission to use, copy, modify, and/or distribute this software for any
17
+ purpose with or without fee is hereby granted.
18
+
19
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
20
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
21
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
22
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
23
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
24
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
25
+ PERFORMANCE OF THIS SOFTWARE.
26
+ ***************************************************************************** */
27
+ /* global Reflect, Promise */
28
+
29
+
30
+ function __rest(s, e) {
31
+ var t = {};
32
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
33
+ t[p] = s[p];
34
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
35
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
36
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
37
+ t[p[i]] = s[p[i]];
38
+ }
39
+ return t;
40
+ }
41
+
42
+ function __awaiter(thisArg, _arguments, P, generator) {
43
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
44
+ return new (P || (P = Promise))(function (resolve, reject) {
45
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
46
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
47
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
48
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
49
+ });
50
+ }
51
+
13
52
  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}}
14
53
 
15
- 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";
54
+ var css = ":root {\n --jer-select-border: #b6b6b6;\n --jer-select-focus: #777;\n --jer-select-arrow: #777;\n --jer-form-border: 1px solid #ededf0;\n --jer-form-border-focus: 1px solid #e2e2e2;\n --jer-expand-transition-time: 0.2s;\n --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n opacity: 1;\n transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n opacity: 0;\n transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n /* width: 100%; */\n font-family: inherit;\n font-size: inherit;\n color: black;\n cursor: inherit;\n line-height: inherit;\n z-index: 1;\n outline: none;\n}\nselect::-ms-expand {\n display: none;\n}\n\n.jer-select {\n display: grid;\n grid-template-areas: 'select';\n align-items: center;\n position: relative;\n min-width: 12ch;\n max-width: 15ch;\n border: 1px solid var(--jer-select-border);\n border-radius: 0.25em;\n padding: 0.25em 0.5em;\n font-size: 1em;\n cursor: pointer;\n line-height: 1.1;\n background-color: #fff;\n background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n content: '';\n justify-self: end;\n width: 0.8em;\n height: 0.5em;\n background-color: var(--jer-select-arrow);\n -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n position: absolute;\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n border: 1px solid var(--jer-select-focus);\n border-radius: inherit;\n}\n\n.jer-editor-container {\n font-size: 1.1em;\n /* 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.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 align-items: flex-start;\n}\n\n.jer-collection-text-area {\n resize: both;\n padding-top: 0.2em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n padding-bottom: 0;\n overflow: hidden;\n max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n display: flex;\n justify-content: flex-end;\n font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n position: absolute;\n bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n margin-left: 1em;\n}\n\n.jer-value-component {\n position: relative;\n}\n\n.jer-value-main-row {\n display: flex;\n gap: 0;\n}\n\n.jer-value-and-buttons {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n position: absolute;\n}\n\n.jer-value-string {\n line-height: 1.3em;\n}\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.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n transform: scale(1.5);\n margin-left: 0.3em;\n margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n word-break: break-word;\n line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n opacity: 0.5;\n font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n height: 1.6em;\n}\n\n.jer-input-number {\n min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.jer-input-buttons {\n gap: 0.4em;\n}\n\n.jer-edit-buttons {\n gap: 0.4em;\n margin-left: 0.5em;\n opacity: 0;\n}\n\n.jer-confirm-buttons {\n gap: 0.2em;\n margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n opacity: 1;\n position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-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";
16
55
  n(css,{});
17
56
 
18
57
  const defaultTheme$1 = {
@@ -271,7 +310,7 @@ const ThemeProvider = ({ children }) => {
271
310
  const [styles, setStyles] = useState(emptyStyleObject);
272
311
  const [icons, setIcons] = useState({});
273
312
  const setTheme = (theme) => setStyles(compileStyles(theme));
274
- return (jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
313
+ return (jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
275
314
  };
276
315
  const useTheme = () => useContext(ThemeProviderContext);
277
316
  const compileStyles = (themeInput) => {
@@ -284,23 +323,25 @@ const compileStyles = (themeInput) => {
284
323
  return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
285
324
  };
286
325
  const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
326
+ var _a, _b, _c, _d;
287
327
  const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
288
328
  const { fragments, styles } = theme;
289
329
  const compiledStyles = {};
290
330
  Object.entries(styles).forEach(([key, value]) => {
291
331
  const elements = Array.isArray(value) ? value : [value];
292
332
  const cssStyles = elements.reduce((acc, curr) => {
333
+ var _a;
293
334
  if (typeof curr === 'string') {
294
- const style = fragments?.[curr] ?? curr;
335
+ const style = (_a = fragments === null || fragments === void 0 ? void 0 : fragments[curr]) !== null && _a !== void 0 ? _a : curr;
295
336
  switch (typeof style) {
296
337
  case 'string':
297
- return { ...acc, [defaultStyleProperties[key]]: style };
338
+ return Object.assign(Object.assign({}, acc), { [defaultStyleProperties[key]]: style });
298
339
  default:
299
- return { ...acc, ...style };
340
+ return Object.assign(Object.assign({}, acc), style);
300
341
  }
301
342
  }
302
343
  else
303
- return { ...acc, ...curr };
344
+ return Object.assign(Object.assign({}, acc), curr);
304
345
  }, {});
305
346
  compiledStyles[key] = cssStyles;
306
347
  });
@@ -308,16 +349,12 @@ const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) =
308
349
  });
309
350
  const finalStyles = {};
310
351
  Object.keys(defaultTheme.styles).forEach((key) => {
311
- finalStyles[key] = {
312
- ...defaultStyles[key],
313
- ...baseStyles[key],
314
- ...overrideStyles[key],
315
- };
352
+ finalStyles[key] = Object.assign(Object.assign(Object.assign({}, defaultStyles[key]), baseStyles[key]), overrideStyles[key]);
316
353
  });
317
- if (finalStyles?.inputHighlight?.backgroundColor)
318
- document.documentElement.style.setProperty('--jer-highlight-color', finalStyles?.inputHighlight?.backgroundColor);
319
- if (finalStyles?.iconCopy?.color)
320
- document.documentElement.style.setProperty('--jer-icon-copy-color', finalStyles?.iconCopy?.color);
354
+ if ((_a = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _a === void 0 ? void 0 : _a.backgroundColor)
355
+ 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);
356
+ if ((_c = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _c === void 0 ? void 0 : _c.color)
357
+ 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);
321
358
  return finalStyles;
322
359
  };
323
360
  const isStyleObject = (overrideObject) => {
@@ -347,25 +384,10 @@ const defaultStyleProperties = {
347
384
  const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
348
385
  const { styles } = useTheme();
349
386
  const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
350
- return (jsxs("div", { style: { display: 'grid' }, children: [jsx("textarea", { style: {
351
- height: 'auto',
352
- gridArea: '1 / 1 / 2 / 2',
353
- overflowY: 'auto',
354
- ...styles.input,
355
- }, rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
387
+ 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) => {
356
388
  if (value.length < 40)
357
389
  e.target.select();
358
- }, onKeyDown: handleKeyPress }), jsx("span", { className: className, style: {
359
- visibility: 'hidden',
360
- height: 'auto',
361
- gridArea: '1 / 1 / 2 / 2',
362
- color: 'red',
363
- opacity: 0.9,
364
- whiteSpace: 'pre-wrap',
365
- overflow: 'clip',
366
- border: '1px solid transparent',
367
- ...styles.input,
368
- }, children: dummyValue })] }));
390
+ }, 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 }))] })));
369
391
  };
370
392
 
371
393
  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
378
400
  handleCancel();
379
401
  };
380
402
  const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxs("span", { children: [line, index < arr.length - 1 ? jsx("br", {}) : null] }, index)));
381
- 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) => {
403
+ 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) => {
382
404
  if (e.getModifierState('Control') || e.getModifierState('Meta'))
383
405
  setIsEditing(true);
384
- }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
406
+ }, className: "jer-value-string", style: styles.string }, { children: ["\"", breakString(truncate(value, stringTruncate)), "\""] })));
385
407
  };
386
408
  const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
387
409
  const { styles } = useTheme();
@@ -394,44 +416,45 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
394
416
  const validateNumber = (input) => {
395
417
  return input.replace(/[^0-9.-]/g, '');
396
418
  };
397
- 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 }));
419
+ 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", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
398
420
  };
399
421
  const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
400
422
  const { styles } = useTheme();
401
- 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) }));
423
+ 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) })));
402
424
  };
403
425
  const NullValue = ({ value, isEditing, setIsEditing }) => {
404
426
  const { styles } = useTheme();
405
- 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) }));
427
+ 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) })));
406
428
  };
407
429
  const ObjectValue = () => {
408
- return jsx("span", { className: "jer-value-object", children: '{ }' });
430
+ return jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
409
431
  };
410
432
  const ArrayValue = ({ value }) => {
411
- return jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
433
+ return jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
412
434
  };
413
435
  const InvalidValue = () => {
414
- return jsx("span", { className: "jer-value-invalid", children: "Invalid value" });
436
+ return jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
415
437
  };
416
438
 
417
439
  const Icon = ({ name, rotate }) => {
440
+ var _a, _b, _c, _d, _e, _f, _g;
418
441
  const { styles, icons } = useTheme();
419
442
  const commonProps = { size: '1.4em', className: 'jer-icon' };
420
443
  switch (name) {
421
444
  case 'add':
422
- return icons?.add ?? jsx(BiPlusCircle, { ...commonProps, style: styles.iconAdd });
445
+ return (_a = icons === null || icons === void 0 ? void 0 : icons.add) !== null && _a !== void 0 ? _a : jsx(BiPlusCircle, Object.assign({}, commonProps, { style: styles.iconAdd }));
423
446
  case 'edit':
424
- return icons?.edit ?? jsx(BiEdit, { ...commonProps, style: styles.iconEdit });
447
+ return (_b = icons === null || icons === void 0 ? void 0 : icons.edit) !== null && _b !== void 0 ? _b : jsx(BiEdit, Object.assign({}, commonProps, { style: styles.iconEdit }));
425
448
  case 'delete':
426
- return (icons?.delete ?? jsx(MdDeleteForever, { ...commonProps, style: styles.iconDelete, size: "1.5em" }));
449
+ 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" })));
427
450
  case 'copy':
428
- return icons?.copy ?? jsx(HiOutlineClipboardCopy, { ...commonProps, style: styles.iconCopy });
451
+ return (_d = icons === null || icons === void 0 ? void 0 : icons.copy) !== null && _d !== void 0 ? _d : jsx(HiOutlineClipboardCopy, Object.assign({}, commonProps, { style: styles.iconCopy }));
429
452
  case 'ok':
430
- return (icons?.ok ?? (jsx(FiCheckCircle, { ...commonProps, style: { fontSize: '90%', ...styles.iconOk } })));
453
+ 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) }))));
431
454
  case 'cancel':
432
- return (icons?.cancel ?? (jsx(TiCancel, { ...commonProps, style: { fontSize: '130%', ...styles.iconCancel } })));
455
+ 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) }))));
433
456
  case 'chevron':
434
- return (icons?.chevron ?? (jsx(FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
457
+ 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 })));
435
458
  default:
436
459
  return jsx(Fragment, {});
437
460
  }
@@ -456,14 +479,14 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
456
479
  };
457
480
  const handleCopy = (e) => {
458
481
  let type = 'value';
459
- let value;
482
+ let value = '';
460
483
  if (enableClipboard) {
461
484
  switch (e.ctrlKey || e.metaKey) {
462
485
  case true:
463
486
  value = stringifyPath(path);
464
487
  type = 'path';
465
488
  break;
466
- case false:
489
+ default:
467
490
  value = JSON.stringify(data, null, 2);
468
491
  }
469
492
  navigator.clipboard.writeText(value);
@@ -471,22 +494,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
471
494
  if (typeof enableClipboard === 'function')
472
495
  enableClipboard({ value, path, key: name, type });
473
496
  };
474
- 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: () => {
497
+ 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: () => {
475
498
  if (type === 'object')
476
499
  setIsAdding(true);
477
500
  else
478
501
  handleAdd('');
479
- }, 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: () => {
502
+ } }, { 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: () => {
480
503
  if (!!newKey) {
481
504
  setIsAdding(false);
482
505
  handleAdd(newKey);
483
506
  }
484
507
  }, onCancel: () => {
485
508
  setIsAdding(false);
486
- } })] }))] }));
509
+ } })] }))] })));
487
510
  };
488
511
  const InputButtons = ({ onOk, onCancel }) => {
489
- 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" }) })] }));
512
+ 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" }) }))] })));
490
513
  };
491
514
  const stringifyPath = (path) => path.reduce((str, part) => {
492
515
  if (typeof part === 'number')
@@ -503,11 +526,11 @@ const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
503
526
  const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, showArrayIndices, stringTruncate, indent, translate, }) => {
504
527
  const { styles } = useTheme();
505
528
  const [isEditing, setIsEditing] = useState(false);
506
- const [value, setValue] = useState(data);
529
+ const [value, setValue] = useState(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
507
530
  const [error, setError] = useState(null);
508
531
  const [dataType, setDataType] = useState(getDataType(data));
509
532
  useEffect(() => {
510
- setValue(data);
533
+ setValue(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
511
534
  setDataType(getDataType(data));
512
535
  }, [data, error]);
513
536
  const handleChangeDataType = (type) => {
@@ -567,11 +590,10 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
567
590
  path,
568
591
  stringTruncate,
569
592
  };
570
- 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: {
571
- ...styles.property,
572
- minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
573
- }, children: [name, ":", ' '] })), jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
574
- !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 }))] }) }));
593
+ 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", style: {
594
+ flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
595
+ } }, { 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`, flexShrink: name.length > 10 ? 1 : 0 }) }, { children: [name, ":", ' '] }))), jsxs("div", Object.assign({ className: "jer-value-and-buttons" }, { children: [jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
596
+ !error && (jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsxs("div", Object.assign({ className: "jer-select" }, { children: [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))) })), jsx("span", { className: "focus" })] }))), !isEditing && error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] }))] })) })));
575
597
  };
576
598
  const getDataType = (value) => {
577
599
  if (typeof value === 'string')
@@ -588,19 +610,19 @@ const getInputComponent = (dataType, inputProps) => {
588
610
  const value = inputProps.value;
589
611
  switch (dataType) {
590
612
  case 'string':
591
- return jsx(StringValue, { ...inputProps, value: value });
613
+ return jsx(StringValue, Object.assign({}, inputProps, { value: value }));
592
614
  case 'number':
593
- return jsx(NumberValue, { ...inputProps, value: value });
615
+ return jsx(NumberValue, Object.assign({}, inputProps, { value: value }));
594
616
  case 'boolean':
595
- return jsx(BooleanValue, { ...inputProps, value: value });
617
+ return jsx(BooleanValue, Object.assign({}, inputProps, { value: value }));
596
618
  case 'null':
597
- return jsx(NullValue, { ...inputProps });
619
+ return jsx(NullValue, Object.assign({}, inputProps));
598
620
  case 'object':
599
- return jsx(ObjectValue, { ...inputProps });
621
+ return jsx(ObjectValue, Object.assign({}, inputProps));
600
622
  case 'array':
601
- return jsx(ArrayValue, { ...inputProps });
623
+ return jsx(ArrayValue, Object.assign({}, inputProps));
602
624
  default:
603
- return jsx(InvalidValue, { ...inputProps });
625
+ return jsx(InvalidValue, Object.assign({}, inputProps));
604
626
  }
605
627
  };
606
628
  const convertValue = (value, type) => {
@@ -624,7 +646,8 @@ const convertValue = (value, type) => {
624
646
  };
625
647
 
626
648
  const isCollection = (value) => value !== null && typeof value == 'object';
627
- const CollectionNode = ({ data, path, name, ...props }) => {
649
+ const CollectionNode = (_a) => {
650
+ var { data, path, name } = _a, props = __rest(_a, ["data", "path", "name"]);
628
651
  const { styles } = useTheme();
629
652
  const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
630
653
  const [isEditing, setIsEditing] = useState(false);
@@ -663,7 +686,7 @@ const CollectionNode = ({ data, path, name, ...props }) => {
663
686
  showError(error);
664
687
  });
665
688
  }
666
- catch {
689
+ catch (_a) {
667
690
  setError(translate('ERROR_INVALID_JSON'));
668
691
  setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
669
692
  console.log('Invalid JSON');
@@ -712,21 +735,21 @@ const CollectionNode = ({ data, path, name, ...props }) => {
712
735
  if (keySort && collectionType === 'object')
713
736
  keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
714
737
  const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
715
- 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: () => {
738
+ 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: () => {
716
739
  if (!isEditing)
717
740
  setCollapsed(!collapsed);
718
- }, 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
741
+ } }, { 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 })), !isEditing && (jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
719
742
  ? translate('ITEM_SINGLE', 1)
720
- : translate('ITEMS_MULTIPLE', collectionSize) }), collapsed && (jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })), !isEditing && (jsx(EditButtons, { startEdit: canEdit
743
+ : translate('ITEMS_MULTIPLE', collectionSize) }))), jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (jsx(EditButtons, { startEdit: canEdit
721
744
  ? () => {
722
745
  setIsEditing(true);
723
746
  setCollapsed(false);
724
747
  }
725
- : 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: {
726
- maxHeight: collapsed ? 0 : `${numOfLines * 1.6}em`,
748
+ : 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: {
749
+ maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 4}em` : undefined,
727
750
  overflowY: collapsed ? 'hidden' : 'visible',
728
751
  transition: `max-height ${transitionTime}`,
729
- }, 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 }))] }));
752
+ } }, { children: [isEditing ? (jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxs("div", { 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 && !isEditing && (jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
730
753
  };
731
754
 
732
755
  const localisedStrings = {
@@ -741,7 +764,7 @@ const localisedStrings = {
741
764
  };
742
765
  const translate = (translations, key, count) => {
743
766
  const string = key in translations ? translations[key] : localisedStrings[key];
744
- return count === undefined ? string : string?.replace('{{count}}', String(count));
767
+ return count === undefined ? string : string === null || string === void 0 ? void 0 : string.replace('{{count}}', String(count));
745
768
  };
746
769
  const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
747
770
 
@@ -759,10 +782,10 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
759
782
  if (icons)
760
783
  setIcons(icons);
761
784
  }, [theme, icons]);
762
- const onEdit = async (value, path) => {
785
+ const onEdit = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
763
786
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
764
787
  if (srcEdit) {
765
- const result = await srcEdit({
788
+ const result = yield srcEdit({
766
789
  currentData,
767
790
  newData,
768
791
  currentValue,
@@ -778,11 +801,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
778
801
  }
779
802
  else
780
803
  setData(newData);
781
- };
782
- const onDelete = async (value, path) => {
804
+ });
805
+ const onDelete = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
783
806
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
784
807
  if (srcDelete) {
785
- const result = await srcDelete({
808
+ const result = yield srcDelete({
786
809
  currentData,
787
810
  newData,
788
811
  currentValue,
@@ -798,11 +821,11 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
798
821
  }
799
822
  else
800
823
  setData(newData);
801
- };
802
- const onAdd = async (value, path) => {
824
+ });
825
+ const onAdd = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
803
826
  const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
804
827
  if (srcAdd) {
805
- const result = await srcAdd({
828
+ const result = yield srcAdd({
806
829
  currentData,
807
830
  newData,
808
831
  currentValue,
@@ -818,7 +841,7 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
818
841
  }
819
842
  else
820
843
  setData(newData);
821
- };
844
+ });
822
845
  const restrictEditFilter = getFilterFunction(restrictEdit);
823
846
  const restrictDeleteFilter = getFilterFunction(restrictDelete);
824
847
  const restrictAddFilter = getFilterFunction(restrictAdd);
@@ -841,9 +864,9 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
841
864
  };
842
865
  if (!styles)
843
866
  return null;
844
- return (jsx("div", { className: 'jer-editor-container ' + className, style: { ...styles.container, minWidth, maxWidth }, children: isCollection(data) && jsx(CollectionNode, { data: data, path: [], ...otherProps }) }));
867
+ 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)) })));
845
868
  };
846
- const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, { ...props }) }));
869
+ const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, Object.assign({}, props)) }));
847
870
  const updateDataObject = (data, path, newValue, action) => {
848
871
  if (path.length === 0) {
849
872
  return {
@@ -870,4 +893,4 @@ const getFilterFunction = (propValue) => {
870
893
  return propValue;
871
894
  };
872
895
 
873
- export { JsonEditor, themes };
896
+ export { JsonEditor, JsonEditor as default, themes };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "json-edit-react",
3
- "version": "0.9.1",
3
+ "version": "0.9.4",
4
4
  "description": "React component for editing or viewing JSON/object data",
5
5
  "main": "build/index.cjs.js",
6
6
  "module": "build/index.esm.js",