@uiw/react-json-view 2.0.0-alpha.40 → 2.0.0-alpha.42

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 (10) hide show
  1. package/README.md +55 -49
  2. package/cjs/index.d.ts +5 -0
  3. package/cjs/index.js +202 -2
  4. package/cjs/symbol/index.js +7 -0
  5. package/cjs/types/index.js +12 -3
  6. package/esm/index.d.ts +5 -0
  7. package/esm/index.js +11 -0
  8. package/esm/symbol/index.js +7 -0
  9. package/esm/types/index.js +12 -3
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -1,43 +1,46 @@
1
1
  <div markdown="1">
2
2
  <sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
3
3
  <br>
4
- <a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
5
- <a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
6
- <a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
7
- <a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
8
- <a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
9
- <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
10
- <a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
11
- <a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
12
- <a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
13
- <a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
14
- <a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
15
- <a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
16
- <a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
17
- <a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
18
- <a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
19
- <a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
20
- <a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
21
- <a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
22
- <a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
23
- <a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
24
- <a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
25
- <a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
26
- <a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
27
- <a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
28
- <a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
29
- <a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
30
- <a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
31
- <a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
32
- <a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
33
- <a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
4
+ <a target="_blank" href="https://apps.apple.com/app/6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" src="https://wangchujiang.com/appicon/scap.png"></a>
5
+ <a target="_blank" href="https://apps.apple.com/app/6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" src="https://wangchujiang.com/appicon/screen-test.png"></a>
6
+ <a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
7
+ <a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
8
+ <a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
9
+ <a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
10
+ <a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
11
+ <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
12
+ <a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
13
+ <a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
14
+ <a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
15
+ <a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
16
+ <a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
17
+ <a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
18
+ <a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
19
+ <a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
20
+ <a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
21
+ <a target="_blank" href="https://apps.apple.com/app/6737160756" title="Menuist for macOS"><img alt="Menuist" height="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
22
+ <a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
23
+ <a target="_blank" href="https://apps.apple.com/app/6670696072?platform=mac" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
24
+ <a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
25
+ <a target="_blank" href="https://apps.apple.com/app/6503953628?platform=mac" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
26
+ <a target="_blank" href="https://apps.apple.com/app/6471227008?platform=mac" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
27
+ <a target="_blank" href="https://apps.apple.com/app/6479819388?platform=mac" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
28
+ <a target="_blank" href="https://apps.apple.com/app/6479194014?platform=mac" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
29
+ <a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
30
+ <a target="_blank" href="https://apps.apple.com/app/6478511402?platform=mac" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
31
+ <a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
32
+ <a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
33
+ <a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
34
+ <a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
35
+ <a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
34
36
  </div>
35
37
  <hr>
36
38
 
37
39
  react-json-view
38
40
  ===
39
41
 
