@uiw/react-json-view 1.3.0 → 1.5.0

package/esm/editor/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+import { forwardRef } from 'react';
+import JsonView from '../';
+import { ObjectKey } from './objectKey';
+import { ReValue } from './value';
+import { jsx as _jsx } from "react/jsx-runtime";
+var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      onEdit,
+      components,
+      editable = true,
+      displayDataTypes = true
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var comps = _extends({}, components, {
+    objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
+      editableValue: editable,
+      onEdit: onEdit,
+      render: components == null ? void 0 : components.objectKey
+    })),
+    value: reprops => {
+      return /*#__PURE__*/_jsx(ReValue, _extends({}, reprops, {
+        editableValue: editable,
+        displayDataTypes: displayDataTypes,
+        onEdit: onEdit
+      }));
+    }
+  });
+  return /*#__PURE__*/_jsx(JsonView, _extends({}, reset, {
+    displayDataTypes: false,
+    components: comps,
+    ref: ref
+  }));
+});
+export default JsonViewEditor;

package/esm/editor/objectKey.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SemicolonProps } from '../semicolon';
+import { JsonViewEditorProps } from './';
+export interface ObjectKeyProps<T extends object> extends SemicolonProps {
+    onEdit?: JsonViewEditorProps<T>['onEdit'];
+    render?: (props: SemicolonProps & {
+        ref?: React.RefObject<HTMLElement>;
+    }) => React.ReactNode;
+    editableValue?: boolean;
+}
+export declare const ObjectKey: FC<ObjectKeyProps<object>>;

package/esm/editor/objectKey.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "editableValue", "onEdit", "highlightUpdates", "render"];
+import { useEffect, useRef, useState } from 'react';
+import { useHighlight } from '../semicolon';
+import { Label } from '../value';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ObjectKey = props => {
+  var {
+      className,
+      value,
+      keyName,
+      parentName,
+      quotes,
+      label,
+      editableValue,
+      onEdit,
+      highlightUpdates = true,
+      render
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var [editable, setEditable] = useState(false);
+  var [curentLabel, setCurentLabel] = useState(label);
+  useEffect(() => setCurentLabel(label), [label]);
+  var $edit = useRef(null);
+  useHighlight({
+    value,
+    highlightUpdates: highlightUpdates,
+    highlightContainer: $edit
+  });
+  var click = evn => {
+    evn.stopPropagation();
+    if (!editableValue) return;
+    if (typeof keyName !== 'string') return;
+    if (editable) return;
+    setEditable(true);
+    if ($edit.current) {
+      var _$edit$current;
+      $edit.current.contentEditable = 'true';
+      (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
+    }
+  };
+  var blur = () => {
+    setEditable(false);
+    if ($edit.current) {
+      var _$edit$current2;
+      $edit.current.contentEditable = 'false';
+      (_$edit$current2 = $edit.current) == null ? void 0 : _$edit$current2.focus();
+      setCurentLabel($edit.current.innerText);
+      onEdit && onEdit({
+        value: $edit.current.innerText,
+        oldValue: curentLabel,
+        keyName,
+        parentName,
+        type: 'key'
+      });
+    }
+  };
+  var focus = () => {
+    if ($edit.current) {
+      var _$edit$current3;
+      $edit.current.contentEditable = 'true';
+      (_$edit$current3 = $edit.current) == null ? void 0 : _$edit$current3.focus();
+    }
+  };
+  var keyDown = evn => {
+    if (evn.key === 'Enter') {
+      evn.stopPropagation();
+      evn.preventDefault();
+      $edit.current.contentEditable = 'false';
+    }
+  };
+  useEffect(() => {
+    if ($edit.current) {
+      $edit.current.addEventListener("paste", e => {
+        e.preventDefault();
+        // @ts-ignore
+        var text = e.clipboardData.getData("text/plain");
+        document.execCommand("insertHTML", false, text);
+      });
+    }
+  }, [$edit]);
+  var style = {
+    minWidth: 34,
+    minHeight: 18,
+    paddingInline: 3,
+    display: 'inline-block'
+  };
+  var content = typeof keyName === 'string' ? "" + quotes + curentLabel + quotes : curentLabel;
+  var spanProps = {
+    onClick: click,
+    onFocus: focus,
+    onBlur: blur,
+    onKeyDown: keyDown,
+    style: editable ? style : {},
+    contentEditable: editable,
+    spellCheck: false,
+    autoFocus: editable,
+    suppressContentEditableWarning: true,
+    children: editable ? curentLabel : content
+  };
+  if (render) {
+    spanProps.value = value;
+    spanProps.keyName = keyName;
+    spanProps.parentName = parentName;
+    return render(_extends({
+      className
+    }, reset, spanProps, {
+      parentName,
+      label: curentLabel,
+      children: editable ? curentLabel : content,
+      ref: $edit
+    }));
+  }
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: className
+  }, reset, {
+    autoFocus: editable
+  }, spanProps, {
+    ref: $edit
+  }));
+};

