@uiw/react-json-view 2.0.0-alpha.2 → 2.0.0-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/README.md +146 -21
  2. package/basic.d.ts +3 -0
  3. package/cjs/Container.d.ts +2 -0
  4. package/cjs/Container.js +9 -4
  5. package/cjs/arrow/TriangleArrow.js +1 -1
  6. package/cjs/comps/Copied.d.ts +2 -3
  7. package/cjs/comps/Copied.js +29 -16
  8. package/cjs/comps/KeyValues.d.ts +2 -4
  9. package/cjs/comps/KeyValues.js +49 -24
  10. package/cjs/comps/NestedClose.js +3 -4
  11. package/cjs/comps/NestedOpen.d.ts +2 -3
  12. package/cjs/comps/NestedOpen.js +23 -17
  13. package/cjs/comps/Value.d.ts +1 -2
  14. package/cjs/comps/Value.js +16 -20
  15. package/cjs/editor/KeyName.d.ts +2 -0
  16. package/cjs/editor/KeyName.js +82 -0
  17. package/cjs/editor/index.d.ts +19 -0
  18. package/cjs/editor/index.js +44 -0
  19. package/cjs/editor/store.d.ts +28 -0
  20. package/cjs/editor/store.js +23 -0
  21. package/cjs/index.d.ts +5 -3
  22. package/cjs/index.js +11 -8
  23. package/cjs/section/Copied.d.ts +1 -1
  24. package/cjs/section/Copied.js +1 -2
  25. package/cjs/section/CountInfo.d.ts +10 -1
  26. package/cjs/section/CountInfo.js +42 -4
  27. package/cjs/section/CountInfoExtra.d.ts +10 -1
  28. package/cjs/section/CountInfoExtra.js +32 -4
  29. package/cjs/section/Ellipsis.d.ts +10 -0
  30. package/cjs/section/Ellipsis.js +30 -4
  31. package/cjs/section/KeyName.d.ts +8 -0
  32. package/cjs/section/KeyName.js +40 -4
  33. package/cjs/section/Row.d.ts +14 -0
  34. package/cjs/section/Row.js +51 -0
  35. package/cjs/store/Expands.js +2 -4
  36. package/cjs/store/Section.d.ts +12 -6
  37. package/cjs/store/Section.js +6 -4
  38. package/cjs/store/ShowTools.js +2 -4
  39. package/cjs/store/Symbols.d.ts +2 -2
  40. package/cjs/store/Symbols.js +2 -4
  41. package/cjs/store/Types.d.ts +28 -24
  42. package/cjs/store/Types.js +8 -8
  43. package/cjs/store.d.ts +7 -4
  44. package/cjs/store.js +5 -10
  45. package/cjs/symbol/Arrow.d.ts +1 -1
  46. package/cjs/symbol/Arrow.js +1 -2
  47. package/cjs/symbol/BraceLeft.d.ts +1 -1
  48. package/cjs/symbol/BraceLeft.js +1 -2
  49. package/cjs/symbol/BraceRight.d.ts +1 -1
  50. package/cjs/symbol/BraceRight.js +1 -2
  51. package/cjs/symbol/BracketsLeft.d.ts +1 -1
  52. package/cjs/symbol/BracketsLeft.js +1 -2
  53. package/cjs/symbol/BracketsRight.d.ts +1 -1
  54. package/cjs/symbol/BracketsRight.js +1 -2
  55. package/cjs/symbol/Colon.d.ts +1 -1
  56. package/cjs/symbol/Colon.js +1 -2
  57. package/cjs/symbol/Quote.d.ts +1 -1
  58. package/cjs/symbol/Quote.js +1 -2
  59. package/cjs/symbol/ValueQuote.d.ts +1 -1
  60. package/cjs/symbol/ValueQuote.js +1 -2
  61. package/{esm/comps/ReRender/Symbols.d.ts → cjs/symbol/index.d.ts} +4 -6
  62. package/cjs/{comps/ReRender/Symbols.js → symbol/index.js} +32 -33
  63. package/cjs/theme/basic.js +4 -3
  64. package/cjs/theme/dark.js +2 -3
  65. package/cjs/theme/github.dark.js +2 -3
  66. package/cjs/theme/github.light.js +2 -3
  67. package/cjs/theme/gruvbox.js +2 -3
  68. package/cjs/theme/light.js +2 -3
  69. package/cjs/theme/monokai.js +2 -3
  70. package/cjs/theme/nord.js +2 -3
  71. package/cjs/theme/vscode.js +2 -3
  72. package/cjs/types/Bigint.d.ts +1 -1
  73. package/cjs/types/Bigint.js +1 -2
  74. package/cjs/types/Date.d.ts +1 -1
  75. package/cjs/types/Date.js +1 -2
  76. package/cjs/types/False.d.ts +1 -1
  77. package/cjs/types/False.js +1 -2
  78. package/cjs/types/Float.d.ts +1 -1
  79. package/cjs/types/Float.js +1 -2
  80. package/cjs/types/Int.d.ts +1 -1
  81. package/cjs/types/Int.js +1 -2
  82. package/cjs/types/Map.d.ts +1 -1
  83. package/cjs/types/Map.js +1 -2
  84. package/cjs/types/Nan.d.ts +1 -1
  85. package/cjs/types/Nan.js +1 -2
  86. package/cjs/types/Null.d.ts +1 -1
  87. package/cjs/types/Null.js +1 -2
  88. package/cjs/types/Set.d.ts +1 -1
  89. package/cjs/types/Set.js +1 -2
  90. package/cjs/types/String.d.ts +1 -1
  91. package/cjs/types/String.js +1 -2
  92. package/cjs/types/True.d.ts +1 -1
  93. package/cjs/types/True.js +1 -2
  94. package/cjs/types/Undefined.d.ts +1 -1
  95. package/cjs/types/Undefined.js +1 -2
  96. package/cjs/types/Url.d.ts +1 -1
  97. package/cjs/types/Url.js +1 -2
  98. package/{esm/comps/ReRender/Types.d.ts → cjs/types/index.d.ts} +2 -2
  99. package/cjs/{comps/ReRender/Types.js → types/index.js} +92 -171
  100. package/cjs/utils/useHighlight.js +0 -1
  101. package/cjs/utils/useRender.d.ts +1 -1
  102. package/editor.d.ts +22 -20
  103. package/esm/Container.d.ts +2 -0
  104. package/esm/Container.js +10 -4
  105. package/esm/arrow/TriangleArrow.js +1 -1
  106. package/esm/comps/Copied.d.ts +2 -3
  107. package/esm/comps/Copied.js +27 -15
  108. package/esm/comps/KeyValues.d.ts +2 -4
  109. package/esm/comps/KeyValues.js +37 -15
  110. package/esm/comps/NestedClose.js +1 -1
  111. package/esm/comps/NestedOpen.d.ts +2 -3
  112. package/esm/comps/NestedOpen.js +18 -12
  113. package/esm/comps/Value.d.ts +1 -2
  114. package/esm/comps/Value.js +3 -5
  115. package/esm/editor/KeyName.d.ts +2 -0
  116. package/esm/editor/KeyName.js +77 -0
  117. package/esm/editor/index.d.ts +19 -0
  118. package/esm/editor/index.js +33 -0
  119. package/esm/editor/store.d.ts +28 -0
  120. package/esm/editor/store.js +13 -0
  121. package/esm/index.d.ts +5 -3
  122. package/esm/index.js +9 -6
  123. package/esm/section/Copied.d.ts +1 -1
  124. package/esm/section/CountInfo.d.ts +10 -1
  125. package/esm/section/CountInfo.js +43 -1
  126. package/esm/section/CountInfoExtra.d.ts +10 -1
  127. package/esm/section/CountInfoExtra.js +32 -1
  128. package/esm/section/Ellipsis.d.ts +10 -0
  129. package/esm/section/Ellipsis.js +31 -1
  130. package/esm/section/KeyName.d.ts +8 -0
  131. package/esm/section/KeyName.js +41 -1
  132. package/esm/section/Row.d.ts +14 -0
  133. package/esm/section/Row.js +47 -0
  134. package/esm/store/Section.d.ts +12 -6
  135. package/esm/store/Section.js +4 -0
  136. package/esm/store/Symbols.d.ts +2 -2
  137. package/esm/store/Types.d.ts +28 -24
  138. package/esm/store/Types.js +6 -4
  139. package/esm/store.d.ts +7 -4
  140. package/esm/symbol/Arrow.d.ts +1 -1
  141. package/esm/symbol/BraceLeft.d.ts +1 -1
  142. package/esm/symbol/BraceRight.d.ts +1 -1
  143. package/esm/symbol/BracketsLeft.d.ts +1 -1
  144. package/esm/symbol/BracketsRight.d.ts +1 -1
  145. package/esm/symbol/Colon.d.ts +1 -1
  146. package/esm/symbol/Quote.d.ts +1 -1
  147. package/esm/symbol/ValueQuote.d.ts +1 -1
  148. package/{cjs/comps/ReRender/Symbols.d.ts → esm/symbol/index.d.ts} +4 -6
  149. package/esm/{comps/ReRender/Symbols.js → symbol/index.js} +26 -24
  150. package/esm/theme/basic.js +2 -0
  151. package/esm/types/Bigint.d.ts +1 -1
  152. package/esm/types/Date.d.ts +1 -1
  153. package/esm/types/False.d.ts +1 -1
  154. package/esm/types/Float.d.ts +1 -1
  155. package/esm/types/Int.d.ts +1 -1
  156. package/esm/types/Map.d.ts +1 -1
  157. package/esm/types/Nan.d.ts +1 -1
  158. package/esm/types/Null.d.ts +1 -1
  159. package/esm/types/Set.d.ts +1 -1
  160. package/esm/types/String.d.ts +1 -1
  161. package/esm/types/True.d.ts +1 -1
  162. package/esm/types/Undefined.d.ts +1 -1
  163. package/esm/types/Url.d.ts +1 -1
  164. package/{cjs/comps/ReRender/Types.d.ts → esm/types/index.d.ts} +2 -2
  165. package/esm/{comps/ReRender/Types.js → types/index.js} +76 -148
  166. package/esm/utils/useHighlight.js +0 -1
  167. package/esm/utils/useRender.d.ts +1 -1
  168. package/githubDark.d.ts +3 -0
  169. package/githubLight.d.ts +3 -0
  170. package/gruvbox.d.ts +3 -0
  171. package/monokai.d.ts +3 -0
  172. package/nord.d.ts +3 -0
  173. package/package.json +11 -5
  174. package/vscode.d.ts +3 -0
  175. package/cjs/comps/CountInfo.d.ts +0 -19
  176. package/cjs/comps/CountInfo.js +0 -72
  177. package/cjs/comps/Ellipsis.d.ts +0 -10
  178. package/cjs/comps/Ellipsis.js +0 -35
  179. package/cjs/comps/Key.d.ts +0 -7
  180. package/cjs/comps/Key.js +0 -41
  181. package/esm/comps/CountInfo.d.ts +0 -19
  182. package/esm/comps/CountInfo.js +0 -70
  183. package/esm/comps/Ellipsis.d.ts +0 -10
  184. package/esm/comps/Ellipsis.js +0 -31
  185. package/esm/comps/Key.d.ts +0 -7
  186. package/esm/comps/Key.js +0 -37