40
- [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
42
+ [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor)
43
+ [![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove)
41
44
  [![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
42
45
  [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
43
46
  [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view)
@@ -118,7 +121,7 @@ const example = {
118
121
 
119
122
  ## Theme
120
123
 
121
- By default, the `lightTheme` light theme is used, and a `darkTheme` dark theme configuration is built in
124
+ By default, the `lightTheme` light theme is used, and a `darkTheme` dark theme configuration is built in. The library provides multiple built-in themes including dark, light, nord, github themes, gruvbox, vscode, monokai, and basic themes.
122
125
 
123
126
  ```tsx mdx:preview
124
127
  import React from 'react';
@@ -162,7 +165,7 @@ export default function Demo() {
162
165
  }
163
166
  ```
164
167
 
165
- Example of custom `vscode` theme styles:
168
+ Example of custom `vscode` theme styles using CSS custom properties:
166
169
 
167
170
  ```tsx mdx:preview
168
171
  import React from 'react';
@@ -220,7 +223,7 @@ export default function Demo() {
220
223
 
221
224
  ## Online Editing Theme
222
225
 
223
- Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
226
+ Interactive theme customization example with real-time color picker. You can modify theme colors and see changes instantly. Check the full interactive editor in the [documentation website](https://uiwjs.github.io/react-json-view/)
224
227
 
225
228
  ```tsx mdx:preview:&title=Online Editing Theme
226
229
  import React, { useState, useEffect } from 'react';
@@ -348,9 +351,9 @@ export default function Demo() {
348
351
  }
349
352
  ```
350
353
 
351
- ## Render
354
+ ## Custom Rendering
352
355
 
353
- **`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`.
356
+ **`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`. This example shows custom rendering of string values as images and custom colon symbols.
354
357
 
355
358
  ```tsx mdx:preview
356
359
  import React from 'react';
@@ -389,7 +392,7 @@ export default function Demo() {
389
392
  }
390
393
  ```
391
394
 
392
- **Support for the URL(opens in a new tab) API.**
395
+ **URL Type Support** - Automatic recognition and display of URL objects with proper styling.
393
396
 
394
397
  ```tsx mdx:preview
395
398
  import React from 'react';
@@ -411,7 +414,7 @@ export default function Demo() {
411
414
  }
412
415
  ```
413
416
 
414
- Supports certain partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`, `<Row />`
417
+ **Component Customization** - Example showing custom copy functionality and URL rendering with clickable links. Supports partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`, `<Row />`
415
418
 
416
419
  ```tsx mdx:preview
417
420
  import React, { Fragment } from 'react';
@@ -464,7 +467,7 @@ export default function Demo() {
464
467
  }
465
468
  ```
466
469
 
467
- More in-depth customization ([#19](https://github.com/uiwjs/react-json-view/issues/19))
470
+ **Advanced Customization** - Deep customization example showing how to hide type indicators and quotes for a cleaner MongoDB-like object display ([#19](https://github.com/uiwjs/react-json-view/issues/19))
468
471
 
469
472
  ```tsx mdx:preview
470
473
  import React from 'react';
@@ -517,7 +520,7 @@ export default function Demo() {
517
520
  }
518
521
  ```
519
522
 
520
- Inspector
523
+ **Array Inspector Style** - Example showing how to create a table-like inspector view for arrays, similar to browser DevTools object inspection.
521
524
 
522
525
  ```tsx mdx:preview
523
526
  import React from 'react';
@@ -614,7 +617,7 @@ export default function Demo() {
614
617
  }
615
618
  ```
616
619
 
617
- Passing **as="tagName"** will automatically infer the type.
620
+ **Component Type Inference** - Passing **as="tagName"** will automatically infer the TypeScript type for better type safety.
618
621
 
619
622
  ```tsx
620
623
  <JsonView.CountInfo
@@ -628,7 +631,7 @@ Passing **as="tagName"** will automatically infer the type.
628
631
  />
629
632
  ```
630
633
 
631
- Add a click event on the data row
634
+ **Row Click Events** - Example showing how to add click event handlers to data rows for interactive functionality.
632
635
 
633
636
  ```tsx mdx:preview
634
637
  import React from 'react';
@@ -676,6 +679,8 @@ export default function Demo() {
676
679
 
677
680
  ## Highlight Updates
678
681
 
682
+ Demonstration of automatic highlighting when JSON values change. The timer value updates every second and gets highlighted to show the change.
683
+
679
684
  ```tsx mdx:preview
680
685
  import React, { useState, useEffect } from 'react';
681
686
  import JsonView from '@uiw/react-json-view';
@@ -716,7 +721,9 @@ export default function Demo() {
716
721
 
717
722
  This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
718
723
 
719
- ## Do not display array index
724
+ ## Hide Array Indices
725
+
726
+ Example showing how to hide array indices for a cleaner display by customizing the Colon and KeyName components.
720
727
 
721
728
  ```tsx mdx:preview
722
729
  import React, { Fragment } from 'react';
@@ -745,10 +752,9 @@ export default function Demo() {
745
752
  }
746
753
  ```
747
754
 
748
- ## Default Collapse/Expand
755
+ ## Control Collapse/Expand State
749
756
 
750
- Determines whether the node should be expanded on the first render. The default value of `collapsed` is `false`.
751
- If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
757
+ Controls the initial expand/collapse state of JSON nodes. Demonstrates both the `collapsed` prop and `shouldExpandNodeInitially` callback. The default value of `collapsed` is `false`. If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
752
758
 
753
759
  ```tsx mdx:preview
754
760
  import React, { useState } from 'react';
@@ -792,9 +798,9 @@ export default function Demo() {
792
798
  }
793
799
  ```
794
800
 
795
- ## Modify Icon Style
801
+ ## Custom Arrow Icons
796
802
 
797
- Use built-in default icons.
803
+ Example showing how to customize expand/collapse arrow icons using built-in icon components.
798
804
 
799
805
  ```tsx mdx:preview
800
806
  import React from 'react';
@@ -834,7 +840,7 @@ export default function Demo() {
834
840
  }
835
841
  ```
836
842
 
837
- Display of custom **svg** `icon` components
843
+ **Custom SVG Icons** - Example showing how to implement completely custom SVG icons for expand/collapse arrows with plus/minus symbols.
838
844
 
839
845
  ```tsx mdx:preview
840
846
  import React from 'react';
package/cjs/index.d.ts CHANGED
@@ -113,4 +113,9 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
113
113
  Row: typeof Row;
114
114
  };
115
115
  declare const JsonView: JsonViewComponent;
116
+ export { JsonView };
117
+ export type { JsonViewComponent };
118
+ export { Bigint, Date as JsonDate, False, Float, Int, Map as JsonMap, Nan, Null, Set as JsonSet, StringText as JsonString, True, Undefined, Url, };
119
+ export { BraceLeft, BraceRight, BracketsLeft, BracketsRight, Arrow, Colon, Quote, ValueQuote };
120
+ export { Copied, CountInfo, CountInfoExtra, Ellipsis, KeyName, Row };
116
121
  export default JsonView;
package/cjs/index.js CHANGED
@@ -4,7 +4,199 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- var _exportNames = {};
7
+ var _exportNames = {
8
+ JsonView: true,
9
+ BraceLeft: true,
10
+ BraceRight: true,
11
+ BracketsLeft: true,
12
+ BracketsRight: true,
13
+ Arrow: true,
14
+ Colon: true,
15
+ Quote: true,
16
+ ValueQuote: true,
17
+ Bigint: true,
18
+ JsonDate: true,
19
+ False: true,
20
+ Float: true,
21
+ Int: true,
22
+ JsonMap: true,
23
+ Nan: true,
24
+ Null: true,
25
+ JsonSet: true,
26
+ JsonString: true,
27
+ True: true,
28
+ Undefined: true,
29
+ Url: true,
30
+ Copied: true,
31
+ CountInfo: true,
32
+ CountInfoExtra: true,
33
+ Ellipsis: true,
34
+ KeyName: true,
35
+ Row: true
36
+ };
37
+ Object.defineProperty(exports, "Arrow", {
38
+ enumerable: true,
39
+ get: function get() {
40
+ return _Arrow.Arrow;
41
+ }
42
+ });
43
+ Object.defineProperty(exports, "Bigint", {
44
+ enumerable: true,
45
+ get: function get() {
46
+ return _Bigint.Bigint;
47
+ }
48
+ });
49
+ Object.defineProperty(exports, "BraceLeft", {
50
+ enumerable: true,
51
+ get: function get() {
52
+ return _BraceLeft.BraceLeft;
53
+ }
54
+ });
55
+ Object.defineProperty(exports, "BraceRight", {
56
+ enumerable: true,
57
+ get: function get() {
58
+ return _BraceRight.BraceRight;
59
+ }
60
+ });
61
+ Object.defineProperty(exports, "BracketsLeft", {
62
+ enumerable: true,
63
+ get: function get() {
64
+ return _BracketsLeft.BracketsLeft;
65
+ }
66
+ });
67
+ Object.defineProperty(exports, "BracketsRight", {
68
+ enumerable: true,
69
+ get: function get() {
70
+ return _BracketsRight.BracketsRight;
71
+ }
72
+ });
73
+ Object.defineProperty(exports, "Colon", {
74
+ enumerable: true,
75
+ get: function get() {
76
+ return _Colon.Colon;
77
+ }
78
+ });
79
+ Object.defineProperty(exports, "Copied", {
80
+ enumerable: true,
81
+ get: function get() {
82
+ return _Copied.Copied;
83
+ }
84
+ });
85
+ Object.defineProperty(exports, "CountInfo", {
86
+ enumerable: true,
87
+ get: function get() {
88
+ return _CountInfo.CountInfo;
89
+ }
90
+ });
91
+ Object.defineProperty(exports, "CountInfoExtra", {
92
+ enumerable: true,
93
+ get: function get() {
94
+ return _CountInfoExtra.CountInfoExtra;
95
+ }
96
+ });
97
+ Object.defineProperty(exports, "Ellipsis", {
98
+ enumerable: true,
99
+ get: function get() {
100
+ return _Ellipsis.Ellipsis;
101
+ }
102
+ });
103
+ Object.defineProperty(exports, "False", {
104
+ enumerable: true,
105
+ get: function get() {
106
+ return _False.False;
107
+ }
108
+ });
109
+ Object.defineProperty(exports, "Float", {
110
+ enumerable: true,
111
+ get: function get() {
112
+ return _Float.Float;
113
+ }
114
+ });
115
+ Object.defineProperty(exports, "Int", {
116
+ enumerable: true,
117
+ get: function get() {
118
+ return _Int.Int;
119
+ }
120
+ });
121
+ Object.defineProperty(exports, "JsonDate", {
122
+ enumerable: true,
123
+ get: function get() {
124
+ return _Date.Date;
125
+ }
126
+ });
127
+ Object.defineProperty(exports, "JsonMap", {
128
+ enumerable: true,
129
+ get: function get() {
130
+ return _Map.Map;
131
+ }
132
+ });
133
+ Object.defineProperty(exports, "JsonSet", {
134
+ enumerable: true,
135
+ get: function get() {
136
+ return _Set.Set;
137
+ }
138
+ });
139
+ Object.defineProperty(exports, "JsonString", {
140
+ enumerable: true,
141
+ get: function get() {
142
+ return _String.StringText;
143
+ }
144
+ });
145
+ exports.JsonView = void 0;
146
+ Object.defineProperty(exports, "KeyName", {
147
+ enumerable: true,
148
+ get: function get() {
149
+ return _KeyName.KeyName;
150
+ }
151
+ });
152
+ Object.defineProperty(exports, "Nan", {
153
+ enumerable: true,
154
+ get: function get() {
155
+ return _Nan.Nan;
156
+ }
157
+ });
158
+ Object.defineProperty(exports, "Null", {
159
+ enumerable: true,
160
+ get: function get() {
161
+ return _Null.Null;
162
+ }
163
+ });
164
+ Object.defineProperty(exports, "Quote", {
165
+ enumerable: true,
166
+ get: function get() {
167
+ return _Quote.Quote;
168
+ }
169
+ });
170
+ Object.defineProperty(exports, "Row", {
171
+ enumerable: true,
172
+ get: function get() {
173
+ return _Row.Row;
174
+ }
175
+ });
176
+ Object.defineProperty(exports, "True", {
177
+ enumerable: true,
178
+ get: function get() {
179
+ return _True.True;
180
+ }
181
+ });
182
+ Object.defineProperty(exports, "Undefined", {
183
+ enumerable: true,
184
+ get: function get() {
185
+ return _Undefined.Undefined;
186
+ }
187
+ });
188
+ Object.defineProperty(exports, "Url", {
189
+ enumerable: true,
190
+ get: function get() {
191
+ return _Url.Url;
192
+ }
193
+ });
194
+ Object.defineProperty(exports, "ValueQuote", {
195
+ enumerable: true,
196
+ get: function get() {
197
+ return _ValueQuote.ValueQuote;
198
+ }
199
+ });
8
200
  exports["default"] = void 0;
9
201
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
10
202
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -111,7 +303,7 @@ Object.keys(_symbol).forEach(function (key) {
111
303
  });
112
304
  });
113
305
  var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied", "beforeCopy"];
114
- var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
306
+ var JsonView = exports.JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
115
307
  var _props$className = props.className,
116
308
  className = _props$className === void 0 ? '' : _props$className,
117
309
  style = props.style,
@@ -203,4 +395,12 @@ JsonView.CountInfoExtra = _CountInfoExtra.CountInfoExtra;
203
395
  JsonView.KeyName = _KeyName.KeyName;
204
396
  JsonView.Row = _Row.Row;
205
397
  JsonView.displayName = 'JVR.JsonView';
398
+
399
+ // Named exports for better import flexibility
400
+
401
+ // Named exports for type components
402
+
403
+ // Named exports for symbol components
404
+
405
+ // Named exports for section components
206
406
  var _default = exports["default"] = JsonView;
package/cjs/symbol/index.js CHANGED
@@ -37,6 +37,13 @@ var Quote = exports.Quote = function Quote(props) {
37
37
  reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
38
38
  var Elm = as || 'span';
39
39
  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
40
+ // Trim the leading and trailing spaces in children,
41
+ // and set it to undefined if it's an empty string or contains only spaces.
42
+ // https://github.com/uiwjs/react-json-view/issues/86
43
+ if (typeof elmProps.children === 'string') {
44
+ var trimmed = elmProps.children.trim();
45
+ elmProps.children = trimmed || undefined;
46
+ }
40
47
  var result = {
41
48
  value: value,
42
49
  parentValue: parentValue,
package/cjs/types/index.js CHANGED
@@ -482,7 +482,10 @@ var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref1) {
482
482
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
483
483
  children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
484
484
  style: style
485
- }))), child]
485
+ }))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
486
+ className: "w-rjv-value",
487
+ children: "undefined"
488
+ }))]
486
489
  });
