json-edit-react 1.1.0 → 1.1.3

package/build/index.esm.js

@@ -1,1078 +1 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useContext, useEffect, useMemo, useRef, useCallback } from 'react';
-import assign from 'object-property-assigner';
-import extract from 'object-property-extractor';
-import clone from 'just-clone';
-import { HiOutlineClipboardCopy } from 'react-icons/hi';
-import { BiEdit, BiPlusCircle } from 'react-icons/bi';
-import { MdDeleteForever } from 'react-icons/md';
-import { FiCheckCircle } from 'react-icons/fi';
-import { TiCancel } from 'react-icons/ti';
-import { FaChevronDown } from 'react-icons/fa';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.5s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* 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-copy-pulse {\n  position: relative;\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n  /* font-size: '2em'; */\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
-n(css,{});
-
-const defaultTheme$1 = {
-    displayName: 'Default',
-    fragments: { edit: 'rgb(42, 161, 152)' },
-    styles: {
-        container: {
-            backgroundColor: '#f6f6f6',
-            fontFamily: 'monospace',
-        },
-        property: '#292929',
-        bracket: { color: 'rgb(0, 43, 54)', fontWeight: 'bold' },
-        itemCount: { color: 'rgba(0, 0, 0, 0.3)', fontStyle: 'italic' },
-        string: 'rgb(203, 75, 22)',
-        number: 'rgb(38, 139, 210)',
-        boolean: 'green',
-        null: { color: 'rgb(220, 50, 47)', fontVariant: 'small-caps', fontWeight: 'bold' },
-        input: ['#292929', { fontSize: '90%' }],
-        inputHighlight: '#b3d8ff',
-        error: { fontSize: '0.8em', color: 'red', fontWeight: 'bold' },
-        iconCollection: 'rgb(0, 43, 54)',
-        iconEdit: 'edit',
-        iconDelete: 'rgb(203, 75, 22)',
-        iconAdd: 'edit',
-        iconCopy: 'rgb(38, 139, 210)',
-        iconOk: 'green',
-        iconCancel: 'rgb(203, 75, 22)',
-    },
-};
-const themes = {
-    default: defaultTheme$1,
-    githubDark: {
-        displayName: 'Github Dark',
-        styles: {
-            container: {
-                backgroundColor: '#0d1117',
-                color: 'white',
-            },
-            property: '#E6EDF3',
-            bracket: '#56d364',
-            itemCount: '#8B949E',
-            string: '#A5D6FF',
-            number: '#D2A8FF',
-            boolean: { color: '#FF7B72', fontSize: '90%', fontWeight: 'bold' },
-            null: 'green',
-            iconCollection: '#D2A8FF',
-            iconEdit: '#D2A8FF',
-            iconDelete: 'rgb(203, 75, 22)',
-            iconAdd: 'rgb(203, 75, 22)',
-            iconCopy: '#A5D6FF',
-            iconOk: '#56d364',
-            iconCancel: 'rgb(203, 75, 22)',
-        },
-    },
-    githubLight: {
-        displayName: 'Github Light',
-        styles: {
-            container: 'white',
-            property: '#1F2328',
-            bracket: '#00802e',
-            itemCount: '#8B949E',
-            string: '#0A3069',
-            number: '#953800',
-            boolean: { color: '#CF222E', fontSize: '90%', fontWeight: 'bold' },
-            null: '#FF7B72',
-            iconCollection: '#8250DF',
-            iconEdit: '#8250DF',
-            iconDelete: 'rgb(203, 75, 22)',
-            iconAdd: '#8250DF',
-            iconCopy: '#57606A',
-        },
-    },
-    monoDark: {
-        displayName: 'Black & White',
-        fragments: {
-            lightText: { color: 'white' },
-            midGrey: '#5c5c5c',
-        },
-        styles: {
-            container: ['lightText', { backgroundColor: 'black' }],
-            property: 'lightText',
-            bracket: 'midGrey',
-            itemCount: '#4a4a4a',
-            string: '#a8a8a8',
-            number: '#666666',
-            boolean: { color: '#848484', fontStyle: 'italic' },
-            null: '#333333',
-            iconCollection: 'midGrey',
-            iconEdit: 'midGrey',
-            iconDelete: 'midGrey',
-            iconAdd: 'midGrey',
-            iconCopy: 'midGrey',
-            iconOk: 'midGrey',
-            iconCancel: 'midGrey',
-        },
-    },
-    monoLight: {
-        fragments: { midGrey: '#a3a3a3' },
-        displayName: 'White & Black',
-        styles: {
-            container: 'white',
-            property: 'black',
-            bracket: 'midGrey',
-            itemCount: '#b5b5b5',
-            string: '#575757',
-            number: '#999999',
-            boolean: { color: '#7b7b7b', fontStyle: 'italic' },
-            null: '#cccccc',
-            iconCollection: 'midGrey',
-            iconEdit: 'midGrey',
-            iconDelete: 'midGrey',
-            iconAdd: 'midGrey',
-            iconCopy: 'midGrey',
-            iconOk: 'midGrey',
-            iconCancel: 'midGrey',
-        },
-    },
-    candyWrapper: {
-        displayName: 'Candy Wrapper',
-        fragments: {
-            minty: { backgroundColor: '#F1FAEE' },
-            pale: { color: '#A8DADC' },
-            mid: { color: '#457B9D' },
-            dark: { color: '#1D3557' },
-            pop: { color: '#E63946' },
-            darkBlue: { color: '#2B2D42' },
-        },
-        styles: {
-            container: 'minty',
-            property: 'pop',
-            bracket: 'dark',
-            itemCount: 'pale',
-            string: 'mid',
-            number: ['darkBlue', { fontSize: '85%' }],
-            boolean: ['mid', { fontStyle: 'italic', fontWeight: 'bold', fontSize: '80%' }],
-            null: ['#cccccc', { fontWeight: 'bold' }],
-            iconCollection: '#1D3557',
-            iconEdit: '#457B9D',
-            iconDelete: '#E63946',
-            iconAdd: '#2B2D42',
-            iconCopy: '#1D3557',
-            iconCancel: '#E63946',
-        },
-    },
-    psychedelic: {
-        displayName: 'Psychedelic',
-        fragments: {
-            minty: {
-                backgroundColor: '#F1FAEE',
-            },
-            pale: {
-                color: '#A8DADC',
-            },
-            mid: {
-                color: '#457B9D',
-            },
-            dark: {
-                color: '#1D3557',
-            },
-            pop: {
-                color: '#E63946',
-            },
-            fluroYellow: 'rgb(242, 228, 21)',
-            fluroGreen: 'rgb(68, 255, 62)',
-            hotPink: '#f7379a',
-        },
-        styles: {
-            container: {
-                backgroundColor: 'unset',
-                background: 'linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)',
-                color: 'black',
-            },
-            property: 'black',
-            bracket: 'fluroYellow',
-            itemCount: [
-                'pale',
-                {
-                    opacity: 0.7,
-                },
-            ],
-            string: 'white',
-            number: [
-                '#33d9ff',
-                {
-                    fontSize: '90%',
-                    fontWeight: 'bold',
-                },
-            ],
-            boolean: [
-                'fluroGreen',
-                {
-                    fontWeight: 'bold',
-                    fontSize: '80%',
-                },
-            ],
-            null: [
-                'black',
-                {
-                    fontWeight: 'bold',
-                    opacity: 0.3,
-                    backgroundColor: 'rgb(255, 255, 255, 0.5)',
-                    padding: '0 0.4em',
-                    borderRadius: '0.4em',
-                },
-            ],
-            iconCollection: 'fluroYellow',
-            iconEdit: ['black'],
-            iconDelete: [
-                'white',
-                {
-                    opacity: 0.5,
-                },
-            ],
-            iconAdd: [
-                'white',
-                {
-                    opacity: 0.5,
-                },
-            ],
-            iconCopy: 'rgb(32, 84, 242)',
-            iconOk: 'fluroGreen',
-            iconCancel: 'hotPink',
-        },
-    },
-};
-const emptyStyleObject = {
-    container: {},
-    property: {},
-    bracket: {},
-    itemCount: {},
-    string: {},
-    number: {},
-    boolean: {},
-    null: {},
-    input: {},
-    inputHighlight: {},
-    error: {},
-    iconCollection: {},
-    iconEdit: {},
-    iconDelete: {},
-    iconAdd: {},
-    iconCopy: {},
-    iconOk: {},
-    iconCancel: {},
-};
-
-const defaultTheme = themes.default;
-const initialContext = {
-    styles: emptyStyleObject,
-    setTheme: (_) => { },
-    icons: {},
-    setIcons: () => { },
-};
-const ThemeProviderContext = createContext(initialContext);
-const ThemeProvider = ({ children }) => {
-    const [styles, setStyles] = useState(emptyStyleObject);
-    const [icons, setIcons] = useState({});
-    const setTheme = (theme) => setStyles(compileStyles(theme));
-    return (jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
-};
-const useTheme = () => useContext(ThemeProviderContext);
-const compileStyles = (themeInput) => {
-    if (typeof themeInput === 'string')
-        return buildStyleObject(themes[themeInput]);
-    if (Array.isArray(themeInput)) {
-        const [name, overrides] = themeInput;
-        return buildStyleObject(themes[name], isStyleObject(overrides) ? { styles: overrides } : overrides);
-    }
-    return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
-};
-const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
-    var _a, _b, _c, _d;
-    const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
-        const { fragments, styles } = theme;
-        const compiledStyles = {};
-        Object.entries(styles).forEach(([key, value]) => {
-            const elements = Array.isArray(value) ? value : [value];
-            const cssStyles = elements.reduce((acc, curr) => {
-                var _a;
-                if (typeof curr === 'string') {
-                    const style = (_a = fragments === null || fragments === void 0 ? void 0 : fragments[curr]) !== null && _a !== void 0 ? _a : curr;
-                    switch (typeof style) {
-                        case 'string':
-                            return Object.assign(Object.assign({}, acc), { [defaultStyleProperties[key]]: style });
-                        default:
-                            return Object.assign(Object.assign({}, acc), style);
-                    }
-                }
-                else
-                    return Object.assign(Object.assign({}, acc), curr);
-            }, {});
-            compiledStyles[key] = cssStyles;
-        });
-        return compiledStyles;
-    });
-    const finalStyles = {};
-    Object.keys(defaultTheme.styles).forEach((key) => {
-        finalStyles[key] = Object.assign(Object.assign(Object.assign({}, defaultStyles[key]), baseStyles[key]), overrideStyles[key]);
-    });
-    if ((_a = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _a === void 0 ? void 0 : _a.backgroundColor)
-        document.documentElement.style.setProperty('--jer-highlight-color', (_b = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.inputHighlight) === null || _b === void 0 ? void 0 : _b.backgroundColor);
-    if ((_c = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _c === void 0 ? void 0 : _c.color)
-        document.documentElement.style.setProperty('--jer-icon-copy-color', (_d = finalStyles === null || finalStyles === void 0 ? void 0 : finalStyles.iconCopy) === null || _d === void 0 ? void 0 : _d.color);
-    return finalStyles;
-};
-const isStyleObject = (overrideObject) => {
-    return !('styles' in overrideObject);
-};
-const defaultStyleProperties = {
-    container: 'backgroundColor',
-    property: 'color',
-    bracket: 'color',
-    itemCount: 'color',
-    string: 'color',
-    number: 'color',
-    boolean: 'color',
-    null: 'color',
-    input: 'color',
-    inputHighlight: 'backgroundColor',
-    error: 'color',
-    iconCollection: 'color',
-    iconEdit: 'color',
-    iconDelete: 'color',
-    iconAdd: 'color',
-    iconCopy: 'color',
-    iconOk: 'color',
-    iconCancel: 'color',
-};
-
-const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
-    const { styles } = useTheme();
-    const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
-    return (jsxs("div", { style: { display: 'grid' }, children: [jsx("textarea", { style: Object.assign({ height: 'auto', gridArea: '1 / 1 / 2 / 2', overflowY: 'auto' }, styles.input), rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
-                    if (value.length < 40)
-                        e.target.select();
-                }, onKeyDown: handleKeyPress }), jsx("span", { className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input), children: dummyValue })] }));
-};
-
-const INVALID_FUNCTION_STRING = '**INVALID_FUNCTION**';
-const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
-const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, stringTruncate, }) => {
-    const { styles } = useTheme();
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey)
-            handleEdit();
-        else if (e.key === 'Escape')
-            handleCancel();
-    };
-    const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxs("span", { children: [line, index < arr.length - 1 ? jsx("br", {}) : null] }, index)));
-    return isEditing ? (jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxs("div", { onDoubleClick: () => setIsEditing(true), onClick: (e) => {
-            if (e.getModifierState('Control') || e.getModifierState('Meta'))
-                setIsEditing(true);
-        }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
-};
-const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
-    const { styles } = useTheme();
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter')
-            handleEdit();
-        else if (e.key === 'Escape')
-            handleCancel();
-    };
-    const validateNumber = (input) => {
-        return input.replace(/[^0-9.-]/g, '');
-    };
-    return isEditing ? (jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(validateNumber(e.target.value)), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number, children: value }));
-};
-const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
-    const { styles } = useTheme();
-    useEffect(() => {
-        if (isEditing)
-            document.addEventListener('keydown', listenForSubmit);
-        return () => document.removeEventListener('keydown', listenForSubmit);
-    }, [isEditing]);
-    const listenForSubmit = (event) => {
-        if (event.key === 'Enter') {
-            handleEdit();
-        }
-        else if (event.key === 'Escape')
-            handleCancel();
-    };
-    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) }));
-};
-const NullValue = ({ value, isEditing, setIsEditing, handleEdit, handleCancel, }) => {
-    const { styles } = useTheme();
-    useEffect(() => {
-        if (isEditing)
-            document.addEventListener('keydown', listenForSubmit);
-        return () => document.removeEventListener('keydown', listenForSubmit);
-    }, [isEditing]);
-    const listenForSubmit = (event) => {
-        if (event.key === 'Enter') {
-            handleEdit();
-        }
-        else if (event.key === 'Escape')
-            handleCancel();
-    };
-    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) }));
-};
-const ObjectValue = ({ value, translate, isEditing, handleEdit, handleCancel, }) => {
-    useEffect(() => {
-        if (isEditing)
-            document.addEventListener('keydown', listenForSubmit);
-        return () => document.removeEventListener('keydown', listenForSubmit);
-    }, []);
-    const listenForSubmit = (event) => {
-        if (event.key === 'Enter') {
-            handleEdit();
-        }
-        else if (event.key === 'Escape')
-            handleCancel();
-    };
-    return (jsx("span", { className: "jer-value-object", children: `{${translate('DEFAULT_NEW_KEY')}: "${value}" }` }));
-};
-const ArrayValue = ({ value, isEditing, handleEdit, handleCancel, }) => {
-    useEffect(() => {
-        if (isEditing)
-            document.addEventListener('keydown', listenForSubmit);
-        return () => document.removeEventListener('keydown', listenForSubmit);
-    }, []);
-    const listenForSubmit = (event) => {
-        if (event.key === 'Enter') {
-            handleEdit();
-        }
-        else if (event.key === 'Escape')
-            handleCancel();
-    };
-    return jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
-};
-const InvalidValue = ({ value }) => {
-    let message = 'Error!';
-    switch (typeof value) {
-        case 'string':
-            if (value === INVALID_FUNCTION_STRING)
-                message = 'Function';
-            break;
-        case 'undefined':
-            message = 'Undefined';
-            break;
-        case 'symbol':
-            message = 'Symbol';
-            break;
-    }
-    return jsx("span", { className: "jer-value-invalid", children: message });
-};
-
-const Icon = ({ name, rotate }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const { styles, icons } = useTheme();
-    const commonProps = { size: '1.4em', className: 'jer-icon' };
-    switch (name) {
-        case 'add':
-            return (_a = icons === null || icons === void 0 ? void 0 : icons.add) !== null && _a !== void 0 ? _a : jsx(BiPlusCircle, Object.assign({}, commonProps, { style: styles.iconAdd }));
-        case 'edit':
-            return (_b = icons === null || icons === void 0 ? void 0 : icons.edit) !== null && _b !== void 0 ? _b : jsx(BiEdit, Object.assign({}, commonProps, { style: styles.iconEdit }));
-        case 'delete':
-            return ((_c = icons === null || icons === void 0 ? void 0 : icons.delete) !== null && _c !== void 0 ? _c : jsx(MdDeleteForever, Object.assign({}, commonProps, { style: styles.iconDelete, size: "1.5em" })));
-        case 'copy':
-            return (_d = icons === null || icons === void 0 ? void 0 : icons.copy) !== null && _d !== void 0 ? _d : jsx(HiOutlineClipboardCopy, Object.assign({}, commonProps, { style: styles.iconCopy }));
-        case 'ok':
-            return ((_e = icons === null || icons === void 0 ? void 0 : icons.ok) !== null && _e !== void 0 ? _e : (jsx(FiCheckCircle, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '90%' }, styles.iconOk) }))));
-        case 'cancel':
-            return ((_f = icons === null || icons === void 0 ? void 0 : icons.cancel) !== null && _f !== void 0 ? _f : (jsx(TiCancel, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '130%' }, styles.iconCancel) }))));
-        case 'chevron':
-            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsx(FaChevronDown, { className: `jer-accordion-icon${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
-        default:
-            return jsx(Fragment, {});
-    }
-};
-
-const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type, data, path, name, translate, }) => {
-    const { styles } = useTheme();
-    const NEW_KEY_PROMPT = translate('KEY_NEW');
-    const [isAdding, setIsAdding] = useState(false);
-    const [newKey, setNewKey] = useState(NEW_KEY_PROMPT);
-    useEffect(() => {
-        if (!isAdding)
-            setNewKey(NEW_KEY_PROMPT);
-    }, [isAdding]);
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && handleAdd) {
-            setIsAdding(false);
-            handleAdd(newKey);
-        }
-        else if (e.key === 'Escape')
-            setIsAdding(false);
-    };
-    const handleCopy = (e) => {
-        let copyType = 'value';
-        let value;
-        let stringValue = '';
-        if (enableClipboard) {
-            switch (e.ctrlKey || e.metaKey) {
-                case true:
-                    value = stringifyPath(path);
-                    stringValue = value;
-                    copyType = 'path';
-                    break;
-                default:
-                    value = data;
-                    stringValue = type ? JSON.stringify(data, null, 2) : String(value);
-            }
-            navigator.clipboard.writeText(stringValue);
-        }
-        if (typeof enableClipboard === 'function')
-            enableClipboard({ value, stringValue, path, key: name, type: copyType });
-    };
-    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: () => {
-                    if (type === 'object')
-                        setIsAdding(true);
-                    else
-                        handleAdd('');
-                }, children: jsx(Icon, { name: "add" }) })), isAdding && handleAdd && type === 'object' && (jsxs(Fragment, { children: [jsx("input", { className: "jer-input-new-key", type: "text", name: "new-object-key", value: newKey, onChange: (e) => setNewKey(e.target.value), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: Object.assign({}, styles.input) }), jsx(InputButtons, { onOk: () => {
-                            if (!!newKey) {
-                                setIsAdding(false);
-                                handleAdd(newKey);
-                            }
-                        }, onCancel: () => {
-                            setIsAdding(false);
-                        } })] }))] }));
-};
-const InputButtons = ({ onOk, onCancel }) => {
-    return (jsxs("div", { className: "jer-confirm-buttons", children: [jsx("div", { onClick: onOk, children: jsx(Icon, { name: "ok" }) }), jsx("div", { onClick: onCancel, children: jsx(Icon, { name: "cancel" }) })] }));
-};
-const stringifyPath = (path) => path.reduce((str, part) => {
-    if (typeof part === 'number')
-        return `${str}[${part}]`;
-    else
-        return str === '' ? part : `${str}.${part}`;
-}, '');
-
-const ERROR_DISPLAY_TIME = 2500;
-const ValueDataTypes = ['string', 'number', 'boolean', 'null'];
-const CollectionDataTypes = ['object', 'array'];
-const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
-
-const getCustomNode = (customNodeDefinitions = [], filterProps) => {
-    const matchingDefinitions = customNodeDefinitions.filter(({ condition }) => condition(filterProps));
-    if (matchingDefinitions.length === 0)
-        return {};
-    const { element, props, hideKey = false } = matchingDefinitions[0];
-    return { CustomNode: element, customNodeProps: props, hideKey };
-};
-
-const CustomNodeWrapper = ({ name, hideKey, children, indent, }) => {
-    const { styles } = useTheme();
-    const indentStyle = indent ? { marginLeft: `${indent / 2}em` } : {};
-    return (jsx("div", { className: "jer-component jer-value-component", style: indentStyle, children: jsxs("div", { className: "jer-value-main-row", style: {
-                flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
-            }, children: [!hideKey && (jsxs("label", { htmlFor: name, 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, ":", ' '] })), jsx("div", { className: "jer-value-and-buttons", style: { paddingLeft: hideKey ? 0 : undefined }, children: children })] }) }));
-};
-
-const ValueNodeWrapper = (props) => {
-    const { data, parentData, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, restrictTypeSelection, showLabel, stringTruncate, indent, translate, customNodeDefinitions, } = props;
-    const { styles } = useTheme();
-    const [isEditing, setIsEditing] = useState(false);
-    const [isEditingKey, setIsEditingKey] = useState(false);
-    const [value, setValue] = useState(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
-    const [error, setError] = useState(null);
-    const [dataType, setDataType] = useState(getDataType(data));
-    useEffect(() => {
-        setValue(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
-        setDataType(getDataType(data));
-    }, [data, error]);
-    const handleChangeDataType = (type) => {
-        const customNode = customNodeDefinitions.find((customNode) => customNode.name === type);
-        if (customNode) {
-            onEdit(customNode.defaultValue, path);
-        }
-        else {
-            setValue(convertValue(value, type));
-            setDataType(type);
-        }
-    };
-    const logError = (errorString) => {
-        setError(errorString);
-        setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
-        console.log('Error', errorString);
-    };
-    const handleEdit = () => {
-        setIsEditing(false);
-        let newValue;
-        switch (dataType) {
-            case 'object':
-                newValue = { [translate('DEFAULT_NEW_KEY')]: value };
-                break;
-            case 'array':
-                newValue = value !== null ? value : [];
-                break;
-            case 'number':
-                const n = Number(value);
-                if (isNaN(n))
-                    newValue = 0;
-                else
-                    newValue = n;
-                break;
-            default:
-                newValue = value;
-        }
-        onEdit(newValue, path).then((error) => {
-            if (error)
-                logError(error);
-        });
-    };
-    const handleEditKey = (newKey) => {
-        setIsEditingKey(false);
-        if (!parentData)
-            return;
-        const parentPath = path.slice(0, -1);
-        if (!newKey)
-            return;
-        const newData = Object.fromEntries(Object.entries(parentData).map(([key, val]) => (key === name ? [newKey, val] : [key, val])));
-        onEdit(newData, parentPath);
-    };
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter')
-            handleEditKey(e.target.value);
-        else if (e.key === 'Escape')
-            handleCancel();
-    };
-    const handleCancel = () => {
-        setIsEditing(false);
-        setIsEditingKey(false);
-        setValue(data);
-        setDataType(getDataType(data));
-    };
-    const handleDelete = () => {
-        onDelete(value, path).then((error) => {
-            if (error)
-                logError(error);
-        });
-    };
-    const filterProps = { key: name, path, level: path.length, value: data, size: null };
-    const canEdit = useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
-    const canDelete = useMemo(() => !restrictDeleteFilter(filterProps), [filterProps]);
-    const isArray = typeof path.slice(-1)[0] === 'number';
-    const canEditKey = !isArray && canEdit && canDelete;
-    const inputProps = {
-        value,
-        parentData,
-        setValue,
-        isEditing,
-        setIsEditing: canEdit ? () => setIsEditing(true) : () => { },
-        handleEdit,
-        handleCancel,
-        path,
-        stringTruncate,
-        translate,
-    };
-    const { CustomNode, customNodeProps, hideKey } = getCustomNode(customNodeDefinitions, {
-        key: name,
-        path,
-        level: path.length,
-        value: data,
-        size: 0,
-    });
-    const allDataTypes = [
-        ...customNodeDefinitions
-            .filter(({ showInTypesSelector = false }) => showInTypesSelector)
-            .map(({ name }) => name),
-        ...DataTypes,
-    ];
-    const allowedDataTypes = useMemo(() => {
-        if (typeof restrictTypeSelection === 'boolean')
-            return restrictTypeSelection ? [] : allDataTypes;
-        if (Array.isArray(restrictTypeSelection))
-            return restrictTypeSelection;
-        const result = restrictTypeSelection(filterProps);
-        if (typeof result === 'boolean')
-            return result ? [] : allDataTypes;
-        return result;
-    }, [filterProps, restrictTypeSelection]);
-    return CustomNode ? (jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, indent: indent, children: jsx(CustomNode, Object.assign({ customProps: customNodeProps }, props)) })) : (jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxs("div", { className: "jer-value-main-row", style: {
-                flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
-            }, children: [showLabel && !isEditingKey && (jsxs("label", { 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 }), onDoubleClick: () => canEditKey && setIsEditingKey(true), children: [name, ":", ' '] })), showLabel && isEditingKey && (jsx("input", { className: "jer-object-key", type: "text", name: path.join('.'), defaultValue: name, autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(name).length / 1.5 + 0.5}em` } })), jsxs("div", { className: "jer-value-and-buttons", children: [jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
-                            !error && (jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && allowedDataTypes.length > 0 && (jsxs("div", { className: "jer-select", children: [jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: allowedDataTypes.map((type) => (jsx("option", { value: type, children: type }, type))) }), jsx("span", { className: "focus" })] })), !isEditing && error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] })] }) }));
-};
-const getDataType = (value) => {
-    if (typeof value === 'string')
-        return 'string';
-    if (typeof value === 'number')
-        return 'number';
-    if (typeof value === 'boolean')
-        return 'boolean';
-    if (value === null)
-        return 'null';
-    return 'invalid';
-};
-const getInputComponent = (dataType, inputProps) => {
-    const value = inputProps.value;
-    switch (dataType) {
-        case 'string':
-            return jsx(StringValue, Object.assign({}, inputProps, { value: value }));
-        case 'number':
-            return jsx(NumberValue, Object.assign({}, inputProps, { value: value }));
-        case 'boolean':
-            return jsx(BooleanValue, Object.assign({}, inputProps, { value: value }));
-        case 'null':
-            return jsx(NullValue, Object.assign({}, inputProps));
-        case 'object':
-            return jsx(ObjectValue, Object.assign({}, inputProps, { value: value }));
-        case 'array':
-            return jsx(ArrayValue, Object.assign({}, inputProps));
-        default:
-            return jsx(InvalidValue, Object.assign({}, inputProps));
-    }
-};
-const convertValue = (value, type) => {
-    switch (type) {
-        case 'string':
-            return String(value);
-        case 'number':
-            const n = Number(value);
-            return isNaN(n) ? 0 : n;
-        case 'boolean':
-            return !!value;
-        case 'null':
-            return null;
-        case 'object':
-            return value;
-        case 'array':
-            return [value];
-        default:
-            return String(value);
-    }
-};
-
-const isCollection = (value) => value !== null && typeof value == 'object';
-const CollectionNode = (_a) => {
-    var { data, path, name, parentData, showCollectionCount } = _a, props = __rest(_a, ["data", "path", "name", "parentData", "showCollectionCount"]);
-    const { styles } = useTheme();
-    const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, customNodeDefinitions, } = props;
-    const [isEditing, setIsEditing] = useState(false);
-    const [isEditingKey, setIsEditingKey] = useState(false);
-    const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2));
-    const [error, setError] = useState(null);
-    const collectionSize = Object.keys(data).length;
-    const filterProps = { key: name, path, level: path.length, value: data, size: collectionSize };
-    const startCollapsed = collapseFilter(filterProps);
-    const [collapsed, setCollapsed] = useState(startCollapsed);
-    const hasBeenOpened = useRef(!startCollapsed);
-    const [isAnimating, setIsAnimating] = useState(false);
-    useEffect(() => {
-        setStringifiedValue(JSON.stringify(data, null, 2));
-    }, [data]);
-    useEffect(() => {
-        setCollapsed(collapseFilter(filterProps));
-    }, [collapseFilter]);
-    const collectionType = Array.isArray(data) ? 'array' : 'object';
-    const brackets = collectionType === 'array' ? { open: '[', close: ']' } : { open: '{', close: '}' };
-    const transitionTime = getComputedStyle(document.documentElement).getPropertyValue('--jer-expand-transition-time');
-    const handleKeyPress = (e) => {
-        if (e.key === 'Enter' && (e.metaKey || e.shiftKey || e.ctrlKey))
-            handleEdit();
-        else if (e.key === 'Escape')
-            handleCancel();
-    };
-    const handleCollapse = () => {
-        if (!isEditing) {
-            setIsAnimating(true);
-            hasBeenOpened.current = true;
-            setCollapsed(!collapsed);
-            setTimeout(() => setIsAnimating(false), 500);
-        }
-    };
-    const showError = (errorString) => {
-        setError(errorString);
-        setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
-        console.log('Error', errorString);
-    };
-    const handleEdit = () => {
-        try {
-            const value = JSON.parse(stringifiedValue);
-            setIsEditing(false);
-            setError(null);
-            onEdit(value, path).then((error) => {
-                if (error)
-                    showError(error);
-            });
-        }
-        catch (_a) {
-            setError(translate('ERROR_INVALID_JSON'));
-            setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
-            console.log('Invalid JSON');
-            return;
-        }
-    };
-    const handleEditKey = (newKey) => {
-        setIsEditingKey(false);
-        if (!parentData)
-            return;
-        const parentPath = path.slice(0, -1);
-        if (!newKey)
-            return;
-        const newData = Object.fromEntries(Object.entries(parentData).map(([key, val]) => (key === name ? [newKey, val] : [key, val])));
-        onEdit(newData, parentPath);
-    };
-    const handleKeyPressKeyEdit = (e) => {
-        if (e.key === 'Enter')
-            handleEditKey(e.target.value);
-        else if (e.key === 'Escape')
-            handleCancel();
-    };
-    const handleAdd = (key) => {
-        setCollapsed(false);
-        if (collectionType === 'array') {
-            onAdd(defaultValue, [...path, data.length]).then((error) => {
-                if (error)
-                    showError(error);
-            });
-        }
-        else if (key in data) {
-            showError(translate('ERROR_KEY_EXISTS'));
-            return;
-        }
-        else
-            onAdd(defaultValue, [...path, key]).then((error) => {
-                if (error)
-                    showError(error);
-            });
-    };
-    const handleDelete = path.length > 0
-        ? () => {
-            onDelete(data, path).then((result) => {
-                if (result)
-                    showError(result);
-            });
-        }
-        : undefined;
-    const handleCancel = () => {
-        setIsEditing(false);
-        setError(null);
-        setStringifiedValue(JSON.stringify(data, null, 2));
-    };
-    const canEdit = useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
-    const canDelete = useMemo(() => !restrictDeleteFilter(filterProps), [filterProps]);
-    const canAdd = useMemo(() => !restrictAddFilter(filterProps), [filterProps]);
-    const canEditKey = parentData !== null && canEdit && canAdd && canDelete;
-    const isArray = typeof path.slice(-1)[0] === 'number';
-    const showLabel = showArrayIndices || !isArray;
-    const showCount = showCollectionCount === 'when-closed' ? collapsed : showCollectionCount;
-    const keyValueArray = Object.entries(data).map(([key, value]) => [
-        collectionType === 'array' ? Number(key) : key,
-        value,
-    ]);
-    if (keySort && collectionType === 'object')
-        keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
-    const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    const { CustomNode, customNodeProps, hideKey } = getCustomNode(customNodeDefinitions, {
-        key: name,
-        path,
-        level: path.length,
-        value: data,
-        size: Object.keys(data).length,
-    });
-    return (jsx("div", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: CustomNode ? (jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, children: jsx(CustomNode, Object.assign({ data: data, path: path, name: name, parentData: parentData, customProps: customNodeProps }, props)) })) : (jsxs(Fragment, { children: [jsxs("div", { className: "jer-collection-header-row", children: [jsx("div", { onClick: handleCollapse, children: jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxs("div", { className: "jer-collection-name", children: [!isEditingKey && (jsx("span", { style: styles.property, onDoubleClick: () => canEditKey && setIsEditingKey(true), children: showLabel && name !== '' && name !== undefined ? `${name}:` : null })), isEditingKey && (jsx("input", { className: "jer-collection-name", type: "text", name: path.join('.'), defaultValue: name, autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPressKeyEdit, style: { width: `${String(name).length / 1.5 + 0.5}em` } })), !isEditing && (jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open }))] }), !isEditing && showCollectionCount && (jsx("div", { className: `jer-collection-item-count${showCount ? ' jer-visible' : ' jer-hidden'}`, style: styles.itemCount, children: collectionSize === 1
-                                ? translate('ITEM_SINGLE', 1)
-                                : translate('ITEMS_MULTIPLE', collectionSize) })), jsx("div", { className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket, children: brackets.close }), !isEditing && (jsx(EditButtons, { startEdit: canEdit
-                                ? () => {
-                                    setIsEditing(true);
-                                    setCollapsed(false);
-                                }
-                                : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] }), jsxs("div", { className: 'jer-collection-inner', style: {
-                        maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
-                        overflowY: collapsed || isAnimating ? 'hidden' : 'visible',
-                        transition: `max-height ${transitionTime}`,
-                    }, children: [isEditing ? (jsx("div", { 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", { className: "jer-collection-input-button-row", children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) })] }) })) : (jsx(Fragment, { children: !hasBeenOpened.current
-                                ? null
-                                : keyValueArray.map(([key, value]) => (jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, parentData: data, path: [...path, key], name: key, showCollectionCount: showCollectionCount }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, parentData: data, path: [...path, key], name: key }, props, { showLabel: 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 })) }), jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })] })] })) }));
-};
-
-const localisedStrings = {
-    ITEM_SINGLE: '{{count}} item',
-    ITEMS_MULTIPLE: '{{count}} items',
-    KEY_NEW: 'Enter new key',
-    ERROR_KEY_EXISTS: 'Key already exists',
-    ERROR_INVALID_JSON: 'Invalid JSON',
-    ERROR_UPDATE: 'Update unsuccessful',
-    ERROR_DELETE: 'Delete unsuccessful',
-    ERROR_ADD: 'Adding node unsuccessful',
-    DEFAULT_STRING: 'New data!',
-    DEFAULT_NEW_KEY: 'key',
-};
-const translate = (translations, key, count) => {
-    const string = key in translations ? translations[key] : localisedStrings[key];
-    return count === undefined ? string : string === null || string === void 0 ? void 0 : string.replace('{{count}}', String(count));
-};
-const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
-
-const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, showCollectionCount = true, restrictEdit = false, restrictDelete = false, restrictAdd = false, restrictTypeSelection = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', stringTruncate = 250, translations = {}, className, customNodeDefinitions = [], }) => {
-    const [data, setData] = useState(srcData);
-    const { styles, setTheme, setIcons } = useTheme();
-    const collapseFilter = useCallback(getFilterFunction(collapse), [collapse]);
-    const translate = useCallback(getTranslateFunction(translations), [translations]);
-    useEffect(() => {
-        setData(srcData);
-    }, [srcData]);
-    useEffect(() => {
-        if (theme)
-            setTheme(theme);
-        if (icons)
-            setIcons(icons);
-    }, [theme, icons]);
-    const onEdit = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
-        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
-        if (srcEdit) {
-            const result = yield srcEdit({
-                currentData,
-                newData,
-                currentValue,
-                newValue,
-                name: path.slice(-1)[0],
-                path,
-            });
-            if (result === undefined)
-                setData(newData);
-            if (result === false)
-                return translate('ERROR_UPDATE');
-            return result;
-        }
-        else
-            setData(newData);
-    });
-    const onDelete = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
-        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
-        if (srcDelete) {
-            const result = yield srcDelete({
-                currentData,
-                newData,
-                currentValue,
-                newValue,
-                name: path.slice(-1)[0],
-                path,
-            });
-            if (result === undefined)
-                setData(newData);
-            if (result === false)
-                return translate('ERROR_DELETE');
-            return result;
-        }
-        else
-            setData(newData);
-    });
-    const onAdd = (value, path) => __awaiter(void 0, void 0, void 0, function* () {
-        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
-        if (srcAdd) {
-            const result = yield srcAdd({
-                currentData,
-                newData,
-                currentValue,
-                newValue,
-                name: path.slice(-1)[0],
-                path,
-            });
-            if (result === undefined)
-                setData(newData);
-            if (result === false)
-                return translate('ERROR_ADD');
-            return result;
-        }
-        else
-            setData(newData);
-    });
-    const restrictEditFilter = getFilterFunction(restrictEdit);
-    const restrictDeleteFilter = getFilterFunction(restrictDelete);
-    const restrictAddFilter = getFilterFunction(restrictAdd);
-    const otherProps = {
-        name: rootName,
-        onEdit,
-        onDelete,
-        onAdd,
-        showCollectionCount,
-        collapseFilter,
-        restrictEditFilter,
-        restrictDeleteFilter,
-        restrictAddFilter,
-        restrictTypeSelection,
-        enableClipboard,
-        keySort,
-        showArrayIndices,
-        indent,
-        defaultValue,
-        stringTruncate,
-        translate,
-        customNodeDefinitions,
-        parentData: null,
-    };
-    if (!styles)
-        return null;
-    return (jsx("div", { 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))) : (jsx(ValueNodeWrapper, Object.assign({ data: data, path: [], showLabel: true }, otherProps))) }));
-};
-const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, Object.assign({}, props)) }));
-const updateDataObject = (data, path, newValue, action) => {
-    if (path.length === 0) {
-        return {
-            currentData: data,
-            newData: newValue,
-            currentValue: data,
-            newValue: newValue,
-        };
-    }
-    const currentValue = action !== 'add' ? extract(data, path) : undefined;
-    const newData = assign(clone(data), path, newValue, { remove: action === 'delete' });
-    return {
-        currentData: data,
-        newData,
-        currentValue,
-        newValue: action === 'update' ? newValue : undefined,
-    };
-};
-const getFilterFunction = (propValue) => {
-    if (typeof propValue === 'boolean')
-        return () => propValue;
-    if (typeof propValue === 'number')
-        return ({ level }) => level >= propValue;
-    return propValue;
-};
-
-export { JsonEditor, themes };
+import{jsx,jsxs,Fragment}from"react/jsx-runtime";import{createContext,useState,useContext,useEffect,useMemo,useRef,useCallback}from"react";import assign from"object-property-assigner";import extract from"object-property-extractor";import clone from"just-clone";import{HiOutlineClipboardCopy}from"react-icons/hi";import{BiEdit,BiPlusCircle}from"react-icons/bi";import{MdDeleteForever}from"react-icons/md";import{FiCheckCircle}from"react-icons/fi";import{TiCancel}from"react-icons/ti";import{FaChevronDown}from"react-icons/fa";function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){var value;result.done?resolve(result.value):(value=result.value,value instanceof P?value:new P((function(resolve){resolve(value)}))).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;var e=[],t=[];!function(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}(":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.5s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* 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-copy-pulse {\n  position: relative;\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n  /* font-size: '2em'; */\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n",{});const themes={default:{displayName:"Default",fragments:{edit:"rgb(42, 161, 152)"},styles:{container:{backgroundColor:"#f6f6f6",fontFamily:"monospace"},property:"#292929",bracket:{color:"rgb(0, 43, 54)",fontWeight:"bold"},itemCount:{color:"rgba(0, 0, 0, 0.3)",fontStyle:"italic"},string:"rgb(203, 75, 22)",number:"rgb(38, 139, 210)",boolean:"green",null:{color:"rgb(220, 50, 47)",fontVariant:"small-caps",fontWeight:"bold"},input:["#292929",{fontSize:"90%"}],inputHighlight:"#b3d8ff",error:{fontSize:"0.8em",color:"red",fontWeight:"bold"},iconCollection:"rgb(0, 43, 54)",iconEdit:"edit",iconDelete:"rgb(203, 75, 22)",iconAdd:"edit",iconCopy:"rgb(38, 139, 210)",iconOk:"green",iconCancel:"rgb(203, 75, 22)"}},githubDark:{displayName:"Github Dark",styles:{container:{backgroundColor:"#0d1117",color:"white"},property:"#E6EDF3",bracket:"#56d364",itemCount:"#8B949E",string:"#A5D6FF",number:"#D2A8FF",boolean:{color:"#FF7B72",fontSize:"90%",fontWeight:"bold"},null:"green",iconCollection:"#D2A8FF",iconEdit:"#D2A8FF",iconDelete:"rgb(203, 75, 22)",iconAdd:"rgb(203, 75, 22)",iconCopy:"#A5D6FF",iconOk:"#56d364",iconCancel:"rgb(203, 75, 22)"}},githubLight:{displayName:"Github Light",styles:{container:"white",property:"#1F2328",bracket:"#00802e",itemCount:"#8B949E",string:"#0A3069",number:"#953800",boolean:{color:"#CF222E",fontSize:"90%",fontWeight:"bold"},null:"#FF7B72",iconCollection:"#8250DF",iconEdit:"#8250DF",iconDelete:"rgb(203, 75, 22)",iconAdd:"#8250DF",iconCopy:"#57606A"}},monoDark:{displayName:"Black & White",fragments:{lightText:{color:"white"},midGrey:"#5c5c5c"},styles:{container:["lightText",{backgroundColor:"black"}],property:"lightText",bracket:"midGrey",itemCount:"#4a4a4a",string:"#a8a8a8",number:"#666666",boolean:{color:"#848484",fontStyle:"italic"},null:"#333333",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},monoLight:{fragments:{midGrey:"#a3a3a3"},displayName:"White & Black",styles:{container:"white",property:"black",bracket:"midGrey",itemCount:"#b5b5b5",string:"#575757",number:"#999999",boolean:{color:"#7b7b7b",fontStyle:"italic"},null:"#cccccc",iconCollection:"midGrey",iconEdit:"midGrey",iconDelete:"midGrey",iconAdd:"midGrey",iconCopy:"midGrey",iconOk:"midGrey",iconCancel:"midGrey"}},candyWrapper:{displayName:"Candy Wrapper",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},darkBlue:{color:"#2B2D42"}},styles:{container:"minty",property:"pop",bracket:"dark",itemCount:"pale",string:"mid",number:["darkBlue",{fontSize:"85%"}],boolean:["mid",{fontStyle:"italic",fontWeight:"bold",fontSize:"80%"}],null:["#cccccc",{fontWeight:"bold"}],iconCollection:"#1D3557",iconEdit:"#457B9D",iconDelete:"#E63946",iconAdd:"#2B2D42",iconCopy:"#1D3557",iconCancel:"#E63946"}},psychedelic:{displayName:"Psychedelic",fragments:{minty:{backgroundColor:"#F1FAEE"},pale:{color:"#A8DADC"},mid:{color:"#457B9D"},dark:{color:"#1D3557"},pop:{color:"#E63946"},fluroYellow:"rgb(242, 228, 21)",fluroGreen:"rgb(68, 255, 62)",hotPink:"#f7379a"},styles:{container:{backgroundColor:"unset",background:"linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)",color:"black"},property:"black",bracket:"fluroYellow",itemCount:["pale",{opacity:.7}],string:"white",number:["#33d9ff",{fontSize:"90%",fontWeight:"bold"}],boolean:["fluroGreen",{fontWeight:"bold",fontSize:"80%"}],null:["black",{fontWeight:"bold",opacity:.3,backgroundColor:"rgb(255, 255, 255, 0.5)",padding:"0 0.4em",borderRadius:"0.4em"}],iconCollection:"fluroYellow",iconEdit:["black"],iconDelete:["white",{opacity:.5}],iconAdd:["white",{opacity:.5}],iconCopy:"rgb(32, 84, 242)",iconOk:"fluroGreen",iconCancel:"hotPink"}}},emptyStyleObject={container:{},property:{},bracket:{},itemCount:{},string:{},number:{},boolean:{},null:{},input:{},inputHighlight:{},error:{},iconCollection:{},iconEdit:{},iconDelete:{},iconAdd:{},iconCopy:{},iconOk:{},iconCancel:{}},defaultTheme=themes.default,ThemeProviderContext=createContext({styles:emptyStyleObject,setTheme:_=>{},icons:{},setIcons:()=>{}}),ThemeProvider=({children:children})=>{const[styles,setStyles]=useState(emptyStyleObject),[icons,setIcons]=useState({});return jsx(ThemeProviderContext.Provider,{value:{styles:styles,setTheme:theme=>setStyles(compileStyles(theme)),icons:icons,setIcons:setIcons},children:children})},useTheme=()=>useContext(ThemeProviderContext),compileStyles=themeInput=>{if("string"==typeof themeInput)return buildStyleObject(themes[themeInput]);if(Array.isArray(themeInput)){const[name,overrides]=themeInput;return buildStyleObject(themes[name],isStyleObject(overrides)?{styles:overrides}:overrides)}return buildStyleObject(defaultTheme,isStyleObject(themeInput)?{styles:themeInput}:themeInput)},buildStyleObject=(baseTheme,overrides={styles:emptyStyleObject})=>{var _a,_b,_c,_d;const[defaultStyles,baseStyles,overrideStyles]=[defaultTheme,baseTheme,overrides].map((theme=>{const{fragments:fragments,styles:styles}=theme,compiledStyles={};return Object.entries(styles).forEach((([key,value])=>{const cssStyles=(Array.isArray(value)?value:[value]).reduce(((acc,curr)=>{var _a;if("string"==typeof curr){const style=null!==(_a=null==fragments?void 0:fragments[curr])&&void 0!==_a?_a:curr;return"string"==typeof style?Object.assign(Object.assign({},acc),{[defaultStyleProperties[key]]:style}):Object.assign(Object.assign({},acc),style)}return Object.assign(Object.assign({},acc),curr)}),{});compiledStyles[key]=cssStyles})),compiledStyles})),finalStyles={};return Object.keys(defaultTheme.styles).forEach((key=>{finalStyles[key]=Object.assign(Object.assign(Object.assign({},defaultStyles[key]),baseStyles[key]),overrideStyles[key])})),(null===(_a=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_a?void 0:_a.backgroundColor)&&document.documentElement.style.setProperty("--jer-highlight-color",null===(_b=null==finalStyles?void 0:finalStyles.inputHighlight)||void 0===_b?void 0:_b.backgroundColor),(null===(_c=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_c?void 0:_c.color)&&document.documentElement.style.setProperty("--jer-icon-copy-color",null===(_d=null==finalStyles?void 0:finalStyles.iconCopy)||void 0===_d?void 0:_d.color),finalStyles},isStyleObject=overrideObject=>!("styles"in overrideObject),defaultStyleProperties={container:"backgroundColor",property:"color",bracket:"color",itemCount:"color",string:"color",number:"color",boolean:"color",null:"color",input:"color",inputHighlight:"backgroundColor",error:"color",iconCollection:"color",iconEdit:"color",iconDelete:"color",iconAdd:"color",iconCopy:"color",iconOk:"color",iconCancel:"color"},AutogrowTextArea=({className:className,name:name,value:value,setValue:setValue,handleKeyPress:handleKeyPress})=>{const{styles:styles}=useTheme(),dummyValue="\n"===value.slice(-1)?value+".":value;return jsxs("div",{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:!0,onFocus:e=>{value.length<40&&e.target.select()},onKeyDown:handleKeyPress}),jsx("span",{className:className,style:Object.assign({visibility:"hidden",height:"auto",gridArea:"1 / 1 / 2 / 2",color:"red",opacity:.9,whiteSpace:"pre-wrap",overflow:"clip",border:"1px solid transparent"},styles.input),children:dummyValue})]})},truncate=(string,length=200)=>string.length<length?string:`${string.slice(0,length-2).trim()}...`,StringValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel,stringTruncate:stringTruncate})=>{const{styles:styles}=useTheme();return isEditing?jsx(AutogrowTextArea,{className:"jer-input-text",name:path.join("."),value:value,setValue:setValue,isEditing:isEditing,handleKeyPress:e=>{"Enter"!==e.key||e.shiftKey?"Escape"===e.key&&handleCancel():handleEdit()}}):jsxs("div",{onDoubleClick:()=>setIsEditing(!0),onClick:e=>{(e.getModifierState("Control")||e.getModifierState("Meta"))&&setIsEditing(!0)},className:"jer-value-string",style:styles.string,children:['"',(text=truncate(value,stringTruncate),text.split("\n").map(((line,index,arr)=>jsxs("span",{children:[line,index<arr.length-1?jsx("br",{}):null]},index)))),'"']});var text},NumberValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{const{styles:styles}=useTheme();return isEditing?jsx("input",{className:"jer-input-number",type:"text",name:path.join("."),value:value,onChange:e=>setValue(e.target.value.replace(/[^0-9.-]/g,"")),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?handleEdit():"Escape"===e.key&&handleCancel()},style:{width:String(value).length/1.5+2+"em"}}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-number",style:styles.number,children:value})},BooleanValue=({value:value,setValue:setValue,isEditing:isEditing,path:path,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{const{styles:styles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return isEditing?jsx("input",{className:"jer-input-boolean",type:"checkbox",name:path.join("."),checked:value,onChange:()=>setValue(!value)}):jsx("span",{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-boolean",style:styles.boolean,children:String(value)})},NullValue=({value:value,isEditing:isEditing,setIsEditing:setIsEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{const{styles:styles}=useTheme();useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[isEditing]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("div",isEditing?{className:"jer-input-null",children:"null"}:{onDoubleClick:()=>setIsEditing(!0),className:"jer-value-null",style:styles.null,children:String(value)})},ObjectValue=({value:value,translate:translate,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-object",children:`{${translate("DEFAULT_NEW_KEY")}: "${value}" }`})},ArrayValue=({value:value,isEditing:isEditing,handleEdit:handleEdit,handleCancel:handleCancel})=>{useEffect((()=>(isEditing&&document.addEventListener("keydown",listenForSubmit),()=>document.removeEventListener("keydown",listenForSubmit))),[]);const listenForSubmit=event=>{"Enter"===event.key?handleEdit():"Escape"===event.key&&handleCancel()};return jsx("span",{className:"jer-value-array",children:`[${null===value?"":value}]`})},InvalidValue=({value:value})=>{let message="Error!";switch(typeof value){case"string":"**INVALID_FUNCTION**"===value&&(message="Function");break;case"undefined":message="Undefined";break;case"symbol":message="Symbol"}return jsx("span",{className:"jer-value-invalid",children:message})},Icon=({name:name,rotate:rotate})=>{var _a,_b,_c,_d,_e,_f,_g;const{styles:styles,icons:icons}=useTheme(),commonProps={size:"1.4em",className:"jer-icon"};switch(name){case"add":return null!==(_a=null==icons?void 0:icons.add)&&void 0!==_a?_a:jsx(BiPlusCircle,Object.assign({},commonProps,{style:styles.iconAdd}));case"edit":return null!==(_b=null==icons?void 0:icons.edit)&&void 0!==_b?_b:jsx(BiEdit,Object.assign({},commonProps,{style:styles.iconEdit}));case"delete":return null!==(_c=null==icons?void 0:icons.delete)&&void 0!==_c?_c:jsx(MdDeleteForever,Object.assign({},commonProps,{style:styles.iconDelete,size:"1.5em"}));case"copy":return null!==(_d=null==icons?void 0:icons.copy)&&void 0!==_d?_d:jsx(HiOutlineClipboardCopy,Object.assign({},commonProps,{style:styles.iconCopy}));case"ok":return null!==(_e=null==icons?void 0:icons.ok)&&void 0!==_e?_e:jsx(FiCheckCircle,Object.assign({},commonProps,{style:Object.assign({fontSize:"90%"},styles.iconOk)}));case"cancel":return null!==(_f=null==icons?void 0:icons.cancel)&&void 0!==_f?_f:jsx(TiCancel,Object.assign({},commonProps,{style:Object.assign({fontSize:"130%"},styles.iconCancel)}));case"chevron":return null!==(_g=null==icons?void 0:icons.chevron)&&void 0!==_g?_g:jsx(FaChevronDown,{className:"jer-accordion-icon"+(rotate?" jer-rotate-90":""),style:styles.iconCollection});default:return jsx(Fragment,{})}},EditButtons=({startEdit:startEdit,handleDelete:handleDelete,handleAdd:handleAdd,enableClipboard:enableClipboard,type:type,data:data,path:path,name:name,translate:translate})=>{const{styles:styles}=useTheme(),NEW_KEY_PROMPT=translate("KEY_NEW"),[isAdding,setIsAdding]=useState(!1),[newKey,setNewKey]=useState(NEW_KEY_PROMPT);useEffect((()=>{isAdding||setNewKey(NEW_KEY_PROMPT)}),[isAdding]);return jsxs("div",{className:"jer-edit-buttons",style:isAdding?{opacity:1}:void 0,children:[enableClipboard&&jsx("div",{onClick:e=>{let value,copyType="value",stringValue="";if(enableClipboard){if(!0===(e.ctrlKey||e.metaKey))value=stringifyPath(path),stringValue=value,copyType="path";else value=data,stringValue=type?JSON.stringify(data,null,2):String(value);navigator.clipboard.writeText(stringValue)}"function"==typeof enableClipboard&&enableClipboard({value:value,stringValue:stringValue,path:path,key:name,type:copyType})},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:()=>{"object"===type?setIsAdding(!0):handleAdd("")},children:jsx(Icon,{name:"add"})}),isAdding&&handleAdd&&"object"===type&&jsxs(Fragment,{children:[jsx("input",{className:"jer-input-new-key",type:"text",name:"new-object-key",value:newKey,onChange:e=>setNewKey(e.target.value),autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&handleAdd?(setIsAdding(!1),handleAdd(newKey)):"Escape"===e.key&&setIsAdding(!1)},style:Object.assign({},styles.input)}),jsx(InputButtons,{onOk:()=>{newKey&&(setIsAdding(!1),handleAdd(newKey))},onCancel:()=>{setIsAdding(!1)}})]})]})},InputButtons=({onOk:onOk,onCancel:onCancel})=>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"})})]}),stringifyPath=path=>path.reduce(((str,part)=>"number"==typeof part?`${str}[${part}]`:""===str?part:`${str}.${part}`),""),DataTypes=["string","number","boolean","null","object","array"],getCustomNode=(customNodeDefinitions=[],filterProps)=>{const matchingDefinitions=customNodeDefinitions.filter((({condition:condition})=>condition(filterProps)));if(0===matchingDefinitions.length)return{};const{element:element,props:props,hideKey:hideKey=!1}=matchingDefinitions[0];return{CustomNode:element,customNodeProps:props,hideKey:hideKey}},CustomNodeWrapper=({name:name,hideKey:hideKey,children:children,indent:indent})=>{const{styles:styles}=useTheme();return jsx("div",{className:"jer-component jer-value-component",style:indent?{marginLeft:indent/2+"em"}:{},children:jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[!hideKey&&jsxs("label",{htmlFor:name,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,":"," "]}),jsx("div",{className:"jer-value-and-buttons",style:{paddingLeft:hideKey?0:void 0},children:children})]})})},ValueNodeWrapper=props=>{const{data:data,parentData:parentData,name:name,path:path,onEdit:onEdit,onDelete:onDelete,enableClipboard:enableClipboard,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictTypeSelection:restrictTypeSelection,showLabel:showLabel,stringTruncate:stringTruncate,indent:indent,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,{styles:styles}=useTheme(),[isEditing,setIsEditing]=useState(!1),[isEditingKey,setIsEditingKey]=useState(!1),[value,setValue]=useState("function"==typeof data?"**INVALID_FUNCTION**":data),[error,setError]=useState(null),[dataType,setDataType]=useState(getDataType(data));useEffect((()=>{setValue("function"==typeof data?"**INVALID_FUNCTION**":data),setDataType(getDataType(data))}),[data,error]);const logError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{let newValue;switch(setIsEditing(!1),dataType){case"object":newValue={[translate("DEFAULT_NEW_KEY")]:value};break;case"array":newValue=null!==value?value:[];break;case"number":const n=Number(value);newValue=isNaN(n)?0:n;break;default:newValue=value}onEdit(newValue,path).then((error=>{error&&logError(error)}))},handleCancel=()=>{setIsEditing(!1),setIsEditingKey(!1),setValue(data),setDataType(getDataType(data))},filterProps={key:name,path:path,level:path.length,value:data,size:null},canEdit=useMemo((()=>!restrictEditFilter(filterProps)),[filterProps]),canDelete=useMemo((()=>!restrictDeleteFilter(filterProps)),[filterProps]),canEditKey=!("number"==typeof path.slice(-1)[0])&&canEdit&&canDelete,inputProps={value:value,parentData:parentData,setValue:setValue,isEditing:isEditing,setIsEditing:canEdit?()=>setIsEditing(!0):()=>{},handleEdit:handleEdit,handleCancel:handleCancel,path:path,stringTruncate:stringTruncate,translate:translate},{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey}=getCustomNode(customNodeDefinitions,{key:name,path:path,level:path.length,value:data,size:0}),allDataTypes=[...customNodeDefinitions.filter((({showInTypesSelector:showInTypesSelector=!1})=>showInTypesSelector)).map((({name:name})=>name)),...DataTypes],allowedDataTypes=useMemo((()=>{if("boolean"==typeof restrictTypeSelection)return restrictTypeSelection?[]:allDataTypes;if(Array.isArray(restrictTypeSelection))return restrictTypeSelection;const result=restrictTypeSelection(filterProps);return"boolean"==typeof result?result?[]:allDataTypes:result}),[filterProps,restrictTypeSelection]);return CustomNode?jsx(CustomNodeWrapper,{name:name,hideKey:hideKey,indent:indent,children:jsx(CustomNode,Object.assign({customProps:customNodeProps},props))}):jsx("div",{className:"jer-component jer-value-component",style:{marginLeft:indent/2+"em"},children:jsxs("div",{className:"jer-value-main-row",style:{flexWrap:name.length>10?"wrap":"nowrap"},children:[showLabel&&!isEditingKey&&jsxs("label",{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}),onDoubleClick:()=>canEditKey&&setIsEditingKey(!0),children:[name,":"," "]}),showLabel&&isEditingKey&&jsx("input",{className:"jer-object-key",type:"text",name:path.join("."),defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setIsEditingKey(!1),!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),jsxs("div",{className:"jer-value-and-buttons",children:[jsx("div",{className:"jer-input-component",children:getInputComponent(dataType,inputProps)}),isEditing?jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel}):"invalid"!==dataType&&!error&&jsx(EditButtons,{startEdit:canEdit?()=>setIsEditing(!0):void 0,handleDelete:canDelete?()=>{onDelete(value,path).then((error=>{error&&logError(error)}))}:void 0,data:data,enableClipboard:enableClipboard,name:name,path:path,translate:translate}),isEditing&&allowedDataTypes.length>0&&jsxs("div",{className:"jer-select",children:[jsx("select",{name:`${name}-type-select`,className:"jer-type-select",onChange:e=>(type=>{const customNode=customNodeDefinitions.find((customNode=>customNode.name===type));customNode?onEdit(customNode.defaultValue,path):(setValue(convertValue(value,type)),setDataType(type))})(e.target.value),value:dataType,children:allowedDataTypes.map((type=>jsx("option",{value:type,children:type},type)))}),jsx("span",{className:"focus"})]}),!isEditing&&error&&jsx("span",{className:"jer-error-slug",style:styles.error,children:error})]})]})})},getDataType=value=>"string"==typeof value?"string":"number"==typeof value?"number":"boolean"==typeof value?"boolean":null===value?"null":"invalid",getInputComponent=(dataType,inputProps)=>{const value=inputProps.value;switch(dataType){case"string":return jsx(StringValue,Object.assign({},inputProps,{value:value}));case"number":return jsx(NumberValue,Object.assign({},inputProps,{value:value}));case"boolean":return jsx(BooleanValue,Object.assign({},inputProps,{value:value}));case"null":return jsx(NullValue,Object.assign({},inputProps));case"object":return jsx(ObjectValue,Object.assign({},inputProps,{value:value}));case"array":return jsx(ArrayValue,Object.assign({},inputProps));default:return jsx(InvalidValue,Object.assign({},inputProps))}},convertValue=(value,type)=>{switch(type){case"string":default:return String(value);case"number":const n=Number(value);return isNaN(n)?0:n;case"boolean":return!!value;case"null":return null;case"object":return value;case"array":return[value]}},isCollection=value=>null!==value&&"object"==typeof value,CollectionNode=_a=>{var{data:data,path:path,name:name,parentData:parentData,showCollectionCount:showCollectionCount}=_a,props=function(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]])}return t}(_a,["data","path","name","parentData","showCollectionCount"]);const{styles:styles}=useTheme(),{onEdit:onEdit,onAdd:onAdd,onDelete:onDelete,restrictEditFilter:restrictEditFilter,restrictDeleteFilter:restrictDeleteFilter,restrictAddFilter:restrictAddFilter,collapseFilter:collapseFilter,enableClipboard:enableClipboard,indent:indent,keySort:keySort,showArrayIndices:showArrayIndices,defaultValue:defaultValue,translate:translate,customNodeDefinitions:customNodeDefinitions}=props,[isEditing,setIsEditing]=useState(!1),[isEditingKey,setIsEditingKey]=useState(!1),[stringifiedValue,setStringifiedValue]=useState(JSON.stringify(data,null,2)),[error,setError]=useState(null),collectionSize=Object.keys(data).length,filterProps={key:name,path:path,level:path.length,value:data,size:collectionSize},startCollapsed=collapseFilter(filterProps),[collapsed,setCollapsed]=useState(startCollapsed),hasBeenOpened=useRef(!startCollapsed),[isAnimating,setIsAnimating]=useState(!1);useEffect((()=>{setStringifiedValue(JSON.stringify(data,null,2))}),[data]),useEffect((()=>{setCollapsed(collapseFilter(filterProps))}),[collapseFilter]);const collectionType=Array.isArray(data)?"array":"object",brackets="array"===collectionType?{open:"[",close:"]"}:{open:"{",close:"}"},transitionTime=getComputedStyle(document.documentElement).getPropertyValue("--jer-expand-transition-time"),showError=errorString=>{setError(errorString),setTimeout((()=>setError(null)),2500),console.log("Error",errorString)},handleEdit=()=>{try{const value=JSON.parse(stringifiedValue);setIsEditing(!1),setError(null),onEdit(value,path).then((error=>{error&&showError(error)}))}catch(_a){return setError(translate("ERROR_INVALID_JSON")),setTimeout((()=>setError(null)),2500),void console.log("Invalid JSON")}},handleDelete=path.length>0?()=>{onDelete(data,path).then((result=>{result&&showError(result)}))}:void 0,handleCancel=()=>{setIsEditing(!1),setIsEditingKey(!1),setError(null),setStringifiedValue(JSON.stringify(data,null,2))},canEdit=useMemo((()=>!restrictEditFilter(filterProps)),[filterProps]),canDelete=useMemo((()=>!restrictDeleteFilter(filterProps)),[filterProps]),canAdd=useMemo((()=>!restrictAddFilter(filterProps)),[filterProps]),canEditKey=null!==parentData&&canEdit&&canAdd&&canDelete,isArray="number"==typeof path.slice(-1)[0],showLabel=showArrayIndices||!isArray,showCount="when-closed"===showCollectionCount?collapsed:showCollectionCount,keyValueArray=Object.entries(data).map((([key,value])=>["array"===collectionType?Number(key):key,value]));keySort&&"object"===collectionType&&keyValueArray.sort("function"==typeof keySort?(a,b)=>keySort(a[0],b[0]):void 0);const numOfLines=JSON.stringify(data,null,2).split("\n").length,{CustomNode:CustomNode,customNodeProps:customNodeProps,hideKey:hideKey}=getCustomNode(customNodeDefinitions,{key:name,path:path,level:path.length,value:data,size:Object.keys(data).length});return jsx("div",{className:"jer-component jer-collection-component",style:{marginLeft:(0===path.length?0:indent/2)+"em"},children:CustomNode?jsx(CustomNodeWrapper,{name:name,hideKey:hideKey,children:jsx(CustomNode,Object.assign({data:data,path:path,name:name,parentData:parentData,customProps:customNodeProps},props))}):jsxs(Fragment,{children:[jsxs("div",{className:"jer-collection-header-row",children:[jsx("div",{onClick:()=>{isEditing||(setIsAnimating(!0),hasBeenOpened.current=!0,setCollapsed(!collapsed),setTimeout((()=>setIsAnimating(!1)),500))},children:jsx(Icon,{name:"chevron",rotate:collapsed})}),jsxs("div",{className:"jer-collection-name",children:[!isEditingKey&&jsx("span",{style:styles.property,onDoubleClick:()=>canEditKey&&setIsEditingKey(!0),children:showLabel&&""!==name&&void 0!==name?`${name}:`:null}),isEditingKey&&jsx("input",{className:"jer-collection-name",type:"text",name:path.join("."),defaultValue:name,autoFocus:!0,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key?(newKey=>{if(setIsEditingKey(!1),!parentData)return;const parentPath=path.slice(0,-1);if(!newKey)return;const newData=Object.fromEntries(Object.entries(parentData).map((([key,val])=>key===name?[newKey,val]:[key,val])));onEdit(newData,parentPath)})(e.target.value):"Escape"===e.key&&handleCancel()},style:{width:String(name).length/1.5+.5+"em"}}),!isEditing&&jsx("span",{className:"jer-brackets",style:styles.bracket,children:brackets.open})]}),!isEditing&&showCollectionCount&&jsx("div",{className:"jer-collection-item-count"+(showCount?" jer-visible":" jer-hidden"),style:styles.itemCount,children:1===collectionSize?translate("ITEM_SINGLE",1):translate("ITEMS_MULTIPLE",collectionSize)}),jsx("div",{className:"jer-brackets"+(collapsed?" jer-visible":" jer-hidden"),style:styles.bracket,children:brackets.close}),!isEditing&&jsx(EditButtons,{startEdit:canEdit?()=>{setIsEditing(!0),setCollapsed(!1)}:void 0,handleAdd:canAdd?key=>{if(setCollapsed(!1),"array"===collectionType)onAdd(defaultValue,[...path,data.length]).then((error=>{error&&showError(error)}));else{if(key in data)return void showError(translate("ERROR_KEY_EXISTS"));onAdd(defaultValue,[...path,key]).then((error=>{error&&showError(error)}))}}:void 0,handleDelete:canDelete?handleDelete:void 0,enableClipboard:enableClipboard,type:collectionType,data:data,name:name,path:path,translate:translate})]}),jsxs("div",{className:"jer-collection-inner",style:{maxHeight:collapsed?0:isEditing?void 0:3*numOfLines+"em",overflowY:collapsed||isAnimating?"hidden":"visible",transition:`max-height ${transitionTime}`},children:[isEditing?jsx("div",{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:e=>{"Enter"===e.key&&(e.metaKey||e.shiftKey||e.ctrlKey)?handleEdit():"Escape"===e.key&&handleCancel()}}),jsx("div",{className:"jer-collection-input-button-row",children:jsx(InputButtons,{onOk:handleEdit,onCancel:handleCancel,isCollection:!0})})]})}):jsx(Fragment,{children:hasBeenOpened.current?keyValueArray.map((([key,value])=>jsx("div",{className:"jer-collection-element",children:isCollection(value)?jsx(CollectionNode,Object.assign({data:value,parentData:data,path:[...path,key],name:key,showCollectionCount:showCollectionCount},props),key):jsx(ValueNodeWrapper,Object.assign({data:value,parentData:data,path:[...path,key],name:key},props,{showLabel:"object"===collectionType||showArrayIndices}),key)},key))):null}),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})}),jsx("div",{className:"jer-brackets",style:styles.bracket,children:brackets.close})]})]})})},localisedStrings={ITEM_SINGLE:"{{count}} item",ITEMS_MULTIPLE:"{{count}} items",KEY_NEW:"Enter new key",ERROR_KEY_EXISTS:"Key already exists",ERROR_INVALID_JSON:"Invalid JSON",ERROR_UPDATE:"Update unsuccessful",ERROR_DELETE:"Delete unsuccessful",ERROR_ADD:"Adding node unsuccessful",DEFAULT_STRING:"New data!",DEFAULT_NEW_KEY:"key"},getTranslateFunction=translations=>(key,count)=>((translations,key,count)=>{const string=key in translations?translations[key]:localisedStrings[key];return void 0===count?string:null==string?void 0:string.replace("{{count}}",String(count))})(translations,key,count),Editor=({data:data,rootName:rootName="root",onUpdate:onUpdate,onEdit:srcEdit=onUpdate,onDelete:srcDelete=onUpdate,onAdd:srcAdd=onUpdate,enableClipboard:enableClipboard=!0,theme:theme="default",icons:icons,indent:indent=4,collapse:collapse=!1,showCollectionCount:showCollectionCount=!0,restrictEdit:restrictEdit=!1,restrictDelete:restrictDelete=!1,restrictAdd:restrictAdd=!1,restrictTypeSelection:restrictTypeSelection=!1,keySort:keySort=!1,showArrayIndices:showArrayIndices=!0,defaultValue:defaultValue=null,minWidth:minWidth=250,maxWidth:maxWidth="min(600px, 90vw)",stringTruncate:stringTruncate=250,translations:translations={},className:className,customNodeDefinitions:customNodeDefinitions=[]})=>{const{styles:styles,setTheme:setTheme,setIcons:setIcons}=useTheme(),collapseFilter=useCallback(getFilterFunction(collapse),[collapse]),translate=useCallback(getTranslateFunction(translations),[translations]);useEffect((()=>{theme&&setTheme(theme),icons&&setIcons(icons)}),[theme,icons]);const otherProps={name:rootName,onEdit:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"update");if(srcEdit){const result=yield srcEdit({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return!1===result?translate("ERROR_UPDATE"):result}})),onDelete:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"delete");if(srcDelete){const result=yield srcDelete({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return!1===result?translate("ERROR_DELETE"):result}})),onAdd:(value,path)=>__awaiter(void 0,void 0,void 0,(function*(){const{currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue}=updateDataObject(data,path,value,"add");if(srcAdd){const result=yield srcAdd({currentData:currentData,newData:newData,currentValue:currentValue,newValue:newValue,name:path.slice(-1)[0],path:path});return!1===result?translate("ERROR_ADD"):result}})),showCollectionCount:showCollectionCount,collapseFilter:collapseFilter,restrictEditFilter:getFilterFunction(restrictEdit),restrictDeleteFilter:getFilterFunction(restrictDelete),restrictAddFilter:getFilterFunction(restrictAdd),restrictTypeSelection:restrictTypeSelection,enableClipboard:enableClipboard,keySort:keySort,showArrayIndices:showArrayIndices,indent:indent,defaultValue:defaultValue,stringTruncate:stringTruncate,translate:translate,customNodeDefinitions:customNodeDefinitions,parentData:null};return styles?jsx("div",{className:"jer-editor-container "+className,style:Object.assign(Object.assign({},styles.container),{minWidth:minWidth,maxWidth:maxWidth}),children:isCollection(data)?jsx(CollectionNode,Object.assign({data:data,path:[]},otherProps)):jsx(ValueNodeWrapper,Object.assign({data:data,path:[],showLabel:!0},otherProps))}):null},JsonEditor=props=>jsx(ThemeProvider,{children:jsx(Editor,Object.assign({},props))}),updateDataObject=(data,path,newValue,action)=>{if(0===path.length)return{currentData:data,newData:newValue,currentValue:data,newValue:newValue};const currentValue="add"!==action?extract(data,path):void 0;return{currentData:data,newData:assign(clone(data),path,newValue,{remove:"delete"===action}),currentValue:currentValue,newValue:"update"===action?newValue:void 0}},getFilterFunction=propValue=>"boolean"==typeof propValue?()=>propValue:"number"==typeof propValue?({level:level})=>level>=propValue:propValue;export{JsonEditor,themes};