package/esm/editor/value.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { TypeProps } from '../value';
+import { JsonViewEditorProps } from './';
+export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+    onEdit?: JsonViewEditorProps<T>['onEdit'];
+    quotes?: JsonViewEditorProps<T>['quotes'];
+    keyName?: JsonViewEditorProps<T>['keyName'];
+    type: TypeProps['type'];
+    value?: unknown;
+    visible?: boolean;
+    editableValue?: boolean;
+    displayDataTypes?: boolean;
+}
+export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/editor/value.js

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "content", "children", "displayDataTypes", "editableValue", "onEdit"];
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { getValueString, isFloat, Type, typeMap } from '../value';
+import { EditIcon } from './icon/edit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Quotes = _ref => {
+  var {
+    show,
+    style,
+    quotes
+  } = _ref;
+  if (!quotes || !show) return;
+  return /*#__PURE__*/_jsx("span", {
+    style: style,
+    children: quotes
+  });
+};
+export function ReValue(props) {
+  var _typeMap$typeStr;
+  var {
+      type,
+      value,
+      visible,
+      quotes,
+      style,
+      content,
+      displayDataTypes,
+      editableValue,
+      onEdit
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var [editable, setEditable] = useState(false);
+  var $edit = useRef(null);
+  var [curentType, setCurentType] = useState(type);
+  var [curentChild, setCurentChild] = useState(value);
+  useEffect(() => setCurentChild(value), [value]);
+  var click = evn => {
+    evn.stopPropagation();
+    if (!editableValue) return;
+    if ($edit.current) {
+      var _$edit$current;
+      setEditable(true);
+      $edit.current.contentEditable = 'true';
+      (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
+    }
+  };
+  var keyDown = evn => {
+    if (!editableValue) return;
+    if (evn.key === 'Enter') {
+      evn.stopPropagation();
+      evn.preventDefault();
+      setEditable(false);
+      $edit.current.contentEditable = 'false';
+    }
+  };
+  var blur = () => {
+    if (!editableValue) return;
+    setEditable(false);
+    if ($edit.current) {
+      $edit.current.contentEditable = 'false';
+      var text = $edit.current.innerText;
+      if (curentType === 'number' || curentType === 'float') {
+        text = Number(text);
+        setCurentType(isFloat(text) ? 'float' : 'number');
+      }
+      if (curentType === 'url' && typeof text === 'string') {
+        text = new URL(text);
+      }
+      if (Number.isNaN(text)) {
+        setCurentType('number');
+      }
+      if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
+        text = /^(true)$/ig.test(text) ? true : false;
+        setCurentType('boolean');
+      } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
+        text = BigInt(text.replace(/n$/ig, ''));
+        setCurentType('bigint');
+      } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+        text = null;
+        setCurentType('null');
+      } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+        text = undefined;
+        setCurentType('undefined');
+      } else if (typeof text === 'string') {
+        try {
+          var dt = new Date(text);
+          if (dt.toString() !== 'Invalid Date') {
+            text = dt;
+            setCurentType('date');
+          }
+        } catch (error) {}
+      }
+      setCurentChild(text);
+      onEdit && onEdit({
+        type: 'value',
+        value: text,
+        oldValue: curentChild
+      });
+    }
+  };
+  var defaultStyle = {
+    minWidth: 34,
+    minHeight: 18,
+    paddingInline: 3,
+    display: 'inline-block'
+  };
+  var {
+    type: typeStr,
+    content: childStr
+  } = getValueString(curentChild);
+  var color = ((_typeMap$typeStr = typeMap[typeStr]) == null ? void 0 : _typeMap$typeStr.color) || '';
+  var spanProps = _extends({}, reset, {
+    onBlur: blur,
+    onKeyDown: keyDown,
+    spellCheck: false,
+    style: editable ? _extends({}, style, defaultStyle, {
+      color
+    }) : _extends({}, style, {
+      color
+    })
+  });
+  var typeView = /*#__PURE__*/_jsx(Type, {
+    type: typeStr
+  });
+  if (typeStr === 'null' || typeStr === 'undefined') {
+    typeView = /*#__PURE__*/_jsx(Fragment, {});
+  }
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [displayDataTypes && typeView, /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(Quotes, {
+        style: style,
+        quotes: quotes,
+        show: typeStr === 'string'
+      }), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
+        ref: $edit,
+        "data-value": content,
+        children: typeof curentChild === 'string' ? curentChild : childStr
+      })), /*#__PURE__*/_jsx(Quotes, {
+        style: style,
+        quotes: quotes,
+        show: typeStr === 'string'
+      })]
+    }), visible && editableValue && /*#__PURE__*/_jsx(EditIcon, {
+      onClick: click
+    })]
+  });
+}