package/esm/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
3
+ var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
4
4
  import { forwardRef } from 'react';
5
5
  import { Provider } from './store';
6
6
  import { Container } from './Container';
@@ -30,14 +30,14 @@ import { CountInfo } from './section/CountInfo';
30
30
  import { CountInfoExtra } from './section/CountInfoExtra';
31
31
  import { Ellipsis } from './section/Ellipsis';
32
32
  import { KeyName } from './section/KeyName';
33
- import { jsx as _jsx } from "react/jsx-runtime";
34
- import { jsxs as _jsxs } from "react/jsx-runtime";
33
+ import { Row } from './section/Row';
34
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
35
35
  export * from './store';
36
36
  export * from './store/Expands';
37
37
  export * from './store/ShowTools';
38
38
  export * from './store/Symbols';
39
39
  export * from './store/Types';
40
- export * from './comps/ReRender/Symbols';
40
+ export * from './symbol';
41
41
  var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
42
42
  var {
43
43
  className = '',
@@ -47,12 +47,13 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
47
47
  collapsed,
48
48
  indentWidth = 15,
49
49
  displayObjectSize = true,
50
- shortenTextAfterLength = 20,
50
+ shortenTextAfterLength = 30,
51
51
  highlightUpdates = true,
52
52
  enableClipboard = true,
53
53
  displayDataTypes = true,
54
54
  objectSortKeys = false,
55
- onExpand
55
+ onExpand,
56
+ onCopied
56
57
  } = props,