487
490
  };
488
491
  TypeUndefined.displayName = 'JVR.TypeUndefined';
@@ -520,7 +523,10 @@ var TypeNull = exports.TypeNull = function TypeNull(_ref10) {
520
523
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
521
524
  children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
522
525
  style: style
523
- }))), child]
526
+ }))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
527
+ className: "w-rjv-value",
528
+ children: "null"
529
+ }))]
524
530
  });
525
531
  };
526
532
  TypeNull.displayName = 'JVR.TypeNull';
@@ -558,7 +564,10 @@ var TypeNan = exports.TypeNan = function TypeNan(_ref11) {
558
564
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
559
565
  children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
560
566
  style: style
561
- }))), child]
567
+ }))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
568
+ className: "w-rjv-value",
569
+ children: "NaN"
570
+ }))]
562
571
  });
563
572
  };
564
573
  TypeNan.displayName = 'JVR.TypeNan';
package/esm/index.d.ts CHANGED
@@ -113,4 +113,9 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
113
113
  Row: typeof Row;
114
114
  };
115
115
  declare const JsonView: JsonViewComponent;
116
+ export { JsonView };
117
+ export type { JsonViewComponent };
118
+ export { Bigint, Date as JsonDate, False, Float, Int, Map as JsonMap, Nan, Null, Set as JsonSet, StringText as JsonString, True, Undefined, Url, };
119
+ export { BraceLeft, BraceRight, BracketsLeft, BracketsRight, Arrow, Colon, Quote, ValueQuote };
120
+ export { Copied, CountInfo, CountInfoExtra, Ellipsis, KeyName, Row };
116
121
  export default JsonView;
