react-json-view-lite - npm Package Compare versions

Comparing version 0.9.8 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+## 1.0.0
+
+### Breaking changes
+
+1. Property `shouldInitiallyExpand` has different name `shouldExpandNode` in order to emphasize that it will be called every time properties change.
+2. If you use custom styles:
+   - `pointer` and `expander` are no longer used
+   - component uses `collapseIcon`, `expandIcon`, `collapsedContent` styles in order to customize expand/collapse icon and collpased content placeholder which were previously hardcode to the `▸`, `▾` and `...`.
+     Default style values use `::after` pseudo-classes to set the content.
+
 ## 0.9.8
@@ -2,0 +12,0 @@

dist/DataRenderer.d.ts

@@ -0,5 +1,5 @@
+import * as React from 'react';
 export interface StyleProps {
     container: string;
     basicChildStyle: string;
-    expander: string;
     label: string;
@@ -13,3 +13,5 @@ nullValue: string;
     punctuation: string;
-    pointer: string;
+    expandIcon: string;
+    collapseIcon: string;
+    collapsedContent: string;
 }
@@ -22,3 +24,3 @@ export interface JsonRenderProps<T> {
     style: StyleProps;
-    shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
+    shouldExpandNode: (level: number, value: any, field?: string) => boolean;
 }
@@ -34,4 +36,4 @@ export interface ExpandableRenderProps {
     style: StyleProps;
-    shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
+    shouldExpandNode: (level: number, value: any, field?: string) => boolean;
 }
-export default function DataRender(props: JsonRenderProps<any>): JSX.Element;
+export default function DataRender(props: JsonRenderProps<any>): React.JSX.Element;

dist/DataRenderer.test.d.ts

@@ -1,1 +0,1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

dist/index.d.ts

@@ -0,1 +1,2 @@
+import * as React from 'react';
 import { StyleProps } from './DataRenderer';
@@ -5,3 +6,3 @@ export interface Props {
     style?: StyleProps;
-    shouldInitiallyExpand?: (level: number, value: any, field?: string) => boolean;
+    shouldExpandNode?: (level: number, value: any, field?: string) => boolean;
 }
@@ -12,2 +13,2 @@ export declare const defaultStyles: StyleProps;
 export declare const collapseAllNested: (level: number) => boolean;
-export declare const JsonView: ({ data, style, shouldInitiallyExpand }: Props) => JSX.Element;
+export declare const JsonView: ({ data, style, shouldExpandNode }: Props) => React.JSX.Element;

dist/index.js

 var React = require('react');
 
