@redheadphone/react-json-grid - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

dist/index.es.js

@@ -30,3 +30,3 @@ import React, { useState, Fragment, useRef, useEffect } from 'react';
 
-var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
 var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
@@ -527,2 +527,3 @@ styleInject(css_248z);
     const highlight = (event) => {
+        event.stopPropagation();
         const target = event.target;
@@ -529,0 +530,0 @@ const currentTarget = event.currentTarget;

dist/index.js

@@ -32,3 +32,3 @@ 'use strict';
 
-var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
 var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
@@ -529,2 +529,3 @@ styleInject(css_248z);
     const highlight = (event) => {
+        event.stopPropagation();
         const target = event.target;
@@ -531,0 +532,0 @@ const currentTarget = event.currentTarget;

dist/index.umd.js

@@ -34,3 +34,3 @@ (function (global, factory) {
 
-  var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n  font-weight: bold;\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
+  var css_248z = ".json-grid-container {\n  --jg-bg-color: #222;\n  --jg-border-color: #b5b5b5;\n  --jg-cell-border-color: #474747;\n  --jg-key-color: #ffffff;\n  --jg-index-color: #949494;\n  --jg-number-color: #6c99bb;\n  --jg-boolean-color: #6c99bb;\n  --jg-string-color: #a5c261;\n  --jg-object-color: #ffffff;\n  --jg-table-header-bg-color: #444;\n  --jg-table-icon-color: #ffffff;\n  --jg-select-highlight-bg-color: #3b3b3b;\n  --jg-search-highlight-bg-color: #565a36;\n  display: inline-block;\n  margin: 0;\n  font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\n  line-height: 1.5;\n  text-align: left;\n  background-color: var(--jg-bg-color);\n}\n.json-grid-container,\n.json-grid-container .json-grid-table {\n  border-radius: 3px;\n  overflow: hidden;\n}\n.json-grid-container .json-grid-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: solid var(--jg-table-border-color) 1px;\n}\n.json-grid-container .json-grid-table .json-grid-table {\n  margin: 3px 0px;\n}\n.json-grid-container .json-grid-table .glyphicon {\n  position: relative;\n  top: 3px;\n  display: inline-block;\n  color: var(--jg-table-icon-color);\n}\n.json-grid-container .highlight {\n  background-color: var(--jg-select-highlight-bg-color);\n}\n.json-grid-container .obj {\n  border: 1px solid var(--jg-cell-border-color);\n  padding: 3px 10px;\n  padding-bottom: 4px;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.json-grid-container .obj,\n.json-grid-container .obj .name {\n  color: var(--jg-key-color);\n}\n.json-grid-container .obj .index {\n  color: var(--jg-index-color);\n}\n.json-grid-container .obj .number {\n  color: var(--jg-number-color);\n}\n.json-grid-container .obj .boolean {\n  color: var(--jg-boolean-color);\n}\n.json-grid-container .obj .string {\n  color: var(--jg-string-color);\n}\n.json-grid-container .obj .undefined {\n  color: var(--jg-object-color);\n}\n.json-grid-container .obj .object {\n  color: var(--jg-object-color);\n}\n.json-grid-container .order {\n  background-color: var(--jg-table-header-bg-color);\n  font-weight: normal !important;\n}\n.json-grid-container .key {\n  vertical-align: top;\n}\n.json-grid-container .title {\n  font-weight: bold;\n}\n.json-grid-container .plusminus {\n  font-size: 15px;\n  font-weight: bold;\n  cursor: pointer;\n  margin-right: 2px;\n}\n.json-grid-container .search-highlight {\n  background-color: var(--jg-search-highlight-bg-color);\n  padding: 1px 5px;\n  padding-top: 0;\n  border-radius: 2px;\n}";
   var styles = {"json-grid-container":"json-grid-container","json-grid-table":"json-grid-table","glyphicon":"glyphicon","highlight":"highlight","obj":"obj","name":"name","index":"index","number":"number","boolean":"boolean","string":"string","undefined":"undefined","object":"object","order":"order","key":"key","title":"title","plusminus":"plusminus","search-highlight":"search-highlight"};
@@ -531,2 +531,3 @@ styleInject(css_248z);
       const highlight = (event) => {
+          event.stopPropagation();
           const target = event.target;
@@ -533,0 +534,0 @@ const currentTarget = event.currentTarget;

package.json

 {
   "name": "@redheadphone/react-json-grid",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "React Component that converts JSON to nested grid tables.",
@@ -5,0 +5,0 @@ "author": "Huzaifa Khilawala",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244017

increased by0.09%

Lines of code

1938

increased by0.16%

No dependency changes