package/esm/index.js CHANGED
@@ -123,4 +123,15 @@ JsonView.CountInfoExtra = CountInfoExtra;
123
123
  JsonView.KeyName = KeyName;
124
124
  JsonView.Row = Row;
125
125
  JsonView.displayName = 'JVR.JsonView';
126
+
127
+ // Named exports for better import flexibility
128
+ export { JsonView };
129
+ // Named exports for type components
130
+ export { Bigint, Date as JsonDate, False, Float, Int, Map as JsonMap, Nan, Null, Set as JsonSet, StringText as JsonString, True, Undefined, Url };
131
+
132
+ // Named exports for symbol components
133
+ export { BraceLeft, BraceRight, BracketsLeft, BracketsRight, Arrow, Colon, Quote, ValueQuote };
134
+
135
+ // Named exports for section components
136
+ export { Copied, CountInfo, CountInfoExtra, Ellipsis, KeyName, Row };
126
137
  export default JsonView;
package/esm/symbol/index.js CHANGED
@@ -33,6 +33,13 @@ export var Quote = props => {
33
33
  reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
34
34
  var Elm = as || 'span';
35
35
  var elmProps = _extends({}, other, reset);
36
+ // Trim the leading and trailing spaces in children,
37
+ // and set it to undefined if it's an empty string or contains only spaces.
38
+ // https://github.com/uiwjs/react-json-view/issues/86
39
+ if (typeof elmProps.children === 'string') {
40
+ var trimmed = elmProps.children.trim();
41
+ elmProps.children = trimmed || undefined;
42
+ }
36
43
  var result = {
37
44
  value,
38
45
  parentValue,
package/esm/types/index.js CHANGED
@@ -511,7 +511,10 @@ export var TypeUndefined = _ref1 => {
511
511
  return /*#__PURE__*/_jsxs(Fragment, {
512
512
  children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
513
513
  style: style
514
- }))), child]
514
+ }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
515
+ className: "w-rjv-value",
516
+ children: "undefined"
517
+ }))]
515
518
  });