-var isBoolean = function isBoolean(data) {
+const isBoolean = data => {
   return typeof data === 'boolean' || data instanceof Boolean;
 };
-var isNumber = function isNumber(data) {
+const isNumber = data => {
   return typeof data === 'number' || data instanceof Number;
 };
-var isBigInt = function isBigInt(data) {
+const isBigInt = data => {
   return typeof data === 'bigint' || data instanceof BigInt;
 };
-var isString = function isString(data) {
+const isString = data => {
   return typeof data === 'string' || data instanceof String;
 };
-var isArray = function isArray(data) {
+const isArray = data => {
   return Array.isArray(data);
 };
-var isObject = function isObject(data) {
+const isObject = data => {
   return data instanceof Object && data !== null;
@@ -23,53 +23,32 @@ };
 function useBool(initialValueCreator) {
-  var _useState = React.useState(initialValueCreator()),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var tooggle = function tooggle() {
-    return setValue(function (currentValue) {
-      return !currentValue;
-    });
-  };
-
+  const [value, setValue] = React.useState(initialValueCreator());
+  const tooggle = () => setValue(currentValue => !currentValue);
   return [value, tooggle, setValue];
 }
 
-var expandedIcon = "\u25BE";
-var collapsedIcon = "\u25B8";
-
-function combineStyles(style1, style2) {
-  return (style1 || '') + " " + (style2 || '');
-}
-
-function renderExpandableObject(_ref) {
-  var field = _ref.field,
-      value = _ref.value,
-      data = _ref.data,
-      lastElement = _ref.lastElement,
-      openBracket = _ref.openBracket,
-      closeBracket = _ref.closeBracket,
-      level = _ref.level,
-      style = _ref.style,
-      shouldInitiallyExpand = _ref.shouldInitiallyExpand;
-  var shouldInitiallyExpandCalledRef = React.useRef(false);
-
-  var _useBool = useBool(function () {
-    return shouldInitiallyExpand(level, value, field);
-  }),
-      expanded = _useBool[0],
-      toggleExpanded = _useBool[1],
-      setExpanded = _useBool[2];
-
-  React.useEffect(function () {
-    if (!shouldInitiallyExpandCalledRef.current) {
-      shouldInitiallyExpandCalledRef.current = true;
+function ExpandableObject(_ref) {
+  let {
+    field,
+    value,
+    data,
+    lastElement,
+    openBracket,
+    closeBracket,
+    level,
+    style,
+    shouldExpandNode
+  } = _ref;
+  const shouldExpandNodeCalledRef = React.useRef(false);
+  const [expanded, toggleExpanded, setExpanded] = useBool(() => shouldExpandNode(level, value, field));
+  React.useEffect(() => {
+    if (!shouldExpandNodeCalledRef.current) {
+      shouldExpandNodeCalledRef.current = true;
     } else {
-      setExpanded(shouldInitiallyExpand(level, value, field));
+      setExpanded(shouldExpandNode(level, value, field));
     }
-  }, [shouldInitiallyExpand]);
-  var expandIcon = expanded ? expandedIcon : collapsedIcon;
-  var childLevel = level + 1;
-  var lastIndex = data.length - 1;
-
-  var onKeyDown = function onKeyDown(e) {
+  }, [shouldExpandNode]);
+  const expanderIconStyle = expanded ? style.collapseIcon : style.expandIcon;
+  const childLevel = level + 1;
+  const lastIndex = data.length - 1;
+  const onKeyDown = e => {
     if (e.key === ' ') {
@@ -79,8 +58,7 @@ toggleExpanded();
   };
-
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: style.basicChildStyle,
     role: 'list'
-  }, React.createElement("span", {
-    className: combineStyles(style.expander, style.pointer),
+  }, /*#__PURE__*/React.createElement("span", {
+    className: expanderIconStyle,
     role: 'button',
@@ -90,18 +68,16 @@ onClick: toggleExpanded,
     tabIndex: 0
-  }, expandIcon), field && React.createElement("span", {
+  }), field && /*#__PURE__*/React.createElement("span", {
     className: style.label
-  }, field, ":"), React.createElement("span", {
+  }, field, ":"), /*#__PURE__*/React.createElement("span", {
     className: style.punctuation
-  }, openBracket), expanded ? React.createElement("div", null, data.map(function (dataElement, index) {
-    return React.createElement(DataRender, {
-      key: dataElement[0] || index,
-      field: dataElement[0],
-      value: dataElement[1],
-      style: style,
-      lastElement: index === lastIndex,
-      level: childLevel,
-      shouldInitiallyExpand: shouldInitiallyExpand
-    });
-  })) : React.createElement("span", {
-    className: combineStyles(style.punctuation, style.pointer),
+  }, openBracket), expanded ? /*#__PURE__*/React.createElement("div", null, data.map((dataElement, index) => /*#__PURE__*/React.createElement(DataRender, {
+    key: dataElement[0] || index,
+    field: dataElement[0],
+    value: dataElement[1],
+    style: style,
+    lastElement: index === lastIndex,
+    level: childLevel,
+    shouldExpandNode: shouldExpandNode
+  }))) : /*#__PURE__*/React.createElement("span", {
+    className: style.collapsedContent,
     role: 'button',
@@ -111,61 +87,59 @@ tabIndex: 0,
     onKeyDown: onKeyDown
-  }, "..."), React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: style.punctuation
-  }, closeBracket), !lastElement && React.createElement("span", {
+  }, closeBracket), !lastElement && /*#__PURE__*/React.createElement("span", {
     className: style.punctuation
   }, ","));
 }
-
 function JsonObject(_ref2) {
-  var field = _ref2.field,
-      value = _ref2.value,
-      style = _ref2.style,
-      lastElement = _ref2.lastElement,
-      shouldInitiallyExpand = _ref2.shouldInitiallyExpand,
-      level = _ref2.level;
-  return renderExpandableObject({
-    field: field,
-    value: value,
+  let {
+    field,
+    value,
+    style,
+    lastElement,
+    shouldExpandNode,
+    level
+  } = _ref2;
+  return ExpandableObject({
+    field,
+    value,
     lastElement: lastElement || false,
-    level: level,
+    level,
     openBracket: '{',
     closeBracket: '}',
-    style: style,
-    shouldInitiallyExpand: shouldInitiallyExpand,
-    data: Object.keys(value).map(function (key) {
-      return [key, value[key]];
-    })
+    style,
+    shouldExpandNode,
+    data: Object.keys(value).map(key => [key, value[key]])
   });
 }
-
 function JsonArray(_ref3) {
-  var field = _ref3.field,
-      value = _ref3.value,
-      style = _ref3.style,
-      lastElement = _ref3.lastElement,
-      level = _ref3.level,
-      shouldInitiallyExpand = _ref3.shouldInitiallyExpand;
-  return renderExpandableObject({
-    field: field,
-    value: value,
+  let {
+    field,
+    value,
+    style,
+    lastElement,
+    level,
+    shouldExpandNode
+  } = _ref3;
+  return ExpandableObject({
+    field,
+    value,
     lastElement: lastElement || false,
-    level: level,
+    level,
     openBracket: '[',
     closeBracket: ']',
-    style: style,
-    shouldInitiallyExpand: shouldInitiallyExpand,
-    data: value.map(function (element) {
-      return [undefined, element];
-    })
+    style,
+    shouldExpandNode,
+    data: value.map(element => [undefined, element])
   });
 }
-
 function JsonPrimitiveValue(_ref4) {
-  var field = _ref4.field,
-      value = _ref4.value,
-      style = _ref4.style,
-      lastElement = _ref4.lastElement;
-  var stringValue = value;
-  var valueStyle = style.otherValue;
-
+  let {
+    field,
+    value,
+    style,
+    lastElement
+  } = _ref4;
+  let stringValue = value;
+  let valueStyle = style.otherValue;
   if (value === null) {
@@ -178,3 +152,3 @@ stringValue = 'null';
   } else if (isString(value)) {
-    stringValue = "\"" + value + "\"";
+    stringValue = `"${value}"`;
     valueStyle = style.stringValue;
@@ -188,3 +162,3 @@ } else if (isBoolean(value)) {
   } else if (isBigInt(value)) {
-    stringValue = value.toString() + "n";
+    stringValue = `${value.toString()}n`;
     valueStyle = style.numberValue;
@@ -194,36 +168,30 @@ } else {
   }
-
   if (field === '') {
     field = '""';
   }
-
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: style.basicChildStyle,
     role: 'listitem'
-  }, field && React.createElement("span", {
+  }, field && /*#__PURE__*/React.createElement("span", {
     className: style.label
-  }, field, ":"), React.createElement("span", {
+  }, field, ":"), /*#__PURE__*/React.createElement("span", {
     className: valueStyle
-  }, stringValue), !lastElement && React.createElement("span", {
+  }, stringValue), !lastElement && /*#__PURE__*/React.createElement("span", {
     className: style.punctuation
   }, ","));
 }
-
 function DataRender(props) {
-  var value = props.value;
-
+  const value = props.value;
   if (isArray(value)) {
-    return React.createElement(JsonArray, Object.assign({}, props));
+    return /*#__PURE__*/React.createElement(JsonArray, Object.assign({}, props));
   }
-
   if (isObject(value)) {
-    return React.createElement(JsonObject, Object.assign({}, props));
+    return /*#__PURE__*/React.createElement(JsonObject, Object.assign({}, props));
   }
-
-  return React.createElement(JsonPrimitiveValue, Object.assign({}, props));
+  return /*#__PURE__*/React.createElement(JsonPrimitiveValue, Object.assign({}, props));
 }
 
-var styles = {"container-base":"_GzYRV","punctuation-base":"_3eOF8","expander-base":"_f10Tu","pointer":"_1MFti","container-light":"_2IvMF _GzYRV","expander-light":"_16FAf _f10Tu","basic-element-style":"_2bkNM","label-light":"_1MGIk","punctuation-light":"_3uHL6 _3eOF8","value-null-light":"_2T6PJ","value-undefined-light":"_1Gho6","value-string-light":"_vGjyY","value-number-light":"_1bQdo","value-boolean-light":"_3zQKs","value-other-light":"_1xvuR","container-dark":"_11RoI _GzYRV","expander-dark":"_3cpys _f10Tu","label-dark":"_2bSDX","punctuation-dark":"_gsbQL _3eOF8","value-null-dark":"_LaAZe","value-undefined-dark":"_GTKgm","value-string-dark":"_Chy1W","value-number-dark":"_2bveF","value-boolean-dark":"_2vRm-","value-other-dark":"_1prJR"};
+var styles = {"container-base":"_GzYRV","punctuation-base":"_3eOF8","pointer":"_1MFti","expander-base":"_f10Tu _1MFti","expand-icon":"_1UmXx","collapse-icon":"_1LId0","collapsed-content-base":"_1pNG9 _1MFti","container-light":"_2IvMF _GzYRV","basic-element-style":"_2bkNM","label-light":"_1MGIk","punctuation-light":"_3uHL6 _3eOF8","value-null-light":"_2T6PJ","value-undefined-light":"_1Gho6","value-string-light":"_vGjyY","value-number-light":"_1bQdo","value-boolean-light":"_3zQKs","value-other-light":"_1xvuR","collapse-icon-light":"_oLqym _f10Tu _1MFti _1UmXx","expand-icon-light":"_2AXVT _f10Tu _1MFti _1UmXx","collapsed-content-light":"_2KJWg _1pNG9 _1MFti","container-dark":"_11RoI _GzYRV","expand-icon-dark":"_17H2C _f10Tu _1MFti _1UmXx","collapse-icon-dark":"_3QHg2 _f10Tu _1MFti _1LId0","collapsed-content-dark":"_3fDAz _1pNG9 _1MFti","label-dark":"_2bSDX","punctuation-dark":"_gsbQL _3eOF8","value-null-dark":"_LaAZe","value-undefined-dark":"_GTKgm","value-string-dark":"_Chy1W","value-number-dark":"_2bveF","value-boolean-dark":"_2vRm-","value-other-dark":"_1prJR"};
 
-var defaultStyles = {
+const defaultStyles = {
   container: styles['container-light'],
@@ -238,7 +206,8 @@ basicChildStyle: styles['basic-element-style'],
   otherValue: styles['value-other-light'],
-  expander: styles['expander-light'],
   punctuation: styles['punctuation-light'],
-  pointer: styles.pointer
+  collapseIcon: styles['collapse-icon-light'],
+  expandIcon: styles['expand-icon-light'],
+  collapsedContent: styles['collapsed-content-light']
 };
-var darkStyles = {
+const darkStyles = {
   container: styles['container-dark'],
@@ -253,21 +222,18 @@ basicChildStyle: styles['basic-element-style'],
   otherValue: styles['value-other-dark'],
-  expander: styles['expander-dark'],
   punctuation: styles['punctuation-dark'],
-  pointer: styles.pointer
+  collapseIcon: styles['collapse-icon-dark'],
+  expandIcon: styles['expand-icon-dark'],
+  collapsedContent: styles['collapsed-content-dark']
 };
-var allExpanded = function allExpanded() {
-  return true;
-};
-var collapseAllNested = function collapseAllNested(level) {
-  return level < 1;
-};
-var JsonView = function JsonView(_ref) {
-  var data = _ref.data,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? defaultStyles : _ref$style,
-      _ref$shouldInitiallyE = _ref.shouldInitiallyExpand,
-      shouldInitiallyExpand = _ref$shouldInitiallyE === void 0 ? allExpanded : _ref$shouldInitiallyE;
-  return React.createElement("div", {
+const allExpanded = () => true;
+const collapseAllNested = level => level < 1;
+const JsonView = _ref => {
+  let {
+    data,
+    style = defaultStyles,
+    shouldExpandNode = allExpanded
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
     className: style.container
-  }, React.createElement(DataRender, {
+  }, /*#__PURE__*/React.createElement(DataRender, {
     value: data,
@@ -277,3 +243,3 @@ style: style,
     level: 0,
-    shouldInitiallyExpand: shouldInitiallyExpand
+    shouldExpandNode: shouldExpandNode
   }));
@@ -280,0 +246,0 @@ };

dist/index.modern.js

 import { useState, createElement, useRef, useEffect } from 'react';
 
-var isBoolean = function isBoolean(data) {
+const isBoolean = data => {
   return typeof data === 'boolean' || data instanceof Boolean;
 };
-var isNumber = function isNumber(data) {
+const isNumber = data => {
   return typeof data === 'number' || data instanceof Number;
 };
-var isBigInt = function isBigInt(data) {
+const isBigInt = data => {
   return typeof data === 'bigint' || data instanceof BigInt;
 };
-var isString = function isString(data) {
+const isString = data => {
   return typeof data === 'string' || data instanceof String;
 };
-var isArray = function isArray(data) {
+const isArray = data => {
   return Array.isArray(data);
 };
-var isObject = function isObject(data) {
+const isObject = data => {
   return data instanceof Object && data !== null;
@@ -23,53 +23,32 @@ };
 function useBool(initialValueCreator) {
-  var _useState = useState(initialValueCreator()),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var tooggle = function tooggle() {
-    return setValue(function (currentValue) {
-      return !currentValue;
-    });
-  };
-
+  const [value, setValue] = useState(initialValueCreator());
+  const tooggle = () => setValue(currentValue => !currentValue);
   return [value, tooggle, setValue];
 }
 
-var expandedIcon = "\u25BE";
-var collapsedIcon = "\u25B8";
-
-function combineStyles(style1, style2) {
-  return (style1 || '') + " " + (style2 || '');
-}
-
-function renderExpandableObject(_ref) {
-  var field = _ref.field,
-      value = _ref.value,
-      data = _ref.data,
-      lastElement = _ref.lastElement,
-      openBracket = _ref.openBracket,
-      closeBracket = _ref.closeBracket,
-      level = _ref.level,
-      style = _ref.style,
-      shouldInitiallyExpand = _ref.shouldInitiallyExpand;
-  var shouldInitiallyExpandCalledRef = useRef(false);
-
-  var _useBool = useBool(function () {
-    return shouldInitiallyExpand(level, value, field);
-  }),
-      expanded = _useBool[0],
-      toggleExpanded = _useBool[1],
-      setExpanded = _useBool[2];
-
-  useEffect(function () {
-    if (!shouldInitiallyExpandCalledRef.current) {
-      shouldInitiallyExpandCalledRef.current = true;
+function ExpandableObject(_ref) {
+  let {
+    field,
+    value,
+    data,
+    lastElement,
+    openBracket,
+    closeBracket,
+    level,
+    style,
+    shouldExpandNode
+  } = _ref;
+  const shouldExpandNodeCalledRef = useRef(false);
+  const [expanded, toggleExpanded, setExpanded] = useBool(() => shouldExpandNode(level, value, field));
+  useEffect(() => {
+    if (!shouldExpandNodeCalledRef.current) {
+      shouldExpandNodeCalledRef.current = true;
     } else {
-      setExpanded(shouldInitiallyExpand(level, value, field));
+      setExpanded(shouldExpandNode(level, value, field));
     }
-  }, [shouldInitiallyExpand]);
-  var expandIcon = expanded ? expandedIcon : collapsedIcon;
-  var childLevel = level + 1;
-  var lastIndex = data.length - 1;
-
-  var onKeyDown = function onKeyDown(e) {
+  }, [shouldExpandNode]);
+  const expanderIconStyle = expanded ? style.collapseIcon : style.expandIcon;
+  const childLevel = level + 1;
+  const lastIndex = data.length - 1;
+  const onKeyDown = e => {
     if (e.key === ' ') {
@@ -79,8 +58,7 @@ toggleExpanded();
   };
-
-  return createElement("div", {
+  return /*#__PURE__*/createElement("div", {
     className: style.basicChildStyle,
     role: 'list'
-  }, createElement("span", {
-    className: combineStyles(style.expander, style.pointer),
+  }, /*#__PURE__*/createElement("span", {
+    className: expanderIconStyle,
     role: 'button',
@@ -90,18 +68,16 @@ onClick: toggleExpanded,
     tabIndex: 0
-  }, expandIcon), field && createElement("span", {
+  }), field && /*#__PURE__*/createElement("span", {
     className: style.label
-  }, field, ":"), createElement("span", {
+  }, field, ":"), /*#__PURE__*/createElement("span", {
     className: style.punctuation
-  }, openBracket), expanded ? createElement("div", null, data.map(function (dataElement, index) {
-    return createElement(DataRender, {
-      key: dataElement[0] || index,
-      field: dataElement[0],
-      value: dataElement[1],
-      style: style,
-      lastElement: index === lastIndex,
-      level: childLevel,
-      shouldInitiallyExpand: shouldInitiallyExpand
-    });
-  })) : createElement("span", {
-    className: combineStyles(style.punctuation, style.pointer),
+  }, openBracket), expanded ? /*#__PURE__*/createElement("div", null, data.map((dataElement, index) => /*#__PURE__*/createElement(DataRender, {
+    key: dataElement[0] || index,
+    field: dataElement[0],
+    value: dataElement[1],
+    style: style,
+    lastElement: index === lastIndex,
+    level: childLevel,
+    shouldExpandNode: shouldExpandNode
+  }))) : /*#__PURE__*/createElement("span", {
+    className: style.collapsedContent,
     role: 'button',
@@ -111,61 +87,59 @@ tabIndex: 0,
     onKeyDown: onKeyDown
-  }, "..."), createElement("span", {
+  }), /*#__PURE__*/createElement("span", {
     className: style.punctuation
-  }, closeBracket), !lastElement && createElement("span", {
+  }, closeBracket), !lastElement && /*#__PURE__*/createElement("span", {
     className: style.punctuation
   }, ","));
 }
-
 function JsonObject(_ref2) {
-  var field = _ref2.field,
-      value = _ref2.value,
-      style = _ref2.style,
-      lastElement = _ref2.lastElement,
-      shouldInitiallyExpand = _ref2.shouldInitiallyExpand,
-      level = _ref2.level;
-  return renderExpandableObject({
-    field: field,
-    value: value,
+  let {
+    field,
+    value,
+    style,
+    lastElement,
+    shouldExpandNode,
+    level
+  } = _ref2;
+  return ExpandableObject({
+    field,
+    value,
     lastElement: lastElement || false,
-    level: level,
+    level,
     openBracket: '{',
     closeBracket: '}',
-    style: style,
-    shouldInitiallyExpand: shouldInitiallyExpand,
-    data: Object.keys(value).map(function (key) {
-      return [key, value[key]];
-    })
+    style,
+    shouldExpandNode,
+    data: Object.keys(value).map(key => [key, value[key]])
   });
 }
-
 function JsonArray(_ref3) {
-  var field = _ref3.field,
-      value = _ref3.value,
-      style = _ref3.style,
-      lastElement = _ref3.lastElement,
-      level = _ref3.level,
-      shouldInitiallyExpand = _ref3.shouldInitiallyExpand;
-  return renderExpandableObject({
-    field: field,
-    value: value,
+  let {
+    field,
+    value,
+    style,
+    lastElement,
+    level,
+    shouldExpandNode
+  } = _ref3;
+  return ExpandableObject({
+    field,
+    value,
     lastElement: lastElement || false,
-    level: level,
+    level,
     openBracket: '[',
     closeBracket: ']',
-    style: style,
-    shouldInitiallyExpand: shouldInitiallyExpand,
-    data: value.map(function (element) {
-      return [undefined, element];
-    })
+    style,
+    shouldExpandNode,
+    data: value.map(element => [undefined, element])
   });
 }
-
 function JsonPrimitiveValue(_ref4) {
-  var field = _ref4.field,
-      value = _ref4.value,
-      style = _ref4.style,
-      lastElement = _ref4.lastElement;
-  var stringValue = value;
-  var valueStyle = style.otherValue;
-
+  let {
+    field,
+    value,
+    style,
+    lastElement
+  } = _ref4;
+  let stringValue = value;
+  let valueStyle = style.otherValue;
   if (value === null) {
@@ -178,3 +152,3 @@ stringValue = 'null';
   } else if (isString(value)) {
-    stringValue = "\"" + value + "\"";
+    stringValue = `"${value}"`;
     valueStyle = style.stringValue;
@@ -188,3 +162,3 @@ } else if (isBoolean(value)) {
   } else if (isBigInt(value)) {
-    stringValue = value.toString() + "n";
+    stringValue = `${value.toString()}n`;
     valueStyle = style.numberValue;
@@ -194,36 +168,30 @@ } else {
   }
-
   if (field === '') {
     field = '""';
   }
-
-  return createElement("div", {
+  return /*#__PURE__*/createElement("div", {
     className: style.basicChildStyle,
     role: 'listitem'
-  }, field && createElement("span", {
+  }, field && /*#__PURE__*/createElement("span", {
     className: style.label
-  }, field, ":"), createElement("span", {
+  }, field, ":"), /*#__PURE__*/createElement("span", {
     className: valueStyle
-  }, stringValue), !lastElement && createElement("span", {
+  }, stringValue), !lastElement && /*#__PURE__*/createElement("span", {
     className: style.punctuation
   }, ","));
 }
-
 function DataRender(props) {
-  var value = props.value;
-
+  const value = props.value;
   if (isArray(value)) {
-    return createElement(JsonArray, Object.assign({}, props));
+    return /*#__PURE__*/createElement(JsonArray, Object.assign({}, props));
   }
-
   if (isObject(value)) {
-    return createElement(JsonObject, Object.assign({}, props));
+    return /*#__PURE__*/createElement(JsonObject, Object.assign({}, props));
   }
-
-  return createElement(JsonPrimitiveValue, Object.assign({}, props));
+  return /*#__PURE__*/createElement(JsonPrimitiveValue, Object.assign({}, props));
 }
 
-var styles = {"container-base":"_GzYRV","punctuation-base":"_3eOF8","expander-base":"_f10Tu","pointer":"_1MFti","container-light":"_2IvMF _GzYRV","expander-light":"_16FAf _f10Tu","basic-element-style":"_2bkNM","label-light":"_1MGIk","punctuation-light":"_3uHL6 _3eOF8","value-null-light":"_2T6PJ","value-undefined-light":"_1Gho6","value-string-light":"_vGjyY","value-number-light":"_1bQdo","value-boolean-light":"_3zQKs","value-other-light":"_1xvuR","container-dark":"_11RoI _GzYRV","expander-dark":"_3cpys _f10Tu","label-dark":"_2bSDX","punctuation-dark":"_gsbQL _3eOF8","value-null-dark":"_LaAZe","value-undefined-dark":"_GTKgm","value-string-dark":"_Chy1W","value-number-dark":"_2bveF","value-boolean-dark":"_2vRm-","value-other-dark":"_1prJR"};
+var styles = {"container-base":"_GzYRV","punctuation-base":"_3eOF8","pointer":"_1MFti","expander-base":"_f10Tu _1MFti","expand-icon":"_1UmXx","collapse-icon":"_1LId0","collapsed-content-base":"_1pNG9 _1MFti","container-light":"_2IvMF _GzYRV","basic-element-style":"_2bkNM","label-light":"_1MGIk","punctuation-light":"_3uHL6 _3eOF8","value-null-light":"_2T6PJ","value-undefined-light":"_1Gho6","value-string-light":"_vGjyY","value-number-light":"_1bQdo","value-boolean-light":"_3zQKs","value-other-light":"_1xvuR","collapse-icon-light":"_oLqym _f10Tu _1MFti _1UmXx","expand-icon-light":"_2AXVT _f10Tu _1MFti _1UmXx","collapsed-content-light":"_2KJWg _1pNG9 _1MFti","container-dark":"_11RoI _GzYRV","expand-icon-dark":"_17H2C _f10Tu _1MFti _1UmXx","collapse-icon-dark":"_3QHg2 _f10Tu _1MFti _1LId0","collapsed-content-dark":"_3fDAz _1pNG9 _1MFti","label-dark":"_2bSDX","punctuation-dark":"_gsbQL _3eOF8","value-null-dark":"_LaAZe","value-undefined-dark":"_GTKgm","value-string-dark":"_Chy1W","value-number-dark":"_2bveF","value-boolean-dark":"_2vRm-","value-other-dark":"_1prJR"};
 
-var defaultStyles = {
+const defaultStyles = {
   container: styles['container-light'],
@@ -238,7 +206,8 @@ basicChildStyle: styles['basic-element-style'],
   otherValue: styles['value-other-light'],
-  expander: styles['expander-light'],
   punctuation: styles['punctuation-light'],
-  pointer: styles.pointer
+  collapseIcon: styles['collapse-icon-light'],
+  expandIcon: styles['expand-icon-light'],
+  collapsedContent: styles['collapsed-content-light']
 };
-var darkStyles = {
+const darkStyles = {
   container: styles['container-dark'],
@@ -253,21 +222,18 @@ basicChildStyle: styles['basic-element-style'],
   otherValue: styles['value-other-dark'],
-  expander: styles['expander-dark'],
   punctuation: styles['punctuation-dark'],
-  pointer: styles.pointer
+  collapseIcon: styles['collapse-icon-dark'],
+  expandIcon: styles['expand-icon-dark'],
+  collapsedContent: styles['collapsed-content-dark']
 };
-var allExpanded = function allExpanded() {
-  return true;
-};
-var collapseAllNested = function collapseAllNested(level) {
-  return level < 1;
-};
-var JsonView = function JsonView(_ref) {
-  var data = _ref.data,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? defaultStyles : _ref$style,
-      _ref$shouldInitiallyE = _ref.shouldInitiallyExpand,
-      shouldInitiallyExpand = _ref$shouldInitiallyE === void 0 ? allExpanded : _ref$shouldInitiallyE;
-  return createElement("div", {
+const allExpanded = () => true;
+const collapseAllNested = level => level < 1;
+const JsonView = _ref => {
+  let {
+    data,
+    style = defaultStyles,
+    shouldExpandNode = allExpanded
+  } = _ref;
+  return /*#__PURE__*/createElement("div", {
     className: style.container
-  }, createElement(DataRender, {
+  }, /*#__PURE__*/createElement(DataRender, {
     value: data,
@@ -277,3 +243,3 @@ style: style,
     level: 0,
-    shouldInitiallyExpand: shouldInitiallyExpand
+    shouldExpandNode: shouldExpandNode
   }));
@@ -280,0 +246,0 @@ };

dist/index.test.d.ts

@@ -1,1 +0,1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

dist/stories/JsonView.stories.d.ts

@@ -1,6 +0,6 @@
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("..").Props>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("..").Props>;
 export default _default;
-export declare const Basic: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("..").Props>;
-export declare const DarkTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("..").Props>;
-export declare const CollapsedNestedObjects: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("..").Props>;
-export declare const CollapsedRoot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("..").Props>;
+export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("..").Props>;
+export declare const DarkTheme: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("..").Props>;
+export declare const CollapsedNestedObjects: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("..").Props>;
+export declare const CollapsedRoot: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("..").Props>;

package.json

 {
   "name": "react-json-view-lite",
-  "version": "0.9.8",
+  "version": "1.0.0",
   "description": "JSON viewer component for React focused on performance for large volume input while still providing few customiziation features",
@@ -36,4 +36,4 @@ "homepage": "http://anyroad.github.io/react-json-view-lite",
     "deploy-storybook": "gh-pages -d storybook-static",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
@@ -44,49 +44,52 @@ "peerDependencies": {
   "resolutions": {
-    "@typescript-eslint/eslint-plugin": "4.14.0",
-    "@typescript-eslint/parser": "4.14.0"
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/addons": "^6.5.12",
-    "@storybook/builder-webpack4": "^6.5.12",
-    "@storybook/manager-webpack4": "^6.5.12",
-    "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.12",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.1.2",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addons": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "0.2.0",
+    "@storybook/theming": "^7.4.0",
+    "@testing-library/jest-dom": "6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "29.5.4",
     "@types/node": "18.8.3",
-    "@types/react": "18.0.21",
-    "@types/react-dom": "18.0.6",
-    "@typescript-eslint/eslint-plugin": "5.39.0",
-    "@typescript-eslint/parser": "5.39.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
     "babel-eslint": "10.1.0",
     "cross-env": "7.0.3",
-    "eslint": "8.25.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-standard": "17.0.0",
-    "eslint-config-standard-react": "11.0.1",
-    "eslint-plugin-import": "2.26.0",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-config-standard": "17.1.0",
+    "eslint-config-standard-react": "13.0.0",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-n": "15.3.0",
+    "eslint-plugin-n": "16.0.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.1",
-    "eslint-plugin-react": "7.31.9",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-standard": "5.0.0",
-    "gh-pages": "4.0.0",
+    "gh-pages": "6.0.0",
     "microbundle-crl": "0.13.11",
     "npm-run-all": "4.1.5",
-    "prettier": "2.7.1",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-scripts": "5.0.1",
+    "storybook": "^7.4.0",
     "storybook-css-modules": "^1.0.8",
-    "typescript": "4.8.4"
+    "typescript": "5.2.2"
   },
@@ -101,3 +104,4 @@ "files": [
     ]
-  }
-}
+  },
+  "packageManager": "yarn@3.6.3"
+}

README.md

@@ -40,2 +40,10 @@ <div align="center">
 
+## Migration from the 0.9.x versions
+
+1. Property `shouldInitiallyExpand` has different name `shouldExpandNode` in order to emphasize that it will be called every time properties change.
+2. If you use custom styles:
+   - `pointer` and `expander` are no longer used
+   - component uses `collapseIcon`, `expandIcon`, `collapsedContent` styles in order to customize expand/collapse icon and collpased content placeholder which were previously hardcode to the `▸`, `▾` and `...`.
+     Default style values use `::after` pseudo-classes to set the content.
+
 ## Usage
@@ -57,4 +65,4 @@
     <React.Fragment>
-      <JsonView data={json} shouldInitiallyExpand={allExpanded} style={defaultStyles} />
-      <JsonView data={json} shouldInitiallyExpand={allExpanded} style={darkStyles} />
+      <JsonView data={json} shouldExpandNode={allExpanded} style={defaultStyles} />
+      <JsonView data={json} shouldExpandNode={allExpanded} style={darkStyles} />
     </React.Fragment>
@@ -68,3 +76,3 @@ );
 Please note that in JavaScript, an anonymous function like `function() {}` or `() => {}` always creates a different function every time component is rendered, so you might need to use
-[useCallback](https://react.dev/reference/react/useCallback) React Hook for the `shouldInitiallyExpand` parameter or extract the function outside the functional component.
+[useCallback](https://react.dev/reference/react/useCallback) React Hook for the `shouldExpandNode` parameter or extract the function outside the functional component.
 
@@ -75,15 +83,9 @@ ### StoryBook
 
-### Demo
-
-https://codesandbox.io/s/react-json-view-lite-example-wvdjl
-
-(thanks to @idindrakusuma)
-
 ### Props
 
-| Name                  | Type                                                     | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| --------------------- | -------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| data                  | `Object` \| `Array<any>`                                 |               | Data which should be rendered                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| style                 | StyleProps                                               | defaultStyles | Optional. CSS classes for rendering. Library provides two build-in implementations: `darkStyles`, `defaultStyles` (see below)                                                                                                                                                                                                                                                                                                                  |
-| shouldInitiallyExpand | `(level: number, value: any, field?: string) => boolean` | allExpanded   | Optional. Function which will be initially called for each Object and Array of the data in order to calculate should if this node be expanded. **Note** that this function will be called again to update the each node state once the property value changed. `level` startes from `0`, `field` does not have a value for the array element. Library provides two build-in implementations: `allExpanded` and `collapseAllNested` (see below) |
+| Name             | Type                                                     | Default Value | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| ---------------- | -------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data             | `Object` \| `Array<any>`                                 |               | Data which should be rendered                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| style            | StyleProps                                               | defaultStyles | Optional. CSS classes for rendering. Library provides two build-in implementations: `darkStyles`, `defaultStyles` (see below)                                                                                                                                                                                                                                                                                                                                 |
+| shouldExpandNode | `(level: number, value: any, field?: string) => boolean` | allExpanded   | Optional. Function which will be called during initial rendering for each Object and Array of the data in order to calculate should if this node be expanded. **Note** that this function will be called again to update the each node state once the property value changed. `level` startes from `0`, `field` does not have a value for the array element. Library provides two build-in implementations: `allExpanded` and `collapseAllNested` (see below) |
 
@@ -101,16 +103,17 @@ ### Extra exported
 
-| Name            | Type   | Description                                                                                                       |
-| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------- |
-| container       | string | CSS class name for rendering parent block                                                                         |
-| basicChildStyle | string | CSS class name for property block containing property name and value                                              |
-| expander        | string | CSS class name for rendering button expanding/collapsing Object and Array nodes                                   |
-| label           | string | CSS class name for rendering property names                                                                       |
-| nullValue       | string | CSS class name for rendering null values                                                                          |
-| undefinedValue  | string | CSS class name for rendering undefined values                                                                     |
-| numberValue     | string | CSS class name for rendering numeric values                                                                       |
-| stringValue     | string | CSS class name for rendering string values                                                                        |
-| booleanValue    | string | CSS class name for rendering boolean values                                                                       |
-| otherValue      | string | CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string |
-| punctuation     | string | CSS class name for rendering `,`, `[`, `]`, `{`, `}`, `...`                                                       |
-| pointer         | string | extra CSS class name for parts which are used for expanding/collapsing: `▸`, `▾` and `...`                        |
+| Name             | Type   | Description                                                                                                       |
+| ---------------- | ------ | ----------------------------------------------------------------------------------------------------------------- |
+| container        | string | CSS class name for rendering parent block                                                                         |
+| basicChildStyle  | string | CSS class name for property block containing property name and value                                              |
+| collapseIcon     | string | CSS class name for rendering button collapsing Object and Array nodes. Default content is `▾`.                    |
+| expandIcon       | string | CSS class name for rendering button expanding Object and Array nodes. Default content is `▸`.                     |
+| collapsedContent | string | CSS class name for rendering placeholder when Object and Array nodes are collapsed. Default contents is `...`.    |
+| label            | string | CSS class name for rendering property names                                                                       |
+| nullValue        | string | CSS class name for rendering null values                                                                          |
+| undefinedValue   | string | CSS class name for rendering undefined values                                                                     |
+| numberValue      | string | CSS class name for rendering numeric values                                                                       |
+| stringValue      | string | CSS class name for rendering string values                                                                        |
+| booleanValue     | string | CSS class name for rendering boolean values                                                                       |
+| otherValue       | string | CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string |
+| punctuation      | string | CSS class name for rendering `,`, `[`, `]`, `{`, `}`                                                              |
 
@@ -117,0 +120,0 @@ ## Comparison with other libraries

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

663

increased by0.61%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

148

increased by2.07%

Worsened metrics

Total package byte prevSize

72080

decreased by-1.46%

Dev dependency count

46

increased by6.98%

No dependency changes