57
58
  elmProps = _objectWithoutPropertiesLoose(props, _excluded);
58
59
  var defaultStyle = _extends({
@@ -73,6 +74,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
73
74
  enableClipboard,
74
75
  shortenTextAfterLength,
75
76
  highlightUpdates,
77
+ onCopied,
76
78
  onExpand
77
79
  },
78
80
  initialTypes: {
@@ -113,5 +115,6 @@ JsonView.Copied = Copied;
113
115
  JsonView.CountInfo = CountInfo;
114
116
  JsonView.CountInfoExtra = CountInfoExtra;
115
117
  JsonView.KeyName = KeyName;
118
+ JsonView.Row = Row;
116
119
  JsonView.displayName = 'JVR.JsonView';
117
120
  export default JsonView;
@@ -1,6 +1,6 @@
1
1
  import { type TagType } from '../store/Types';
2
2
  import { type SectionElement } from '../store/Section';
3
3
  export declare const Copied: {
4
- (props: SectionElement<TagType>): null;
4
+ <K extends TagType = "svg">(props: SectionElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,15 @@
1
+ /// <reference types="react" />
1
2
  import { type TagType } from '../store/Types';
2
- import { type SectionElement } from '../store/Section';
3
+ import { type SectionElement, type SectionElementProps } from '../store/Section';
3
4
  export declare const CountInfo: {
4
5
  <K extends TagType>(props: SectionElement<K>): null;
5
6
  displayName: string;
6
7
  };
8
+ export interface CountInfoCompProps<T extends object> {
9
+ value?: T;
10
+ keyName: string | number;
11
+ }
12
+ export declare const CountInfoComp: {
13
+ <K extends TagType, T extends object>(props: SectionElementProps<K> & CountInfoCompProps<T> & React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
14
+ displayName: string;
15
+ };
@@ -1,5 +1,11 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["value", "keyName"],
4
+ _excluded2 = ["as", "render"];
1
5
  import { useSectionStore } from '../store/Section';
2
6
  import { useSectionRender } from '../utils/useRender';
7
+ import { useStore } from '../store';
8
+ import { jsx as _jsx } from "react/jsx-runtime";
3
9
  export var CountInfo = props => {
4
10
  var {
5
11
  CountInfo: Comp = {}
@@ -7,4 +13,40 @@ export var CountInfo = props => {
7
13
  useSectionRender(Comp, props, 'CountInfo');
8
14
  return null;
9
15
  };
10
- CountInfo.displayName = 'JVR.CountInfo';
16
+ CountInfo.displayName = 'JVR.CountInfo';
17
+ export var CountInfoComp = props => {
18
+ var {
19
+ value = {},
20
+ keyName
21
+ } = props,
22
+ other = _objectWithoutPropertiesLoose(props, _excluded);
23
+ var {
24
+ displayObjectSize
25
+ } = useStore();
26
+ var {
27
+ CountInfo: Comp = {}
28
+ } = useSectionStore();
29
+ if (!displayObjectSize) return null;
30
+ var {
31
+ as,
32
+ render
33
+ } = Comp,
34
+ reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
35
+ var Elm = as || 'span';
36
+ reset.style = _extends({}, reset.style, props.style);
37
+ var len = Object.keys(value).length;
38
+ if (!reset.children) {
39
+ reset.children = len + " item" + (len === 1 ? '' : 's');
40
+ }
41
+ var elmProps = _extends({}, reset, other);
42
+ var isRender = render && typeof render === 'function';
43
+ var child = isRender && render(_extends({}, elmProps, {
44
+ 'data-length': len
45
+ }), {
46
+ value,
47
+ keyName
48
+ });
49
+ if (child) return child;
50
+ return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
51
+ };
52
+ CountInfoComp.displayName = 'JVR.CountInfoComp';
@@ -1,6 +1,15 @@
1
+ /// <reference types="react" />
1
2
  import { type TagType } from '../store/Types';
2
- import { type SectionElement } from '../store/Section';
3
+ import { type SectionElement, type SectionElementProps } from '../store/Section';
3
4
  export declare const CountInfoExtra: {
4
5
  <K extends TagType>(props: SectionElement<K>): null;
5
6
  displayName: string;
6
7
  };
8
+ export interface CountInfoExtraCompsProps<T extends object> {
9
+ value?: T;
10
+ keyName: string | number;
11
+ }
12
+ export declare const CountInfoExtraComps: {
13
+ <T extends object, K extends TagType>(props: SectionElementProps<K> & CountInfoExtraCompsProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
14
+ displayName: string;
15
+ };
@@ -1,5 +1,10 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["value", "keyName"],
4
+ _excluded2 = ["as", "render"];
1
5
  import { useSectionStore } from '../store/Section';
2
6
  import { useSectionRender } from '../utils/useRender';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
3
8
  export var CountInfoExtra = props => {
4
9
  var {
5
10
  CountInfoExtra: Comp = {}
@@ -7,4 +12,30 @@ export var CountInfoExtra = props => {
7
12
  useSectionRender(Comp, props, 'CountInfoExtra');
8
13
  return null;
9
14
  };
10
- CountInfoExtra.displayName = 'JVR.CountInfoExtra';
15
+ CountInfoExtra.displayName = 'JVR.CountInfoExtra';
16
+ export var CountInfoExtraComps = props => {
17
+ var {
18
+ value = {},
19
+ keyName
20
+ } = props,
21
+ other = _objectWithoutPropertiesLoose(props, _excluded);
22
+ var {
23
+ CountInfoExtra: Comp = {}
24
+ } = useSectionStore();
25
+ var {
26
+ as,
27
+ render
28
+ } = Comp,
29
+ reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
30
+ if (!render && !reset.children) return null;
31
+ var Elm = as || 'span';
32
+ var isRender = render && typeof render === 'function';
33
+ var elmProps = _extends({}, reset, other);
34
+ var child = isRender && render(elmProps, {
35
+ value,
36
+ keyName
37
+ });
38
+ if (child) return child;
39
+ return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
40
+ };
41
+ CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';
@@ -1,6 +1,16 @@
1
+ /// <reference types="react" />
1
2
  import { type TagType } from '../store/Types';
2
3
  import { type SectionElement } from '../store/Section';
3
4
  export declare const Ellipsis: {
4
5
  <K extends TagType>(props: SectionElement<K>): null;
5
6
  displayName: string;
6
7
  };
8
+ export interface EllipsisCompProps<T extends object> {
9
+ value?: T;
10
+ keyName: string | number;
11
+ isExpanded: boolean;
12
+ }
13
+ export declare const EllipsisComp: {
14
+ <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
15
+ displayName: string;
16
+ };
@@ -1,5 +1,9 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["as", "render"];
1
4
  import { useSectionStore } from '../store/Section';
2
5
  import { useSectionRender } from '../utils/useRender';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
3
7
  export var Ellipsis = props => {
4
8
  var {
5
9
  Ellipsis: Comp = {}
@@ -7,4 +11,30 @@ export var Ellipsis = props => {
7
11
  useSectionRender(Comp, props, 'Ellipsis');
8
12
  return null;
9
13
  };
10
- Ellipsis.displayName = 'JVR.Ellipsis';
14
+ Ellipsis.displayName = 'JVR.Ellipsis';
15
+ export var EllipsisComp = _ref => {
16
+ var {
17
+ isExpanded,
18
+ value,
19
+ keyName
20
+ } = _ref;
21
+ var {
22
+ Ellipsis: Comp = {}
23
+ } = useSectionStore();
24
+ var {
25
+ as,
26
+ render
27
+ } = Comp,
28
+ reset = _objectWithoutPropertiesLoose(Comp, _excluded);
29
+ var Elm = as || 'span';
30
+ var child = render && typeof render === 'function' && render(_extends({}, reset, {
31
+ 'data-expanded': isExpanded
32
+ }), {
33
+ value,
34
+ keyName
35
+ });
36
+ if (child) return child;
37
+ if (!isExpanded) return null;
38
+ return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
39
+ };
40
+ EllipsisComp.displayName = 'JVR.EllipsisComp';
@@ -1,6 +1,14 @@
1
+ import { type PropsWithChildren } from 'react';
1
2
  import { type TagType } from '../store/Types';
2
3
  import { type SectionElement } from '../store/Section';
4
+ import { type SectionElementResult } from '../store/Section';
3
5
  export declare const KeyName: {
4
6
  <K extends TagType>(props: SectionElement<K>): null;
5
7
  displayName: string;
6
8
  };
9
+ export interface KeyNameCompProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement>, SectionElementResult<T> {
10
+ }
11
+ export declare const KeyNameComp: {
12
+ <T extends object>(props: PropsWithChildren<KeyNameCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
13
+ displayName: string;
14
+ };
@@ -1,5 +1,9 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["as", "render"];
1
4
  import { useSectionStore } from '../store/Section';
2
5
  import { useSectionRender } from '../utils/useRender';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
3
7
  export var KeyName = props => {
4
8
  var {
5
9
  KeyName: Comp = {}
@@ -7,4 +11,40 @@ export var KeyName = props => {
7
11
  useSectionRender(Comp, props, 'KeyName');
8
12
  return null;
9
13
  };
10
- KeyName.displayName = 'JVR.KeyName';
14
+ KeyName.displayName = 'JVR.KeyName';
15
+ export var KeyNameComp = props => {
16
+ var {
17
+ children,
18
+ value,
19
+ parentValue,
20
+ keyName,
21
+ keys
22
+ } = props;
23
+ var isNumber = typeof children === 'number';
24
+ var style = {
25
+ color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
26
+ };
27
+ var {
28
+ KeyName: Comp = {}
29
+ } = useSectionStore();
30
+ var {
31
+ as,
32
+ render
33
+ } = Comp,
34
+ reset = _objectWithoutPropertiesLoose(Comp, _excluded);
35
+ reset.style = _extends({}, reset.style, style);
36
+ var Elm = as || 'span';
37
+ var child = render && typeof render === 'function' && render(_extends({}, reset, {
38
+ children
39
+ }), {
40
+ value,
41
+ parentValue,
42
+ keyName,
43
+ keys
44
+ });
45
+ if (child) return child;
46
+ return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
47
+ children: children
48
+ }));
49
+ };
50
+ KeyNameComp.displayName = 'JVR.KeyNameComp';
@@ -0,0 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { type TagType } from '../store/Types';
3
+ import { type SectionElement } from '../store/Section';
4
+ import { type SectionElementResult } from '../store/Section';
5
+ export declare const Row: {
6
+ <K extends TagType>(props: SectionElement<K>): null;
7
+ displayName: string;
8
+ };
9
+ export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement>, SectionElementResult<T> {
10
+ }
11
+ export declare const RowComp: {
12
+ <T extends object>(props: React.PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
13
+ displayName: string;
14
+ };
@@ -0,0 +1,47 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
4
+ _excluded2 = ["as", "render", "children"];
5
+ import { useSectionStore } from '../store/Section';
6
+ import { useSectionRender } from '../utils/useRender';
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ export var Row = props => {
9
+ var {
10
+ Row: Comp = {}
11
+ } = useSectionStore();
12
+ useSectionRender(Comp, props, 'Row');
13
+ return null;
14
+ };
15
+ Row.displayName = 'JVR.Row';
16
+ export var RowComp = props => {
17
+ var {
18
+ children,
19
+ value,
20
+ parentValue,
21
+ keyName,
22
+ keys
23
+ } = props,
24
+ other = _objectWithoutPropertiesLoose(props, _excluded);
25
+ var {
26
+ Row: Comp = {}
27
+ } = useSectionStore();
28
+ var {
29
+ as,
30
+ render
31
+ } = Comp,
32
+ reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
33
+ var Elm = as || 'div';
34
+ var child = render && typeof render === 'function' && render(_extends({}, other, reset, {
35
+ children
36
+ }), {
37
+ value,
38
+ keyName,
39
+ parentValue,
40
+ keys
41
+ });
42
+ if (child) return child;
43
+ return /*#__PURE__*/_jsx(Elm, _extends({}, other, reset, {
44
+ children: children
45
+ }));
46
+ };
47
+ RowComp.displayName = 'JVR.RowComp';
@@ -1,18 +1,23 @@
1
1
  import React, { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
2
2
  import { type TagType } from './Types';
3
- export type SectionElementProps<T extends TagType> = {
3
+ export interface SectionElementResult<T extends object, K = string | number> {
4
+ value?: T;
5
+ parentValue?: T;
6
+ keyName?: K;
7
+ /** Index of the parent `keyName` */
8
+ keys?: K[];
9
+ }
10
+ export type SectionElementProps<T extends TagType = 'span'> = {
4
11
  as?: T;
5
- render?: (props: SectionElement<T>, result: {
6
- value: unknown;
7
- keyName: string | number;
8
- }) => React.ReactNode;
12
+ render?: (props: SectionElement<T>, result: SectionElementResult<object>) => React.ReactNode;
9
13
  };
10
- export type SectionElement<T extends TagType> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
14
+ export type SectionElement<T extends TagType = 'span'> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
11
15
  type InitialState<T extends TagType> = {
12
16
  Copied?: SectionElement<T>;
13
17
  CountInfo?: SectionElement<T>;
14
18
  CountInfoExtra?: SectionElement<T>;
15
19
  Ellipsis?: SectionElement<T>;
20
+ Row?: SectionElement<T>;
16
21
  KeyName?: SectionElement<T>;
17
22
  };
18
23
  type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -22,6 +27,7 @@ export declare function useSection(): [{
22
27
  CountInfo?: SectionElement<TagType> | undefined;
23
28
  CountInfoExtra?: SectionElement<TagType> | undefined;
24
29
  Ellipsis?: SectionElement<TagType> | undefined;
30
+ Row?: SectionElement<TagType> | undefined;
25
31
  KeyName?: SectionElement<TagType> | undefined;
26
32
  }, React.Dispatch<InitialState<TagType>>];
27
33
  export declare function useSectionDispatch(): Dispatch;
@@ -38,6 +38,10 @@ var initialState = {
38
38
  className: 'w-rjv-ellipsis',
39
39
  children: '...'
40
40
  },
41
+ Row: {
42
+ as: 'div',
43
+ className: 'w-rjv-line'
44
+ },
41
45
  KeyName: {
42
46
  as: 'span',
43
47
  className: 'w-rjv-object-key'
@@ -1,11 +1,11 @@
1
1
  import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
2
2
  import { type TagType } from './Types';
3
- type SymbolsElementProps<T extends TagType> = {
3
+ type SymbolsElementProps<T extends TagType = 'span'> = {
4
4
  as?: T;
5
5
  render?: (props: SymbolsElement<T>) => React.ReactNode;
6
6
  'data-type'?: string;
7
7
  };
8
- export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
8
+ export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
9
9
  type InitialState<T extends ElementType = 'span'> = {
10
10
  Arrow?: SymbolsElement<T>;
11
11
  Colon?: SymbolsElement<T>;
@@ -1,32 +1,33 @@
1
- import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
1
+ import { PropsWithChildren, ComponentPropsWithoutRef } from 'react';
2
2
  export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
3
- type TypesElementProps<T extends TagType> = {
3
+ type TypesElementProps<T extends TagType = 'span'> = {
4
4
  as?: T;
5
5
  render?: (props: TypesElement<T>, result: {
6
6
  type: 'type' | 'value';
7
7
  value?: unknown;
8
+ keyName: string | number;
8
9
  }) => React.ReactNode;
9
10
  'data-type'?: string;
10
11
  };
11
12
  export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
12
- export type InitialTypesState = {
13
+ export type InitialTypesState<T extends TagType = 'span'> = {
13
14
  displayDataTypes?: boolean;
14
- Url?: TypesElement<TagType>;
15
- Str?: TypesElement<TagType>;
16
- Undefined?: TypesElement<TagType>;
17
- Null?: TypesElement<TagType>;
18
- True?: TypesElement<TagType>;
19
- False?: TypesElement<TagType>;
20
- Date?: TypesElement<TagType>;
21
- Float?: TypesElement<TagType>;
22
- Set?: TypesElement<TagType>;
23
- Int?: TypesElement<TagType>;
24
- Map?: TypesElement<TagType>;
25
- Nan?: TypesElement<TagType>;
26
- Bigint?: TypesElement<TagType>;
15
+ Url?: TypesElement<T>;
16
+ Str?: TypesElement<T>;
17
+ Undefined?: TypesElement<T>;
18
+ Null?: TypesElement<T>;
19
+ True?: TypesElement<T>;
20
+ False?: TypesElement<T>;
21
+ Date?: TypesElement<T>;
22
+ Float?: TypesElement<T>;
23
+ Set?: TypesElement<T>;
24
+ Int?: TypesElement<T>;
25
+ Map?: TypesElement<T>;
26
+ Nan?: TypesElement<T>;
27
+ Bigint?: TypesElement<T>;
27
28
  };
28
- type Dispatch = React.Dispatch<InitialTypesState>;
29
- export declare const useTypesStore: () => InitialTypesState;
29
+ type Dispatch<T extends TagType> = React.Dispatch<InitialTypesState<T>>;
30
+ export declare const useTypesStore: () => InitialTypesState<TagType>;
30
31
  export declare function useTypes(): [{
31
32
  displayDataTypes?: boolean | undefined;
32
33
  Url?: TypesElement<TagType> | undefined;
@@ -42,11 +43,14 @@ export declare function useTypes(): [{
42
43
  Map?: TypesElement<TagType> | undefined;
43
44
  Nan?: TypesElement<TagType> | undefined;
44
45
  Bigint?: TypesElement<TagType> | undefined;
45
- }, import("react").Dispatch<InitialTypesState>];
46
- export declare function useTypesDispatch(): Dispatch;
47
- interface TypesProps {
48
- initial: InitialTypesState;
49
- dispatch: Dispatch;
46
+ }, import("react").Dispatch<InitialTypesState<TagType>>];
47
+ export declare function useTypesDispatch(): Dispatch<TagType>;
48
+ interface TypesProps<T extends TagType> {
49
+ initial: InitialTypesState<T>;
50
+ dispatch: Dispatch<TagType>;
51
+ }
52
+ export declare function Types<T extends TagType>({ initial, dispatch, children }: PropsWithChildren<TypesProps<T>>): import("react/jsx-runtime").JSX.Element;
53
+ export declare namespace Types {
54
+ var displayName: string;
50
55
  }
51
- export declare const Types: FC<PropsWithChildren<TypesProps>>;
52
56
  export {};
@@ -40,7 +40,8 @@ var initialState = {
40
40
  },
41
41
  Map: {
42
42
  style: {
43
- color: 'var(--w-rjv-type-map-color, #268bd2)'
43
+ color: 'var(--w-rjv-type-map-color, #268bd2)',
44
+ marginRight: 3
44
45
  },
45
46
  as: 'span',
46
47
  'data-type': 'map',
@@ -76,7 +77,8 @@ var initialState = {
76
77
  },
77
78
  Set: {
78
79
  style: {
79
- color: 'var(--w-rjv-type-set-color, #268bd2)'
80
+ color: 'var(--w-rjv-type-set-color, #268bd2)',
81
+ marginRight: 3
80
82
  },
81
83
  as: 'span',
82
84
  'data-type': 'set',
@@ -133,7 +135,7 @@ export function useTypes() {
133
135
  export function useTypesDispatch() {
134
136
  return useContext(DispatchTypes);
135
137
  }
136
- export var Types = _ref => {
138
+ export function Types(_ref) {
137
139
  var {
138
140
  initial,
139
141
  dispatch,
@@ -146,5 +148,5 @@ export var Types = _ref => {
146
148
  children: children
147
149
  })
148
150
  });
149
- };
151
+ }
150
152
  Types.displayName = 'JVR.Types';
package/esm/store.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { PropsWithChildren } from 'react';
2
2
  import { JsonViewProps } from './';
3
- import { type InitialTypesState } from './store/Types';
3
+ import { type InitialTypesState, type TagType } from './store/Types';
4
4
  export type BlockTagType = keyof JSX.IntrinsicElements;
5
5
  export interface InitialState<T extends object> {
6
6
  value?: object;
@@ -20,10 +20,13 @@ export declare const Context: React.Context<InitialState<object>>;
20
20
  export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
21
21
  export declare const useStore: () => InitialState<object>;
22
22
  export declare const useDispatchStore: () => Dispatch;
23
- export interface ProviderProps {
23
+ export interface ProviderProps<T extends TagType> {
24
24
  initialState?: InitialState<object>;
25
- initialTypes?: InitialTypesState;
25
+ initialTypes?: InitialTypesState<T>;
26
26
  }
27
- export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
27
+ export declare const Provider: {
28
+ <T extends TagType>({ children, initialState: init, initialTypes, }: PropsWithChildren<ProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
29
+ displayName: string;
30
+ };
28
31
  export declare function useDispatch(): Dispatch;
29
32
  export {};
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const Arrow: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const BraceLeft: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const BraceRight: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const BracketsLeft: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const BracketsRight: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const Colon: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };
@@ -1,6 +1,6 @@
1
1
  import { type SymbolsElement } from '../store/Symbols';
2
2
  import { type TagType } from '../store/Types';
3
3
  export declare const Quote: {
4
- (props: SymbolsElement<TagType>): null;
4
+ <K extends TagType = "span">(props: SymbolsElement<K>): null;
5
5
  displayName: string;
6
6
  };