json-edit-react 0.9.4 → 0.9.6

package/README.md

@@ -9,7 +9,7 @@ Features include:
  - edit individual values, or whole objects as JSON text
  - fine-grained control over which elements can be edited, deleted, or added to
  - customisable UI, through simple, pre-defined [themes](#themes), or specific CSS overrides
- - self-contained — constructed with HTML/CSS, so no dependance on external UI libraries
+ - self-contained — rendered with plain HTML/CSS, so no dependance on external UI libraries
 
 **[Explore the Demo](https://carlosnz.github.io/json-edit-react/)**
 
@@ -119,10 +119,12 @@ The function needn't return anything, but if it returns `false`, it will be cons
 A similar callback is executed whenever an item is copied to the clipboard (if passed to the `enableClipboard` prop), but with a different input parameter:
 
 ```js
-    key:   // name of the property being copied  
-    path:  // path to the property
-    value: // the value copied to the clipboard (Note: this value will be serialised to a string)
-    type:  // Either "path" or "value" depending on whether "Cmd/Ctrl" was pressed 
+    key         // name of the property being copied  
+    path        // path to the property
+    value       // the value copied to the clipboard
+    type        // Either "path" or "value" depending on whether "Cmd/Ctrl" was pressed 
+    stringValue // A nicely stringified version of `value`  
+                // (i.e. what the clipboard actually receives)
 ```
 
 Since there is very little user feedback when clicking "Copy", a good idea would be to present some kind of notification in this callback.
@@ -335,6 +337,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+- **0.9.6**: Performance improvement by not processing child elements if not visible
 - **0.9.4**:
   - Layout improvements
   - Better internal handling of functions in data

package/build/index.cjs.js

@@ -55,7 +55,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.2s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\n}\n\n.jer-editor-container textarea {\n  /* width: 90%; */\n  color: var(--jer-input-color);\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container textarea:focus {\n  border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container input:focus {\n  border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n  background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n  /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n  display: flex;\n  min-height: 1.7em;\n  gap: 0.3em;\n  align-items: center;\n}\n\n.jer-collection-header-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collection-inner {\n  position: relative;\n}\n\n.jer-collection-text-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3em;\n  align-items: flex-start;\n}\n\n.jer-collection-text-area {\n  resize: both;\n  padding-top: 0.2em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  overflow: hidden;\n  max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n  position: absolute;\n  bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n  margin-left: 1em;\n}\n\n.jer-value-component {\n  position: relative;\n}\n\n.jer-value-main-row {\n  display: flex;\n  gap: 0;\n}\n\n.jer-value-and-buttons {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\n}\n\n.jer-input-text {\n  resize: none;\n  margin: 0;\n  height: 1.4em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n  transform: scale(1.5);\n  margin-left: 0.3em;\n  margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n  word-break: break-word;\n  line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n  opacity: 0.5;\n  font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n  height: 1.6em;\n}\n\n.jer-input-number {\n  min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.jer-input-buttons {\n  gap: 0.4em;\n}\n\n.jer-edit-buttons {\n  gap: 0.4em;\n  margin-left: 0.5em;\n  opacity: 0;\n}\n\n.jer-confirm-buttons {\n  gap: 0.2em;\n  margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n  opacity: 1;\n  position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-icon-wrapper {\n  height: 1.4em;\n  opacity: 1;\n  transition: 0.2s;\n}\n\n.jer-icon-wrapper:active {\n  position: relative;\n  top: 0.07em;\n}\n\n.jer-icon-wrapper:hover {\n  opacity: 0.85;\n  transition: 0.2s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse {\n  position: relative;\n}\n\n.jer-copy-pulse:hover {\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon {\n  /* font-size: '2em'; */\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
+var css = ":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.5s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\n}\n\n.jer-editor-container textarea {\n  /* width: 90%; */\n  color: var(--jer-input-color);\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container textarea:focus {\n  border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container input:focus {\n  border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n  background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n  /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n  display: flex;\n  min-height: 1.7em;\n  gap: 0.3em;\n  align-items: center;\n}\n\n.jer-collection-header-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collection-inner {\n  position: relative;\n}\n\n.jer-collection-text-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3em;\n  align-items: flex-start;\n}\n\n.jer-collection-text-area {\n  resize: both;\n  padding-top: 0.2em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  overflow: hidden;\n  max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n  position: absolute;\n  bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n  margin-left: 1em;\n}\n\n.jer-value-component {\n  position: relative;\n}\n\n.jer-value-main-row {\n  display: flex;\n  gap: 0;\n}\n\n.jer-value-and-buttons {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\n}\n\n.jer-input-text {\n  resize: none;\n  margin: 0;\n  height: 1.4em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n  transform: scale(1.5);\n  margin-left: 0.3em;\n  margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n  word-break: break-word;\n  line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n  opacity: 0.5;\n  font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n  height: 1.6em;\n}\n\n.jer-input-number {\n  min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.jer-input-buttons {\n  gap: 0.4em;\n}\n\n.jer-edit-buttons {\n  gap: 0.4em;\n  margin-left: 0.5em;\n  opacity: 0;\n}\n\n.jer-confirm-buttons {\n  gap: 0.2em;\n  margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n  opacity: 1;\n  position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n  position: relative;\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n  /* font-size: '2em'; */\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
 n(css,{});
 
 const defaultTheme$1 = {
@@ -394,6 +394,7 @@ const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, })
                 }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", Object.assign({ className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input) }, { children: dummyValue }))] })));
 };
 
+const INVALID_FUNCTION_STRING = '**INVALID_FUNCTION**';
 const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
 const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, stringTruncate, }) => {
     const { styles } = useTheme();
@@ -430,14 +431,23 @@ const NullValue = ({ value, isEditing, setIsEditing }) => {
     const { styles } = useTheme();
     return isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsxRuntime.jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
 };
-const ObjectValue = () => {
-    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
-};
-const ArrayValue = ({ value }) => {
-    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
-};
-const InvalidValue = () => {
-    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
+const ObjectValue = () => (jsxRuntime.jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' })));
+const ArrayValue = ({ value }) => (jsxRuntime.jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` })));
+const InvalidValue = ({ value }) => {
+    let message = 'Error!';
+    switch (typeof value) {
+        case 'string':
+            if (value === INVALID_FUNCTION_STRING)
+                message = 'Function';
+            break;
+        case 'undefined':
+            message = 'Undefined';
+            break;
+        case 'symbol':
+            message = 'Symbol';
+            break;
+    }
+    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: message }));
 };
 
 const Icon = ({ name, rotate }) => {
@@ -458,7 +468,7 @@ const Icon = ({ name, rotate }) => {
         case 'cancel':
             return ((_f = icons === null || icons === void 0 ? void 0 : icons.cancel) !== null && _f !== void 0 ? _f : (jsxRuntime.jsx(ti.TiCancel, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '130%' }, styles.iconCancel) }))));
         case 'chevron':
-            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsxRuntime.jsx(fa.FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
+            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsxRuntime.jsx(fa.FaChevronDown, { className: `jer-accordion-icon${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
         default:
             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
@@ -482,21 +492,24 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
             setIsAdding(false);
     };
     const handleCopy = (e) => {
-        let type = 'value';
-        let value = '';
+        let copyType = 'value';
+        let value;
+        let stringValue = '';
         if (enableClipboard) {
             switch (e.ctrlKey || e.metaKey) {
                 case true:
                     value = stringifyPath(path);
-                    type = 'path';
+                    stringValue = value;
+                    copyType = 'path';
                     break;
                 default:
-                    value = JSON.stringify(data, null, 2);
+                    value = data;
+                    stringValue = type ? JSON.stringify(data, null, 2) : String(value);
             }
-            navigator.clipboard.writeText(value);
+            navigator.clipboard.writeText(stringValue);
         }
         if (typeof enableClipboard === 'function')
-            enableClipboard({ value, path, key: name, type });
+            enableClipboard({ value, stringValue, path, key: name, type: copyType });
     };
     return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsxRuntime.jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsxRuntime.jsx(Icon, { name: "copy" }) }))), startEdit && (jsxRuntime.jsx("div", Object.assign({ onClick: startEdit }, { children: jsxRuntime.jsx(Icon, { name: "edit" }) }))), handleDelete && (jsxRuntime.jsx("div", Object.assign({ onClick: handleDelete }, { children: jsxRuntime.jsx(Icon, { name: "delete" }) }))), handleAdd && (jsxRuntime.jsx("div", Object.assign({ onClick: () => {
                     if (type === 'object')
@@ -530,11 +543,11 @@ const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
 const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, showArrayIndices, stringTruncate, indent, translate, }) => {
     const { styles } = useTheme();
     const [isEditing, setIsEditing] = react.useState(false);
-    const [value, setValue] = react.useState(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
+    const [value, setValue] = react.useState(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
     const [error, setError] = react.useState(null);
     const [dataType, setDataType] = react.useState(getDataType(data));
     react.useEffect(() => {
-        setValue(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
+        setValue(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
         setDataType(getDataType(data));
     }, [data, error]);
     const handleChangeDataType = (type) => {
@@ -588,7 +601,7 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         value,
         setValue,
         isEditing,
-        setIsEditing,
+        setIsEditing: canEdit ? () => setIsEditing(true) : () => { },
         handleEdit,
         handleCancel,
         path,
@@ -659,7 +672,10 @@ const CollectionNode = (_a) => {
     const [error, setError] = react.useState(null);
     const collectionSize = Object.keys(data).length;
     const filterProps = { key: name, path, level: path.length, value: data, size: collectionSize };
-    const [collapsed, setCollapsed] = react.useState(collapseFilter(filterProps));
+    const startCollapsed = collapseFilter(filterProps);
+    const [collapsed, setCollapsed] = react.useState(startCollapsed);
+    const hasBeenOpened = react.useRef(!startCollapsed);
+    const [isAnimating, setIsAnimating] = react.useState(false);
     react.useEffect(() => {
         setStringifiedValue(JSON.stringify(data, null, 2));
     }, [data]);
@@ -675,6 +691,14 @@ const CollectionNode = (_a) => {
         else if (e.key === 'Escape')
             handleCancel();
     };
+    const handleCollapse = () => {
+        if (!isEditing) {
+            setIsAnimating(true);
+            hasBeenOpened.current = true;
+            setCollapsed(!collapsed);
+            setTimeout(() => setIsAnimating(false), 500);
+        }
+    };
     const showError = (errorString) => {
         setError(errorString);
         setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
@@ -739,10 +763,7 @@ const CollectionNode = (_a) => {
     if (keySort && collectionType === 'object')
         keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
     const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: () => {
-                            if (!isEditing)
-                                setCollapsed(!collapsed);
-                        } }, { children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsxRuntime.jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsxRuntime.jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
+    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: handleCollapse }, { children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsxRuntime.jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsxRuntime.jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
                             ? translate('ITEM_SINGLE', 1)
                             : translate('ITEMS_MULTIPLE', collectionSize) }))), jsxRuntime.jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
                             ? () => {
@@ -750,10 +771,12 @@ const CollectionNode = (_a) => {
                                 setCollapsed(false);
                             }
                             : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'jer-collection-inner', style: {
-                    maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 4}em` : undefined,
-                    overflowY: collapsed ? 'hidden' : 'visible',
+                    maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
+                    overflowY: collapsed || isAnimating ? 'hidden' : 'visible',
                     transition: `max-height ${transitionTime}`,
-                } }, { children: [isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsxRuntime.jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) }))] })), !collapsed && !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
+                } }, { children: [isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hasBeenOpened.current
+                            ? null
+                            : keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsxRuntime.jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) })), jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close }))] }))] })));
 };
 
 const localisedStrings = {
@@ -772,7 +795,7 @@ const translate = (translations, key, count) => {
 };
 const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
 
-const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, restrictEdit = false, restrictDelete = false, restrictAdd = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 600, stringTruncate = 250, translations = {}, className, }) => {
+const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, restrictEdit = false, restrictDelete = false, restrictAdd = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', stringTruncate = 250, translations = {}, className, }) => {
     const [data, setData] = react.useState(srcData);
     const { styles, setTheme, setIcons } = useTheme();
     const collapseFilter = react.useCallback(getFilterFunction(collapse), [collapse]);

package/build/index.d.ts

@@ -55,7 +55,7 @@ interface JsonEditorProps {
     showArrayIndices?: boolean;
     defaultValue?: unknown;
     minWidth?: string | number;
-    maxWidth?: number;
+    maxWidth?: string | number;
     stringTruncate?: number;
     translations?: Partial<LocalisedStrings>;
 }
@@ -89,7 +89,8 @@ type CopyType = 'path' | 'value';
 type CopyFunction = (input: {
     key: CollectionKey;
     path: CollectionKey[];
-    value: string;
+    value: unknown;
+    stringValue: string;
     type: CopyType;
 }) => void;
 type CompareFunction = (a: string, b: string) => number;

package/build/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useState, useContext, useEffect, useMemo, useCallback } from 'react';
+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';
@@ -51,7 +51,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.2s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\n}\n\n.jer-editor-container textarea {\n  /* width: 90%; */\n  color: var(--jer-input-color);\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container textarea:focus {\n  border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container input:focus {\n  border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n  background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n  /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n  display: flex;\n  min-height: 1.7em;\n  gap: 0.3em;\n  align-items: center;\n}\n\n.jer-collection-header-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collection-inner {\n  position: relative;\n}\n\n.jer-collection-text-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3em;\n  align-items: flex-start;\n}\n\n.jer-collection-text-area {\n  resize: both;\n  padding-top: 0.2em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  overflow: hidden;\n  max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n  position: absolute;\n  bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n  margin-left: 1em;\n}\n\n.jer-value-component {\n  position: relative;\n}\n\n.jer-value-main-row {\n  display: flex;\n  gap: 0;\n}\n\n.jer-value-and-buttons {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\n}\n\n.jer-input-text {\n  resize: none;\n  margin: 0;\n  height: 1.4em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n  transform: scale(1.5);\n  margin-left: 0.3em;\n  margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n  word-break: break-word;\n  line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n  opacity: 0.5;\n  font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n  height: 1.6em;\n}\n\n.jer-input-number {\n  min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.jer-input-buttons {\n  gap: 0.4em;\n}\n\n.jer-edit-buttons {\n  gap: 0.4em;\n  margin-left: 0.5em;\n  opacity: 0;\n}\n\n.jer-confirm-buttons {\n  gap: 0.2em;\n  margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n  opacity: 1;\n  position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-icon-wrapper {\n  height: 1.4em;\n  opacity: 1;\n  transition: 0.2s;\n}\n\n.jer-icon-wrapper:active {\n  position: relative;\n  top: 0.07em;\n}\n\n.jer-icon-wrapper:hover {\n  opacity: 0.85;\n  transition: 0.2s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse {\n  position: relative;\n}\n\n.jer-copy-pulse:hover {\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon {\n  /* font-size: '2em'; */\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
+var css = ":root {\n  --jer-select-border: #b6b6b6;\n  --jer-select-focus: #777;\n  --jer-select-arrow: #777;\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.5s;\n  --jer-highlight-color: #b3d8ff;\n}\n\n.jer-visible {\n  opacity: 1;\n  transition: var(--jer-expand-transition-time);\n}\n\n.jer-hidden {\n  opacity: 0;\n  transition: var(--jer-expand-transition-time);\n}\n\n/* Select styled as per:\nhttps://moderncss.dev/custom-select-styles-with-pure-css/\n*/\n\n.jer-select select {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  /* width: 100%; */\n  font-family: inherit;\n  font-size: inherit;\n  color: black;\n  cursor: inherit;\n  line-height: inherit;\n  z-index: 1;\n  outline: none;\n}\nselect::-ms-expand {\n  display: none;\n}\n\n.jer-select {\n  display: grid;\n  grid-template-areas: 'select';\n  align-items: center;\n  position: relative;\n  min-width: 12ch;\n  max-width: 15ch;\n  border: 1px solid var(--jer-select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1em;\n  cursor: pointer;\n  line-height: 1.1;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n.jer-select select,\n.jer-select::after {\n  grid-area: select;\n}\n.jer-select:not(.jer-select--multiple)::after {\n  content: '';\n  justify-self: end;\n  width: 0.8em;\n  height: 0.5em;\n  background-color: var(--jer-select-arrow);\n  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n}\n\nselect:focus + .focus {\n  position: absolute;\n  top: -1px;\n  left: -1px;\n  right: -1px;\n  bottom: -1px;\n  border: 1px solid var(--jer-select-focus);\n  border-radius: inherit;\n}\n\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\n}\n\n.jer-editor-container textarea {\n  /* width: 90%; */\n  color: var(--jer-input-color);\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container textarea:focus {\n  border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container input:focus {\n  border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n  background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n  /* color: red; */\n}\n\n.jer-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n  display: flex;\n  min-height: 1.7em;\n  gap: 0.3em;\n  align-items: center;\n}\n\n.jer-collection-header-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collection-inner {\n  position: relative;\n}\n\n.jer-collection-text-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3em;\n  align-items: flex-start;\n}\n\n.jer-collection-text-area {\n  resize: both;\n  padding-top: 0.2em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  overflow: hidden;\n  max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n  position: absolute;\n  bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n  margin-left: 1em;\n}\n\n.jer-value-component {\n  position: relative;\n}\n\n.jer-value-main-row {\n  display: flex;\n  gap: 0;\n}\n\n.jer-value-and-buttons {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  padding-left: 0.5em;\n}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\n}\n\n.jer-input-text {\n  resize: none;\n  margin: 0;\n  height: 1.4em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-input-boolean {\n  transform: scale(1.5);\n  margin-left: 0.3em;\n  margin-right: 0.3em;\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n  word-break: break-word;\n  line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n  opacity: 0.5;\n  font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n  height: 1.6em;\n}\n\n.jer-input-number {\n  min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.jer-input-buttons {\n  gap: 0.4em;\n}\n\n.jer-edit-buttons {\n  gap: 0.4em;\n  margin-left: 0.5em;\n  opacity: 0;\n}\n\n.jer-confirm-buttons {\n  gap: 0.2em;\n  margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n  opacity: 1;\n  position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-and-buttons:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-copy-pulse {\n  position: relative;\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-copy-pulse:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-accordion-icon {\n  /* font-size: '2em'; */\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
 n(css,{});
 
 const defaultTheme$1 = {
@@ -390,6 +390,7 @@ const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, })
                 }, onKeyDown: handleKeyPress }), jsx("span", Object.assign({ className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input) }, { children: dummyValue }))] })));
 };
 
+const INVALID_FUNCTION_STRING = '**INVALID_FUNCTION**';
 const truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
 const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, stringTruncate, }) => {
     const { styles } = useTheme();
@@ -426,14 +427,23 @@ const NullValue = ({ value, isEditing, setIsEditing }) => {
     const { styles } = useTheme();
     return isEditing ? (jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
 };
-const ObjectValue = () => {
-    return jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' }));
-};
-const ArrayValue = ({ value }) => {
-    return jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` }));
-};
-const InvalidValue = () => {
-    return jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: "Invalid value" }));
+const ObjectValue = () => (jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' })));
+const ArrayValue = ({ value }) => (jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` })));
+const InvalidValue = ({ value }) => {
+    let message = 'Error!';
+    switch (typeof value) {
+        case 'string':
+            if (value === INVALID_FUNCTION_STRING)
+                message = 'Function';
+            break;
+        case 'undefined':
+            message = 'Undefined';
+            break;
+        case 'symbol':
+            message = 'Symbol';
+            break;
+    }
+    return jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: message }));
 };
 
 const Icon = ({ name, rotate }) => {
@@ -454,7 +464,7 @@ const Icon = ({ name, rotate }) => {
         case 'cancel':
             return ((_f = icons === null || icons === void 0 ? void 0 : icons.cancel) !== null && _f !== void 0 ? _f : (jsx(TiCancel, Object.assign({}, commonProps, { style: Object.assign({ fontSize: '130%' }, styles.iconCancel) }))));
         case 'chevron':
-            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsx(FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
+            return ((_g = icons === null || icons === void 0 ? void 0 : icons.chevron) !== null && _g !== void 0 ? _g : (jsx(FaChevronDown, { className: `jer-accordion-icon${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
         default:
             return jsx(Fragment, {});
     }
@@ -478,21 +488,24 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
             setIsAdding(false);
     };
     const handleCopy = (e) => {
-        let type = 'value';
-        let value = '';
+        let copyType = 'value';
+        let value;
+        let stringValue = '';
         if (enableClipboard) {
             switch (e.ctrlKey || e.metaKey) {
                 case true:
                     value = stringifyPath(path);
-                    type = 'path';
+                    stringValue = value;
+                    copyType = 'path';
                     break;
                 default:
-                    value = JSON.stringify(data, null, 2);
+                    value = data;
+                    stringValue = type ? JSON.stringify(data, null, 2) : String(value);
             }
-            navigator.clipboard.writeText(value);
+            navigator.clipboard.writeText(stringValue);
         }
         if (typeof enableClipboard === 'function')
-            enableClipboard({ value, path, key: name, type });
+            enableClipboard({ value, stringValue, path, key: name, type: copyType });
     };
     return (jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsx(Icon, { name: "copy" }) }))), startEdit && (jsx("div", Object.assign({ onClick: startEdit }, { children: jsx(Icon, { name: "edit" }) }))), handleDelete && (jsx("div", Object.assign({ onClick: handleDelete }, { children: jsx(Icon, { name: "delete" }) }))), handleAdd && (jsx("div", Object.assign({ onClick: () => {
                     if (type === 'object')
@@ -526,11 +539,11 @@ const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
 const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, showArrayIndices, stringTruncate, indent, translate, }) => {
     const { styles } = useTheme();
     const [isEditing, setIsEditing] = useState(false);
-    const [value, setValue] = useState(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
+    const [value, setValue] = useState(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
     const [error, setError] = useState(null);
     const [dataType, setDataType] = useState(getDataType(data));
     useEffect(() => {
-        setValue(typeof data === 'function' ? 'INVALID_FUNCTION' : data);
+        setValue(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
         setDataType(getDataType(data));
     }, [data, error]);
     const handleChangeDataType = (type) => {
@@ -584,7 +597,7 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         value,
         setValue,
         isEditing,
-        setIsEditing,
+        setIsEditing: canEdit ? () => setIsEditing(true) : () => { },
         handleEdit,
         handleCancel,
         path,
@@ -655,7 +668,10 @@ const CollectionNode = (_a) => {
     const [error, setError] = useState(null);
     const collectionSize = Object.keys(data).length;
     const filterProps = { key: name, path, level: path.length, value: data, size: collectionSize };
-    const [collapsed, setCollapsed] = useState(collapseFilter(filterProps));
+    const startCollapsed = collapseFilter(filterProps);
+    const [collapsed, setCollapsed] = useState(startCollapsed);
+    const hasBeenOpened = useRef(!startCollapsed);
+    const [isAnimating, setIsAnimating] = useState(false);
     useEffect(() => {
         setStringifiedValue(JSON.stringify(data, null, 2));
     }, [data]);
@@ -671,6 +687,14 @@ const CollectionNode = (_a) => {
         else if (e.key === 'Escape')
             handleCancel();
     };
+    const handleCollapse = () => {
+        if (!isEditing) {
+            setIsAnimating(true);
+            hasBeenOpened.current = true;
+            setCollapsed(!collapsed);
+            setTimeout(() => setIsAnimating(false), 500);
+        }
+    };
     const showError = (errorString) => {
         setError(errorString);
         setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
@@ -735,10 +759,7 @@ const CollectionNode = (_a) => {
     if (keySort && collectionType === 'object')
         keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
     const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    return (jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsx("div", Object.assign({ onClick: () => {
-                            if (!isEditing)
-                                setCollapsed(!collapsed);
-                        } }, { children: jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
+    return (jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsx("div", Object.assign({ onClick: handleCollapse }, { children: jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
                             ? translate('ITEM_SINGLE', 1)
                             : translate('ITEMS_MULTIPLE', collectionSize) }))), jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (jsx(EditButtons, { startEdit: canEdit
                             ? () => {
@@ -746,10 +767,12 @@ const CollectionNode = (_a) => {
                                 setCollapsed(false);
                             }
                             : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] })), jsxs("div", Object.assign({ className: 'jer-collection-inner', style: {
-                    maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 4}em` : undefined,
-                    overflowY: collapsed ? 'hidden' : 'visible',
+                    maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
+                    overflowY: collapsed || isAnimating ? 'hidden' : 'visible',
                     transition: `max-height ${transitionTime}`,
-                } }, { children: [isEditing ? (jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxs("div", { children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsx(Fragment, { children: keyValueArray.map(([key, value]) => (jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) }))] })), !collapsed && !isEditing && (jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close })))] })));
+                } }, { children: [isEditing ? (jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxs("div", { children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsx(Fragment, { children: !hasBeenOpened.current
+                            ? null
+                            : keyValueArray.map(([key, value]) => (jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) })), jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close }))] }))] })));
 };
 
 const localisedStrings = {
@@ -768,7 +791,7 @@ const translate = (translations, key, count) => {
 };
 const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
 
-const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, restrictEdit = false, restrictDelete = false, restrictAdd = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 600, stringTruncate = 250, translations = {}, className, }) => {
+const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, restrictEdit = false, restrictDelete = false, restrictAdd = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', stringTruncate = 250, translations = {}, className, }) => {
     const [data, setData] = useState(srcData);
     const { styles, setTheme, setIcons } = useTheme();
     const collapseFilter = useCallback(getFilterFunction(collapse), [collapse]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
@@ -13,9 +13,11 @@
   "license": "MIT",
   "scripts": {
     "setup": "yarn install && cd demo && yarn install",
-    "demo": "cd demo && yarn start",
+    "demo": "cd demo && node ./scripts/getVersion.js && yarn start",
     "build": "rimraf ./build && rollup -c && rimraf ./build/dts",
-    "compile": "rimraf ./build && tsc"
+    "compile": "rimraf ./build && tsc",
+    "release": "yarn build && yarn publish",
+    "release-demo": "cd demo && yarn deploy"
   },
   "peerDependencies": {
     "@types/react": "^18.2.6",