json-edit-react 1.14.0 → 1.15.0

package/README.md

@@ -91,55 +91,57 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 - When opening/closing a node, hold down "Alt/Option" to open/close *all* child nodes at once
 - For Number inputs, arrow-up and down keys will increment/decrement the value
 - Drag and drop items to change the structure or modify display order
-- JSON text input can accept the more convenient [JSON5](https://json5.org/) syntax as input
+- JSON text input can accept "looser" input, if an additional JSON parsing method is provided (e.g. [JSON5](https://json5.org/)). See `jsonParse` prop.
 
 ## Props overview
 
 The only *required* value is `data` (although you will need to provide a `setData` method to update your data).
 
-| prop                    | type                                          | default     | description                                                                                                                                                                                                                                                                                                          |
-| ----------------------- | --------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `data`                  | `object\|array`                               |             | The data to be displayed / edited                                                                                                                                                                                                                                                                                    |
-| `setData`               | `object\|array => void`                       |             | Method to update your `data` object. See [Managing state](#managing-state) below for additional notes.                                                                                                                                                                                                               |
-| `rootName`              | `string`                                      | `"data"`    | A name to display in the editor as the root of the data object.                                                                                                                                                                                                                                                      |
-| `onUpdate`              | `UpdateFunction`                              |             | A function to run whenever a value is **updated** (edit, delete *or* add) in the editor. See [Update functions](#update-functions).                                                                                                                                                                                  |
-| `onEdit`                | `UpdateFunction`                              |             | A function to run whenever a value is **edited**.                                                                                                                                                                                                                                                                    |
-| `onDelete`              | `UpdateFunction`                              |             | A function to run whenever a value is **deleted**.                                                                                                                                                                                                                                                                   |
-| `onAdd`                 | `UpdateFunction`                              |             | A function to run whenever a new property is **added**.                                                                                                                                                                                                                                                              |
-| `onChange`              | `OnChangeFunction`                            |             | A function to modify/constrain user input as they type -- see [OnChange functions](#onchange-function).                                                                                                                                                                                                              |
-| `onError`               | `OnErrorFunction`                             |             | A function to run whenever the component reports an error -- see [OnErrorFunction](#onerror-function).                                                                                                                                                                                                               |
-| `showErrorMessages`     | `boolean `                                    | `true`      | Whether or not the component should display its own error messages (you'd probably only want to disable this if you provided your own `onError` function)                                                                                                                                                            |
-| `enableClipboard`       | `boolean\|CopyFunction`                       | `true`      | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied.                                                                                                                                            |
-| `indent`                | `number`                                      | `3`         | Specify the amount of indentation for each level of nesting in the displayed data.                                                                                                                                                                                                                                   |
-| `collapse`              | `boolean\|number\|FilterFunction`             | `false`     | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions).                   |
-| `restrictEdit`          | `boolean\|FilterFunction`                     | `false`     | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions)                                                                                                                                                                                      |
-| `restrictDelete`        | `boolean\|FilterFunction`                     | `false`     | As with `restrictEdit` but for deletion                                                                                                                                                                                                                                                                              |
-| `restrictAdd`           | `boolean\|FilterFunction`                     | `false`     | As with `restrictEdit` but for adding new properties                                                                                                                                                                                                                                                                 |
-| `restrictTypeSelection` | `boolean\|FilterFunction`                     | `true`      | Set to `false` to enable drag and drop functionality. See [Drag-n-drop](#drag-n-drop)                                                                                                                                                                                                                                |
-| `restrictDrag`          | `boolean\|DataType[]\|TypeFilterFunction`     | `false`     | For restricting the data types the user can select. Can be a list of data types (e.g. `[ 'string', 'number', 'boolean', 'array', 'object', 'null' ]`) or a boolean. A function can be provided -- it should take the same input as the above `FilterFunction`s, but output should be `boolean \| DataType[]`.        |
-| `searchText`            | `string`                                      | `undefined` | Data visibility will be filtered by matching against value, using the method defined below in `searchFilter`                                                                                                                                                                                                         |
-| `searchFilter`          | `"key"\|"value"\|"all"\|SearchFilterFunction` | `undefined` | Define how `searchText` should be matched to filter the visible items. See [Search/Filtering](#searchfiltering)                                                                                                                                                                                                      |
-| `searchDebounceTime`    | `number`                                      | `350`       | Debounce time when `searchText` changes                                                                                                                                                                                                                                                                              |
-| `keySort`               | `boolean\|CompareFunction`                    | `false`     | If `true`, object keys will be ordered (using default JS `.sort()`). A [compare function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) can also be provided to define sorting behaviour.                                                                             |
-| `showArrayIndices`      | `boolean`                                     | `true`      | Whether or not to display the index (as a property key) for array elements.                                                                                                                                                                                                                                          |
-| `showStringQuotes`      | `boolean`                                     | `true`      | Whether or not to display string values in "quotes".                                                                                                                                                                                                                                                                 |
-| `showCollectionCount`   | `boolean\|"when-closed"`                      | `true`      | Whether or not to display the number of items in each collection (object or array).                                                                                                                                                                                                                                  |
-| `defaultValue`          | `any\|DefaultValueFilterFunction`             | `null`      | When a new property is added, it is initialised with this value. A function can be provided with the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.) |
-| `stringTruncate`        | `number`                                      | `250`       | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing.                                                                                                                                                                        |
-| `translations`          | `LocalisedStrings` object                     | `{ }`       | UI strings (such as error messages) can be translated by passing an object containing localised string values (there are only a few). See [Localisation](#localisation)                                                                                                                                              |
-| `theme`                 | `string\|ThemeObject\|[string, ThemeObject]`  | `"default"` | Either the name of one of the built-in themes, or an object specifying some or all theme properties. See [Themes](#themes--styles).                                                                                                                                                                                  |
-| `className`             | `string`                                      |             | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward.                                                                                                                                                                                            |
-| `id`                    | `string`                                      |             | Name for the HTML `id` attribute on the main component container.                                                                                                                                                                                                                                                    |
-| `icons`                 | `{[iconName]: JSX.Element, ... }`             | `{ }`       | Replace the built-in icons by specifying them here. See [Themes](#themes--styles).                                                                                                                                                                                                                                   |  |
-| `minWidth`              | `number\|string` (CSS value)                  | `250`       | Minimum width for the editor container.                                                                                                                                                                                                                                                                              |
-| `maxWidth`              | `number\|string` (CSS value)                  | `600`       | Maximum width for the editor container.                                                                                                                                                                                                                                                                              |
-| `rootFontSize`          | `number\|string` (CSS value)                  | `16px`      | The "base" font size from which all other sizings are derived (in `em`s). By changing this you will scale the entire component. container.                                                                                                                                                                           |
-| `customNodeDefinitions` | `CustomNodeDefinition[]`                      |             | You can provide customised components to override specific nodes in the data tree, according to a condition function. See see [Custom nodes](#custom-nodes) for more detail. (A simple custom component to turn url strings into active links is provided in the main package  -- see [here](#active-hyperlinks))    |
-| `customText`            | `CustomTextDefinitions`                       |             | In addition to [localising the component](#localisation) text strings, you can also *dynamically* alter it, depending on the data. See [Custom Text](#custom-text) for more detail.                                                                                                                                  |
+| prop                    | type                                          | default                                   | description                                                                                                                                                                                                                                                                                                                                    |
+| ----------------------- | --------------------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`                  | `object\|array`                               |                                           | The data to be displayed / edited                                                                                                                                                                                                                                                                                                              |
+| `setData`               | `object\|array => void`                       |                                           | Method to update your `data` object. See [Managing state](#managing-state) below for additional notes.                                                                                                                                                                                                                                         |
+| `rootName`              | `string`                                      | `"data"`                                  | A name to display in the editor as the root of the data object.                                                                                                                                                                                                                                                                                |
+| `onUpdate`              | `UpdateFunction`                              |                                           | A function to run whenever a value is **updated** (edit, delete *or* add) in the editor. See [Update functions](#update-functions).                                                                                                                                                                                                            |
+| `onEdit`                | `UpdateFunction`                              |                                           | A function to run whenever a value is **edited**.                                                                                                                                                                                                                                                                                              |
+| `onDelete`              | `UpdateFunction`                              |                                           | A function to run whenever a value is **deleted**.                                                                                                                                                                                                                                                                                             |
+| `onAdd`                 | `UpdateFunction`                              |                                           | A function to run whenever a new property is **added**.                                                                                                                                                                                                                                                                                        |
+| `onChange`              | `OnChangeFunction`                            |                                           | A function to modify/constrain user input as they type -- see [OnChange functions](#onchange-function).                                                                                                                                                                                                                                        |
+| `onError`               | `OnErrorFunction`                             |                                           | A function to run whenever the component reports an error -- see [OnErrorFunction](#onerror-function).                                                                                                                                                                                                                                         |
+| `showErrorMessages`     | `boolean `                                    | `true`                                    | Whether or not the component should display its own error messages (you'd probably only want to disable this if you provided your own `onError` function)                                                                                                                                                                                      |
+| `enableClipboard`       | `boolean\|CopyFunction`                       | `true`                                    | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied.                                                                                                                                                                      |
+| `indent`                | `number`                                      | `3`                                       | Specify the amount of indentation for each level of nesting in the displayed data.                                                                                                                                                                                                                                                             |
+| `collapse`              | `boolean\|number\|FilterFunction`             | `false`                                   | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions).                                             |
+| `restrictEdit`          | `boolean\|FilterFunction`                     | `false`                                   | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions)                                                                                                                                                                                                                |
+| `restrictDelete`        | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for deletion                                                                                                                                                                                                                                                                                                        |
+| `restrictAdd`           | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for adding new properties                                                                                                                                                                                                                                                                                           |
+| `restrictTypeSelection` | `boolean\|FilterFunction`                     | `true`                                    | Set to `false` to enable drag and drop functionality. See [Drag-n-drop](#drag-n-drop)                                                                                                                                                                                                                                                          |
+| `restrictDrag`          | `boolean\|DataType[]\|TypeFilterFunction`     | `false`                                   | For restricting the data types the user can select. Can be a list of data types (e.g. `[ 'string', 'number', 'boolean', 'array', 'object', 'null' ]`) or a boolean. A function can be provided -- it should take the same input as the above `FilterFunction`s, but output should be `boolean \| DataType[]`.                                  |
+| `searchText`            | `string`                                      | `undefined`                               | Data visibility will be filtered by matching against value, using the method defined below in `searchFilter`                                                                                                                                                                                                                                   |
+| `searchFilter`          | `"key"\|"value"\|"all"\|SearchFilterFunction` | `undefined`                               | Define how `searchText` should be matched to filter the visible items. See [Search/Filtering](#searchfiltering)                                                                                                                                                                                                                                |
+| `searchDebounceTime`    | `number`                                      | `350`                                     | Debounce time when `searchText` changes                                                                                                                                                                                                                                                                                                        |
+| `keySort`               | `boolean\|CompareFunction`                    | `false`                                   | If `true`, object keys will be ordered (using default JS `.sort()`). A [compare function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) can also be provided to define sorting behaviour.                                                                                                       |
+| `showArrayIndices`      | `boolean`                                     | `true`                                    | Whether or not to display the index (as a property key) for array elements.                                                                                                                                                                                                                                                                    |
+| `showStringQuotes`      | `boolean`                                     | `true`                                    | Whether or not to display string values in "quotes".                                                                                                                                                                                                                                                                                           |
+| `showCollectionCount`   | `boolean\|"when-closed"`                      | `true`                                    | Whether or not to display the number of items in each collection (object or array).                                                                                                                                                                                                                                                            |
+| `defaultValue`          | `any\|DefaultValueFilterFunction`             | `null`                                    | When a new property is added, it is initialised with this value. A function can be provided with the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.)                           |
+| `stringTruncate`        | `number`                                      | `250`                                     | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing.                                                                                                                                                                                                  |
+| `translations`          | `LocalisedStrings` object                     | `{ }`                                     | UI strings (such as error messages) can be translated by passing an object containing localised string values (there are only a few). See [Localisation](#localisation)                                                                                                                                                                        |
+| `theme`                 | `string\|ThemeObject\|[string, ThemeObject]`  | `"default"`                               | Either the name of one of the built-in themes, or an object specifying some or all theme properties. See [Themes](#themes--styles).                                                                                                                                                                                                            |
+| `className`             | `string`                                      |                                           | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward.                                                                                                                                                                                                                      |
+| `id`                    | `string`                                      |                                           | Name for the HTML `id` attribute on the main component container.                                                                                                                                                                                                                                                                              |
+| `icons`                 | `{[iconName]: JSX.Element, ... }`             | `{ }`                                     | Replace the built-in icons by specifying them here. See [Themes](#themes--styles).                                                                                                                                                                                                                                                             |  |
+| `minWidth`              | `number\|string` (CSS value)                  | `250`                                     | Minimum width for the editor container.                                                                                                                                                                                                                                                                                                        |
+| `maxWidth`              | `number\|string` (CSS value)                  | `600`                                     | Maximum width for the editor container.                                                                                                                                                                                                                                                                                                        |
+| `rootFontSize`          | `number\|string` (CSS value)                  | `16px`                                    | The "base" font size from which all other sizings are derived (in `em`s). By changing this you will scale the entire component. container.                                                                                                                                                                                                     |
+| `customNodeDefinitions` | `CustomNodeDefinition[]`                      |                                           | You can provide customised components to override specific nodes in the data tree, according to a condition function. See see [Custom nodes](#custom-nodes) for more detail. (A simple custom component to turn url strings into active links is provided in the main package  -- see [here](#active-hyperlinks))                              |
+| `customText`            | `CustomTextDefinitions`                       |                                           | In addition to [localising the component](#localisation) text strings, you can also *dynamically* alter it, depending on the data. See [Custom Text](#custom-text) for more detail.                                                                                                                                                            |
+| `jsonParse`             | `(input: string) => JsonData`                 | `JSON.parse`                              | When editing a block of JSON directly, you may wish to allow some "looser" input -- e.g. 'single quotes', trailing commas, or unquoted field names. In this case, you can provide a third-party JSON parsing method. I recommend [JSON5](https://json5.org/), which is what is used in the [Demo](https://carlosnz.github.io/json-edit-react/) |
+| `jsonStringify`         | `(data: JsonData) => string`                  | `(data) => JSON.stringify(data, null, 2)` | Similarly, you can override the default presentation of the JSON string when starting editing JSON. You can supply different formatting parameters to the native `JSON.stringify()`, or provide a third-party option, like the aforementioned JSON5.                                                                                           |
 
 ## Managing state
 
-It is recommended that you manage the `data` state yourself outside this component. Pass in a `setData` method, which is called internally to update your `data`. However, this is not compulsory -- if you don't provide a `setData` method, the data will be managed internally, which would be fine if you're not doing anything with the data. The alternative is to use the [Update functions](#update-functions) to update your `data` externally, but this is not recommended except in special circumstances as you can run into issues keeping your data in sync with the internal state (which is what is displayed), as well as unnecessary re-renders.
+It is recommended that you manage the `data` state yourself outside this component -- just pass in a `setData` method, which is called internally to update your `data`. However, this is not compulsory -- if you don't provide a `setData` method, the data will be managed internally, which would be fine if you're not doing anything with the data. The alternative is to use the [Update functions](#update-functions) to update your `data` externally, but this is not recommended except in special circumstances as you can run into issues keeping your data in sync with the internal state (which is what is displayed), as well as unnecessary re-renders. Update functions should be ideally be used only for implementing side effects, checking for errors, or mutating the data before setting it with `setData`.
 
 ## Update functions
 
@@ -683,6 +685,8 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+
+- **1.15.0**: Remove ([JSON5](https://json5.org/)) from the package, and provided props for passing in *any* alternative JSON parsing and stringifying methods.
 - **1.14.0**:
   - Allow [UpdateFunction](#update-functions) to return a modified value, not just an error
   - Add `setData` prop to discourage reliance on internal data [state management](#managing-state)

package/build/index.cjs.js

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

package/build/index.d.ts

@@ -57,6 +57,8 @@ interface JsonEditorProps {
     translations?: Partial<LocalisedStrings>;
     customNodeDefinitions?: CustomNodeDefinition[];
     customText?: CustomTextDefinitions;
+    jsonParse?: (input: string) => JsonData;
+    jsonStringify?: (input: JsonData) => string;
 }
 declare const DataTypes: readonly ["string", "number", "boolean", "null", "object", "array"];
 type DataType = (typeof DataTypes)[number] | 'invalid';
@@ -160,6 +162,8 @@ interface CollectionNodeProps extends BaseNodeProps {
     showCollectionCount: boolean | 'when-closed';
     showStringQuotes: boolean;
     defaultValue: unknown;
+    jsonParse: (input: string) => JsonData;
+    jsonStringify: (data: JsonData) => string;
 }
 type ValueData = string | number | boolean;
 interface ValueNodeProps extends BaseNodeProps {

package/build/index.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
@@ -31,7 +31,6 @@
     "wrap-ansi": "7.0.0"
   },
   "dependencies": {
-    "json5": "^2.2.3",
     "object-property-assigner": "^1.3.0",
     "object-property-extractor": "^1.0.11"
   },