516
519
  };
517
520
  TypeUndefined.displayName = 'JVR.TypeUndefined';
@@ -553,7 +556,10 @@ export var TypeNull = _ref10 => {
553
556
  return /*#__PURE__*/_jsxs(Fragment, {
554
557
  children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
555
558
  style: style
556
- }))), child]
559
+ }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
560
+ className: "w-rjv-value",
561
+ children: "null"
562
+ }))]
557
563
  });
558
564
  };
559
565
  TypeNull.displayName = 'JVR.TypeNull';
@@ -595,7 +601,10 @@ export var TypeNan = _ref11 => {
595
601
  return /*#__PURE__*/_jsxs(Fragment, {
596
602
  children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
597
603
  style: style
598
- }))), child]
604
+ }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
605
+ className: "w-rjv-value",
606
+ children: "NaN"
607
+ }))]
599
608
  });
600
609
  };
601
610
  TypeNan.displayName = 'JVR.TypeNan';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-json-view",
3
- "version": "2.0.0-alpha.40",
3
+ "version": "2.0.0-alpha.42",
4
4
  "description": "JSON viewer for react.",
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -76,7 +76,7 @@
76
76
  },
77
77
  "repository": {
78
78
  "type": "git",
79
- "url": "https://github.com/uiwjs/react-json-view.git"
79
+ "url": "git+https://github.com/uiwjs/react-json-view.git"
80
80
  },
81
81
  "author": "Kenny Wang<wowohoo@qq.com>",
82
82
  "license": "MIT",