package/esm/index.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import { MetaProps, SemicolonProps, EllipsisProps } from './node';
+import { SemicolonProps } from './semicolon';
 import { ValueViewProps } from './value';
 import { CopiedProps } from './copied';
+import { EllipsisProps } from './comps/ellipsis';
+import { MetaProps } from './comps/meta';
 export * from './node';
 export * from './value';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -19,6 +21,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
+    /** Whether sort keys through `String.prototype.localeCompare()` @default false */
+    objectSortKeys?: boolean | ((a: string, b: string) => number);
     /** Display for quotes in object-key @default " */
     quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

package/esm/node.d.ts

@@ -1,25 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
-export interface MetaProps extends LabelProps {
-    isArray?: boolean;
-    start?: boolean;
-    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
-}
-export declare function usePrevious<T>(value: T): T | undefined;
-export declare function Meta(props: MetaProps): JSX.Element;
-export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-    render?: (props: EllipsisProps) => JSX.Element;
-}
-export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
-export interface SemicolonProps extends LabelProps {
-    show?: boolean;
-    highlightUpdates?: boolean;
-    quotes?: JsonViewProps<object>['quotes'];
-    value?: object;
-    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
-}
-export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
 export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;

package/esm/node.js

@@ -1,146 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isArray", "start", "className", "render"],
-  _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes"],
-  _excluded4 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-import { Fragment, useId, cloneElement, useState, useMemo, useRef, useEffect } from 'react';
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+import { Fragment, useId, cloneElement, useState } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
-import { Copied } from './copied';
+import { Semicolon } from './semicolon';
+import { Tools } from './tools';
+import { Ellipsis } from './comps/ellipsis';
+import { Meta } from './comps/meta';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export function usePrevious(value) {
-  var ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-export function Meta(props) {
-  var {
-      isArray = false,
-      start = false,
-      className,
-      render
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded);
-  var mark = isArray ? '[]' : '{}';
-  var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
-  var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
-  if (render) return render(_extends({
-    isArray,
-    className: cls,
-    style: {
-      color
-    },
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }, reset));
-  return /*#__PURE__*/_jsx(Label, _extends({
-    color: color,
-    className: cls
-  }, reset, {
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }));
-}
-export var Ellipsis = _ref => {
-  var {
-      style,
-      render
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
-  var styl = _extends({
-    cursor: 'pointer'
-  }, style);
-  var className = "w-rjv-ellipsis " + (props.className || '');
-  if (render) return render(_extends({
-    style: styl
-  }, props, {
-    className
-  }));
-  return /*#__PURE__*/_jsx("span", _extends({
-    className: className,
-    style: styl
-  }, props, {
-    children: "..."
-  }));
-};
-export var Semicolon = _ref2 => {
-  var {
-      children,
-      render,
-      color,
-      value,
-      className = 'w-rjv-object-key',
-      show,
-      highlightUpdates,
-      quotes
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-  var prevValue = usePrevious(value);
-  var highlightContainer = useRef(null);
-  var isHighlight = useMemo(() => {
-    if (!highlightUpdates || prevValue === undefined) return false;
-    // highlight if value type changed
-    if (typeof value !== typeof prevValue) {
-      return true;
-    }
-    if (typeof value === 'number') {
-      // notice: NaN !== NaN
-      if (isNaN(value) && isNaN(prevValue)) return false;
-      return value !== prevValue;
-    }
-    // highlight if isArray changed
-    if (Array.isArray(value) !== Array.isArray(prevValue)) {
-      return true;
-    }
-    // not highlight object/function
-    // deep compare they will be slow
-    if (typeof value === 'object' || typeof value === 'function') {
-      return false;
-    }
-
-    // highlight if not equal
-    if (value !== prevValue) {
-      return true;
-    }
-    return false;
-  }, [highlightUpdates, value]);
-  useEffect(() => {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
-      highlightContainer.current.animate([{
-        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
-      }, {
-        backgroundColor: ''
-      }], {
-        duration: 1000,
-        easing: 'ease-in'
-      });
-    }
-  }, [isHighlight, value]);
-  var content = show ? "" + quotes + children + quotes : children;
-  if (render) return render(_extends({
-    className
-  }, props, {
-    value,
-    style: {
-      color
-    },
-    children: content
-  }));
-  return /*#__PURE__*/_jsx(Label, _extends({
-    className: className,
-    color: color
-  }, props, {
-    ref: highlightContainer,
-    children: content
-  }));
-};
-export var CountInfo = _ref3 => {
+export var CountInfo = _ref => {
   var {
     children
-  } = _ref3;
+  } = _ref;
   return /*#__PURE__*/_jsx(Label, {
     style: {
       paddingLeft: 4,
@@ -162,6 +36,7 @@ export function RooNode(props) {
       displayObjectSize = true,
       enableClipboard = true,
       highlightUpdates = true,
+      objectSortKeys = false,
       indentWidth = 15,
       collapsed,
       level = 1,
@@ -170,9 +45,8 @@ export function RooNode(props) {
       onCopied,
       onExpand
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded4);
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
   var isArray = Array.isArray(value);
-  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
   var subkeyid = useId();
   var expands = useExpandsStatus();
   var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
@@ -210,6 +84,7 @@ export function RooNode(props) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    quotes,
     renderBraces: components.braces,
     renderValue: components.value
   };
@@ -222,17 +97,26 @@ export function RooNode(props) {
     className: "w-rjv-arrow"
   });
   var [showTools, setShowTools] = useState(false);
-  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
-    show: showTools,
-    text: value,
-    onCopied: onCopied,
-    render: components.copied
-  }) : undefined;
   var eventProps = {};
   if (enableClipboard) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
+  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
+
+  // object
+  var entries = isArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
+  if (objectSortKeys) {
+    entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
+      var [a] = _ref2;
+      var [b] = _ref3;
+      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
+    }) : entries.sort((_ref4, _ref5) => {
+      var [a] = _ref4;
+      var [b] = _ref5;
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+    });
+  }
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
     className: className + " w-rjv-inner"
   }, eventProps, {
@@ -246,10 +130,11 @@ export function RooNode(props) {
         children: [/*#__PURE__*/_jsx(Semicolon, {
           value: value,
           quotes: quotes,
+          "data-keys": keyid,
           render: components.objectKey,
-          color: typeof keyName === 'number' ? typeMap['number'].color : '',
-          show: typeof keyName === 'string',
-          children: keyName
+          keyName: keyName,
+          parentName: keyName,
+          color: typeof keyName === 'number' ? typeMap['number'].color : ''
         }), /*#__PURE__*/_jsx(Colon, {})]
       }), /*#__PURE__*/_jsx(Meta, {
         start: true,
@@ -262,23 +147,31 @@ export function RooNode(props) {
         render: components.braces
       }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
         children: [nameKeys.length, " items"]
-      }), tools]
+      }), /*#__PURE__*/_jsx(Tools, {
+        value: value,
+        enableClipboard: enableClipboard,
+        onCopied: onCopied,
+        components: components,
+        showTools: showTools
+      })]
     }), expand && /*#__PURE__*/_jsx(Line, {
       className: "w-rjv-content",
       style: {
-        borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
+        borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
-        var item = value[key];
+      children: entries.length > 0 && entries.map((_ref6, idx) => {
+        var [key, itemVal] = _ref6;
+        var item = itemVal;
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
           value: item,
+          "data-keys": keyid,
           quotes: quotes,
+          parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
           color: typeof key === 'number' ? typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
+          keyName: key
         });
         var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
         if (Array.isArray(item) && !isEmpty) {
@@ -287,8 +180,8 @@ export function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
-              keyid: keyid + subkeyid + label,
-              keyName: label
+              keyName: label,
+              keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
@@ -296,11 +189,11 @@ export function RooNode(props) {
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
-              keyid: keyid + subkeyid + key,
               value: item,
-              keyName: key
+              keyName: key,
+              keyid: keyid + subkeyid + key
             }, subNodeProps))
-          }, key + idx);
+          }, key + '' + idx);
         }
         if (typeof item === 'function') {
           return;