json-edit-react 1.2.5 → 1.3.2

package/README.md

@@ -29,7 +29,9 @@ Features include:
   - [A note about sizing and scaling](#a-note-about-sizing-and-scaling)
   - [Icons](#icons)
 - [Localisation](#localisation)
-- [Custom nodes](#custom-nodes)
+- [Custom Nodes](#custom-nodes)
+  - [Active hyperlinks](#active-hyperlinks)
+- [Custom Text](#custom-text)
 - [Undo functionality](#undo-functionality)
 - [Issues, bugs, suggestions?](#issues-bugs-suggestions)
 - [Roadmap](#roadmap)
@@ -51,17 +53,15 @@ or
 import { JsonEditor } from 'json-edit-react'
 
 // In your React components:
-<JsonEditor
-  data={ myData }
-  onUpdate={ ({newData} ) => {
-    // Set "myData" state, plus
-    // any desired side-effects.
-}}
-{ ...otherProps } />
+return 
+  <JsonEditor
+    data={ jsonData }
+    onUpdate={ ({newData} ) => {
+      // Do something with the new data, e.g. update jsonData
+  }}
+  { ...otherProps } />
 ```
 
-You are responsible for maintaining the data state — in your `onUpdate` function, use the `newData` property to set `data`, which should update inside the editor.
-
 ## Usage
 
 **(for end user)**
@@ -78,37 +78,38 @@ It's pretty self explanatory (click the "edit" icon to edit, etc.), but there ar
 
 The only *required* value is `data`.
 
-| prop                    | type                                         | default     | description                                                                                                                                                                                                                                                                                        |
-| ----------------------- | -------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `data`                  | `object\|array`                              |             | The data to be displayed / edited                                                                                                                                                                                                                                                                  |
-| `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**.                                                                                                                                                                                                                                            |
-| `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`                                     | `4`         | 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 `false`, 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\|DataType[]\|TypeFilterFunction`    | `false`     | For restricting the data types the user can select. This varies slightly from the above restrictions in that the value (or output of the `TypeFilterFunction`) can be a list of data types *or* a `boolean`.                                                                                       |
-| `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.                                                                                                                                                                                                                        |
-| `showCollectionCount`   | `boolean\|"when-closed"`                     | `true`      | Whether or not to display the number of items in each collection (object or array).                                                                                                                                                                                                                |
-| `defaultValue`          | `any`                                        | `null`      | When a new property is added, it is initialised with this value.                                                                                                                                                                                                                                   |
-| `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).                                                                                                                                                                        |
-| `className`             | `string`                                     |             | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward.                                                                                                                                                                          |
-| `icons`                 | `{[iconName]: JSX.Element, ... }`            | `{ }`       | Replace the built-in icons by specifying them here. See [Themes](#themes).                                                                                                                                                                                                                         |  |
-| `minWidth`              | `number\|string` (CSS value)                 | `250`       | Minimum width for the editor container.                                                                                                                                                                                                                                                            |
-| `maxWidth`              | `number\|string` (CSS value)                 | `600`       | Maximum width for the editor 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.                                                                                                                       |
+| prop                    | type                                         | default     | description                                                                                                                                                                                                                                                                                                       |
+| ----------------------- | -------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data`                  | `object\|array`                              |             | The data to be displayed / edited                                                                                                                                                                                                                                                                                 |
+| `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**.                                                                                                                                                                                                                                                           |
+| `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 `false`, 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\|DataType[]\|TypeFilterFunction`    | `false`     | For restricting the data types the user can select. This varies slightly from the above restrictions in that the value (or output of the `TypeFilterFunction`) can be a list of data types *or* a `boolean`.                                                                                                      |
+| `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.                                                                                                                                                                                                                                       |
+| `showCollectionCount`   | `boolean\|"when-closed"`                     | `true`      | Whether or not to display the number of items in each collection (object or array).                                                                                                                                                                                                                               |
+| `defaultValue`          | `any`                                        | `null`      | When a new property is added, it is initialised with this value.                                                                                                                                                                                                                                                  |
+| `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).                                                                                                                                                                                       |
+| `className`             | `string`                                     |             | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward.                                                                                                                                                                                         |
+| `icons`                 | `{[iconName]: JSX.Element, ... }`            | `{ }`       | Replace the built-in icons by specifying them here. See [Themes](#themes).                                                                                                                                                                                                                                        |  |
+| `minWidth`              | `number\|string` (CSS value)                 | `250`       | Minimum width for the editor container.                                                                                                                                                                                                                                                                           |
+| `maxWidth`              | `number\|string` (CSS value)                 | `600`       | Maximum width for the editor 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.                                                                                                                               |
 
 ## Update functions
 
-A callback to be executed whenever a data update (edit, delete or add) occurs can be provided. You might wish to use this to update some state, or make an API call, for example. If you want the same function for all updates, then just the `onUpdate` prop is sufficient. However, should you require something different for editing, deletion and addition, then you can provide separate Update functions via the `onEdit`, `onDelete` and `onAdd` props.
+A callback to be executed whenever a data update (edit, delete or add) occurs can be provided. You might wish to use this to update your data state, or make an API call, for example. If you want the same function for all updates, then just the `onUpdate` prop is sufficient. However, should you require something different for editing, deletion and addition, then you can provide separate Update functions via the `onEdit`, `onDelete` and `onAdd` props.
 
 The function will receive the following object as a parameter:
 
@@ -353,7 +354,7 @@ Localise your implementation by passing in a `translations` object to replace th
 
 ```
 
-## Custom nodes
+## Custom Nodes
 
 You can replace certain nodes in the data tree with your own custom components. An example might be for an image display, or a custom date editor, or just to add some visual bling. See the "Custom Nodes" data set in the [interactive demo](https://carlosnz.github.io/json-edit-react/) to see it in action. (There is also a custom Date picker that appears when editing ISO strings in the other data sets.)
 
@@ -383,6 +384,53 @@ By default, your component will be presented to the right of the property key it
 Also, by default, your component will be treated as a "display" element, i.e. it will appear in the JSON viewer, but when editing, it will revert to the standard editing interface. This can be changed, however, with the `showOnEdit`, `showOnView` and `showEditTools` props. For example, a Date picker might only be required when *editing* and left as-is for display. The `showEditTools` prop refers to the editing icons (copy, add, edit, delete) that appear to the right of each value on hover. If you choose to disable these but you still want to your component to have an "edit" mode, you'll have to provide your own UI mechanism to toggle editing.
 
 You can allow users to create new instances of your special nodes by selecting them as a "Type" in the types selector when editing/adding values. Set `showInTypesSelector: true` to enable this. However, if this is enabled you need to also provide a `name` (which is what the user will see in the selector) and a `defaultValue` which is the data that is inserted when the user selects this "type". (The `defaultValue` must return `true` if passed through the `condition` function in order for it to be immediately displayed using your custom component.)
+
+### Active hyperlinks
+
+A simple custom component and definition to turn url strings into clickable links is provided with the main package for you to use out of the box. Just import and use like so:
+
+```js
+import { JsonEditor, LinkCustomNodeDefinition } from 'json-edit-react'
+
+// ...Other stuff
+return (
+  <JsonEditor
+    {...otherProps}
+    customNodeDefinitions={[LinkCustomNodeDefinition, ...otherCustomDefinitions]}
+  />
+  )
+```
+
+## Custom Text
+
+It's possible to change the various text strings displayed by the component. You can [localise it](#localisation), but you can also specify functions to override the displayed text based on certain conditions. For example, say we want the property count text (e.g. `6 items` by default) to give a summary of a certain type of node, which can look nice when collapsed. For example (taken from the [Demo](https://carlosnz.github.io/json-edit-react/)):
+
+<img width="391" alt="Custom text example" src="image/custom_text.png">
+
+The `customText` property takes an object, with any of the [localisable keys](#localisation) as keys, with a function that returns a string (or `null`, which causes it to fallback to the localised or default string). The input to these functions is the same as for [Filter functions](#filter-functions), so in this example, it would be defined like so:
+
+```js
+
+// The function definition
+const itemCountReplacement = ({ key, value, size }) => {
+    // This returns "Steve Rogers (Marvel)" for the node summary
+    if (value instanceof Object && 'name' in value)
+      return `${value.name} (${(value)?.publisher ?? ''})`
+    // This returns "X names" for the alias lists
+    if (key === 'aliases' && Array.isArray(value))
+      return `${size} ${size === 1 ? 'name' : 'names'}`
+    // Everything else as normal
+    return null
+  }
+
+// And in component props...
+...otherProps,
+customText = {
+  ITEM_SINGLE: itemCountReplacement,
+  ITEMS_MULTIPLE: itemCountReplacement,
+}
+```
+
  
 ## Undo functionality
 
@@ -408,6 +456,10 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+- **1.3.0**:
+  - [Custom (dynamic) text](#custom-text)
+  - Add [hyperlink](#custom-nodes) Custom component to bundle
+  - Better indentation of collection nodes (property name lines up with non-collection nodes, not the collapse icon)
 - **1.2.2**: Allow editing of Custom nodes
 - **1.1.0**: Don't manage data state within component
 - **1.0.0**:

package/build/index.cjs.js

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

package/build/index.d.ts

@@ -1,207 +1,175 @@
 /// <reference types="react" />
-import React$1 from 'react'
+import React$1 from 'react';
 
 declare const themes: {
-  default: DefaultTheme
-} & Record<string, Theme>
-declare const themeableElements: readonly [
-  'container',
-  'property',
-  'bracket',
-  'itemCount',
-  'string',
-  'number',
-  'boolean',
-  'null',
-  'input',
-  'inputHighlight',
-  'error',
-  'iconCollection',
-  'iconEdit',
-  'iconDelete',
-  'iconAdd',
-  'iconCopy',
-  'iconOk',
-  'iconCancel'
-]
-type ThemeableElement = (typeof themeableElements)[number]
-type ThemeValue = string | React.CSSProperties | Array<string | React.CSSProperties>
-type ThemeStyles = Record<ThemeableElement, ThemeValue>
-type Fragments = Record<string, React.CSSProperties | string>
+    default: DefaultTheme;
+} & Record<string, Theme>;
+declare const themeableElements: readonly ["container", "property", "bracket", "itemCount", "string", "number", "boolean", "null", "input", "inputHighlight", "error", "iconCollection", "iconEdit", "iconDelete", "iconAdd", "iconCopy", "iconOk", "iconCancel"];
+type ThemeableElement = (typeof themeableElements)[number];
+type ThemeValue = string | React.CSSProperties | Array<string | React.CSSProperties>;
+type ThemeStyles = Record<ThemeableElement, ThemeValue>;
+type Fragments = Record<string, React.CSSProperties | string>;
 interface Theme {
-  displayName?: string
-  fragments?: Fragments
-  styles: Partial<ThemeStyles>
+    displayName?: string;
+    fragments?: Fragments;
+    styles: Partial<ThemeStyles>;
 }
 interface DefaultTheme extends Theme {
-  displayName: 'Default'
-  styles: ThemeStyles
+    displayName: 'Default';
+    styles: ThemeStyles;
 }
-type CompiledStyles = Record<ThemeableElement, React.CSSProperties>
-type ThemeName = keyof typeof themes
-type ThemeInput =
-  | ThemeName
-  | Theme
-  | Partial<ThemeStyles>
-  | [ThemeName, Theme | Partial<ThemeStyles>]
+type CompiledStyles = Record<ThemeableElement, React.CSSProperties>;
+type ThemeName = keyof typeof themes;
+type ThemeInput = ThemeName | Theme | Partial<ThemeStyles> | [ThemeName, Theme | Partial<ThemeStyles>];
 
 declare const localisedStrings: {
-  ITEM_SINGLE: string
-  ITEMS_MULTIPLE: string
-  KEY_NEW: string
-  ERROR_KEY_EXISTS: string
-  ERROR_INVALID_JSON: string
-  ERROR_UPDATE: string
-  ERROR_DELETE: string
-  ERROR_ADD: string
-  DEFAULT_STRING: string
-  DEFAULT_NEW_KEY: string
-}
-type LocalisedStrings = typeof localisedStrings
-type TranslateFunction = (key: keyof LocalisedStrings, count?: number) => string
+    ITEM_SINGLE: string;
+    ITEMS_MULTIPLE: string;
+    KEY_NEW: string;
+    ERROR_KEY_EXISTS: string;
+    ERROR_INVALID_JSON: string;
+    ERROR_UPDATE: string;
+    ERROR_DELETE: string;
+    ERROR_ADD: string;
+    DEFAULT_STRING: string;
+    DEFAULT_NEW_KEY: string;
+};
+type LocalisedStrings = typeof localisedStrings;
+type TranslateFunction = (key: keyof LocalisedStrings, customData: NodeData, count?: number) => string;
 
 interface JsonEditorProps {
-  data: object
-  rootName?: string
-  onUpdate?: UpdateFunction
-  onEdit?: UpdateFunction
-  onDelete?: UpdateFunction
-  onAdd?: UpdateFunction
-  enableClipboard?: boolean | CopyFunction
-  theme?: ThemeInput
-  icons?: IconReplacements
-  className?: string
-  indent?: number
-  collapse?: boolean | number | FilterFunction
-  showCollectionCount?: boolean | 'when-closed'
-  restrictEdit?: boolean | FilterFunction
-  restrictDelete?: boolean | FilterFunction
-  restrictAdd?: boolean | FilterFunction
-  restrictTypeSelection?: boolean | DataType[] | TypeFilterFunction
-  keySort?: boolean | CompareFunction
-  showArrayIndices?: boolean
-  defaultValue?: unknown
-  minWidth?: string | number
-  maxWidth?: string | number
-  stringTruncate?: number
-  translations?: Partial<LocalisedStrings>
-  customNodeDefinitions?: CustomNodeDefinition[]
+    data: object;
+    rootName?: string;
+    onUpdate?: UpdateFunction;
+    onEdit?: UpdateFunction;
+    onDelete?: UpdateFunction;
+    onAdd?: UpdateFunction;
+    enableClipboard?: boolean | CopyFunction;
+    theme?: ThemeInput;
+    icons?: IconReplacements;
+    className?: string;
+    indent?: number;
+    collapse?: boolean | number | FilterFunction;
+    showCollectionCount?: boolean | 'when-closed';
+    restrictEdit?: boolean | FilterFunction;
+    restrictDelete?: boolean | FilterFunction;
+    restrictAdd?: boolean | FilterFunction;
+    restrictTypeSelection?: boolean | DataType[] | TypeFilterFunction;
+    keySort?: boolean | CompareFunction;
+    showArrayIndices?: boolean;
+    defaultValue?: unknown;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    stringTruncate?: number;
+    translations?: Partial<LocalisedStrings>;
+    customNodeDefinitions?: CustomNodeDefinition[];
+    customText?: CustomTextDefinitions;
 }
-declare const DataTypes: readonly ['string', 'number', 'boolean', 'null', 'object', 'array']
-type DataType = (typeof DataTypes)[number] | 'invalid'
-type CollectionKey = string | number
-type CollectionData = object | unknown[]
-type ErrorString = string
+declare const DataTypes: readonly ["string", "number", "boolean", "null", "object", "array"];
+type DataType = (typeof DataTypes)[number] | 'invalid';
+type CollectionKey = string | number;
+type CollectionData = object | unknown[];
+type ErrorString = string;
 interface IconReplacements {
-  add?: JSX.Element
-  edit?: JSX.Element
-  delete?: JSX.Element
-  copy?: JSX.Element
-  ok?: JSX.Element
-  cancel?: JSX.Element
-  chevron?: JSX.Element
+    add?: JSX.Element;
+    edit?: JSX.Element;
+    delete?: JSX.Element;
+    copy?: JSX.Element;
+    ok?: JSX.Element;
+    cancel?: JSX.Element;
+    chevron?: JSX.Element;
 }
 type UpdateFunction = (props: {
-  newData: object
-  currentData: object
-  newValue: unknown
-  currentValue: unknown
-  name: CollectionKey
-  path: CollectionKey[]
-}) => void | ErrorString | false
-interface FilterProps {
-  key: CollectionKey
-  path: CollectionKey[]
-  level: number
-  value: unknown
-  size: number | null
-}
-type FilterFunction = (input: FilterProps) => boolean
-type TypeFilterFunction = (input: FilterProps) => boolean | DataType[]
-type CopyType = 'path' | 'value'
+    newData: object;
+    currentData: object;
+    newValue: unknown;
+    currentValue: unknown;
+    name: CollectionKey;
+    path: CollectionKey[];
+}) => void | ErrorString | false;
+type FilterFunction = (input: NodeData) => boolean;
+type TypeFilterFunction = (input: NodeData) => boolean | DataType[];
+type CustomTextFunction = (input: NodeData) => string | null;
+type CopyType = 'path' | 'value';
 type CopyFunction = (input: {
-  key: CollectionKey
-  path: CollectionKey[]
-  value: unknown
-  stringValue: string
-  type: CopyType
-}) => void
-type CompareFunction = (a: string, b: string) => number
-type OnChangeFunction = (value: unknown, path: (string | number)[]) => Promise<string | void>
+    key: CollectionKey;
+    path: CollectionKey[];
+    value: unknown;
+    stringValue: string;
+    type: CopyType;
+}) => void;
+type CompareFunction = (a: string, b: string) => number;
+type OnChangeFunction = (value: unknown, path: CollectionKey[]) => Promise<string | void>;
+interface NodeData {
+    key: CollectionKey;
+    path: CollectionKey[];
+    level: number;
+    value: unknown;
+    size: number | null;
+}
 interface BaseNodeProps {
-  data: unknown
-  parentData: CollectionData | null
-  path: CollectionKey[]
-  name: CollectionKey
-  onEdit: OnChangeFunction
-  onDelete: OnChangeFunction
-  enableClipboard: boolean | CopyFunction
-  restrictEditFilter: FilterFunction
-  restrictDeleteFilter: FilterFunction
-  restrictAddFilter: FilterFunction
-  restrictTypeSelection: boolean | DataType[] | TypeFilterFunction
-  stringTruncate: number
-  indent: number
-  translate: TranslateFunction
-  customNodeDefinitions: CustomNodeDefinition[]
+    data: unknown;
+    parentData: CollectionData | null;
+    nodeData: NodeData;
+    onEdit: OnChangeFunction;
+    onDelete: OnChangeFunction;
+    enableClipboard: boolean | CopyFunction;
+    restrictEditFilter: FilterFunction;
+    restrictDeleteFilter: FilterFunction;
+    restrictAddFilter: FilterFunction;
+    restrictTypeSelection: boolean | DataType[] | TypeFilterFunction;
+    stringTruncate: number;
+    indent: number;
+    translate: TranslateFunction;
+    customNodeDefinitions: CustomNodeDefinition[];
 }
 interface CollectionNodeProps extends BaseNodeProps {
-  data: CollectionData
-  collapseFilter: FilterFunction
-  onAdd: OnChangeFunction
-  keySort: boolean | CompareFunction
-  showArrayIndices: boolean
-  showCollectionCount: boolean | 'when-closed'
-  defaultValue: unknown
+    data: CollectionData;
+    collapseFilter: FilterFunction;
+    onAdd: OnChangeFunction;
+    keySort: boolean | CompareFunction;
+    showArrayIndices: boolean;
+    showCollectionCount: boolean | 'when-closed';
+    defaultValue: unknown;
 }
-type ValueData = string | number | boolean | null
+type ValueData = string | number | boolean;
 interface ValueNodeProps extends BaseNodeProps {
-  data: ValueData
-  showLabel: boolean
+    data: ValueData;
+    showLabel: boolean;
 }
-interface CustomNodeProps extends BaseNodeProps {
-  value: ValueData | CollectionData
-  customProps?: Record<string, unknown>
-  parentData: CollectionData | null
-  setValue: React$1.Dispatch<React$1.SetStateAction<ValueData>>
-  handleEdit: () => void
-  handleCancel: () => void
-  handleKeyPress: (e: React$1.KeyboardEvent) => void
-  isEditing: boolean
-  setIsEditing: React$1.Dispatch<React$1.SetStateAction<boolean>>
-  styles: CompiledStyles
+interface CustomNodeProps<T = Record<string, unknown>> extends BaseNodeProps {
+    value: ValueData | CollectionData;
+    customNodeProps?: T;
+    parentData: CollectionData | null;
+    setValue: React.Dispatch<React.SetStateAction<ValueData>>;
+    handleEdit: () => void;
+    handleCancel: () => void;
+    handleKeyPress: (e: React.KeyboardEvent) => void;
+    isEditing: boolean;
+    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
+    styles: CompiledStyles;
 }
-interface CustomNodeDefinition {
-  condition: FilterFunction
-  element: React$1.FC<CustomNodeProps>
-  name?: string
-  customNodeProps?: Record<string, unknown>
-  hideKey?: boolean
-  defaultValue?: unknown
-  showInTypesSelector?: boolean
-  showOnEdit?: boolean
-  showOnView?: boolean
-  showEditTools?: boolean
+interface CustomNodeDefinition<T = Record<string, unknown>> {
+    condition: FilterFunction;
+    element: React.FC<CustomNodeProps<T>>;
+    name?: string;
+    customNodeProps?: Record<string, unknown>;
+    hideKey?: boolean;
+    defaultValue?: unknown;
+    showInTypesSelector?: boolean;
+    showOnEdit?: boolean;
+    showOnView?: boolean;
+    showEditTools?: boolean;
 }
+type CustomTextDefinitions = Partial<{
+    [key in keyof LocalisedStrings]: CustomTextFunction;
+}>;
 
-declare const JsonEditor: React$1.FC<JsonEditorProps>
+declare const JsonEditor: React$1.FC<JsonEditorProps>;
 
-export {
-  CollectionNodeProps,
-  CompareFunction,
-  CopyFunction,
-  CustomNodeDefinition,
-  CustomNodeProps,
-  FilterFunction,
-  IconReplacements,
-  JsonEditor,
-  JsonEditorProps,
-  LocalisedStrings,
-  Theme,
-  ThemeInput,
-  ThemeName,
-  TranslateFunction,
-  UpdateFunction,
-  ValueNodeProps,
-  themes,
-}
+declare const LinkCustomComponent: React$1.FC<CustomNodeProps<{
+    stringTruncate?: number;
+}>>;
+declare const LinkCustomNodeDefinition: CustomNodeDefinition;
+
+export { CollectionNodeProps, CompareFunction, CopyFunction, CustomNodeDefinition, CustomNodeProps, CustomTextDefinitions, FilterFunction, IconReplacements, JsonEditor, JsonEditorProps, LinkCustomComponent, LinkCustomNodeDefinition, LocalisedStrings, Theme, ThemeInput, ThemeName, TranslateFunction, UpdateFunction, ValueNodeProps, themes };

package/build/index.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "1.2.5",
+  "version": "1.3.2",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
@@ -15,6 +15,8 @@
     "setup": "yarn install && cd demo && yarn install",
     "demo": "cd demo && node ./scripts/getVersion.js && yarn start",
     "build": "rimraf ./build && rollup -c && rimraf ./build/dts",
+    "lint": "npx eslint \"src/**\"",
+    "postbuild": "node ./scripts/cleanBuildTypes.js",
     "compile": "rimraf ./build && tsc",
     "release": "yarn publish",
     "release-demo": "cd demo && yarn deploy"
@@ -24,19 +26,33 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "resolutions": {
+    "strip-ansi": "6.0.1",
+    "string-width": "4.2.2",
+    "wrap-ansi": "7.0.0"
+  },
   "dependencies": {
     "just-clone": "^6.2.0",
-    "object-property-assigner": "^1.0.1",
-    "object-property-extractor": "^1.0.7",
-    "react-icons": "^4.12.0"
+    "object-property-assigner": "^1.2.0",
+    "object-property-extractor": "^1.0.10",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^20.11.6",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fs-extra": "^11.2.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.6",
+    "rollup": "^4.10.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -44,6 +60,6 @@
     "rollup-plugin-styles": "^4.0.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "typescript": "*"
   }
 }