fix: border color and expand icon

Author: himself65

examples/basic/pages/index.tsx

@@ -79,7 +79,7 @@ const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
 KeyRenderer.when = (props) => props.value === 114.514
 
 const IndexPage: React.FC = () => {
-  const [indent, setIndent] = useState(2)
+  const [indent, setIndent] = useState(3)
   const [groupArraysAfterLength, setGroupArraysAfterLength] = useState(100)
   const [theme, setTheme] = useState<JsonViewerTheme>('light')
   const [src, setSrc] = useState(() => example)
@@ -121,7 +121,7 @@ const IndexPage: React.FC = () => {
           }
         }
       />
-      <FormControl fullWidth>
+      <FormControl>
         <InputLabel>Theme</InputLabel>
         <Select
           value={theme}

src/components/DataKeyPair.tsx

@@ -1,8 +1,10 @@
 import {
   Check as CheckIcon,
+  ChevronRight as ChevronRightIcon,
   Close as CloseIcon,
   ContentCopy as ContentCopyIcon,
-  Edit as EditIcon
+  Edit as EditIcon,
+  ExpandMore as ExpandMoreIcon
 } from '@mui/icons-material'
 import { Box, styled } from '@mui/material'
 import type React from 'react'
@@ -145,7 +147,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   },
   [Editor, copied, copy, editable, editing, onChange, path, tempValue, value])
 
-  const expandable = PreComponent && PostComponent
+  const expandable = !!(PreComponent && PostComponent)
   const KeyRenderer = useJsonViewerStore(store => store.keyRenderer)
   return (
     <Box className='data-key-pair'
@@ -172,6 +174,18 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
           }, [setInspect])
         }
       >
+        {
+          expandable
+            ? (inspect
+                ? <ExpandMoreIcon sx={{
+                  fontSize: '.8rem'
+                }}/>
+                : <ChevronRightIcon sx={{
+                  fontSize: '.8rem'
+                }}/>
+              )
+            : null
+        }
         {
           (isRoot && rootName !== false)
             ? <>&quot;{rootName}&quot;</>

src/components/DataTypes/Object.tsx

@@ -104,6 +104,7 @@ function getIterator (value: any): value is Iterable<unknown> {
 
 export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
   const keyColor = useTextColor()
+  const borderColor = useJsonViewerStore(store => store.colorNamespace.base02)
   const groupArraysAfterLength = useJsonViewerStore(
     store => store.groupArraysAfterLength)
   const isTrap = useIsCycleReference(props.path, props.value)
@@ -223,14 +224,18 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
     groupArraysAfterLength,
     displayLength,
     keyColor])
-  const indentWidth = useJsonViewerStore(store => store.indentWidth)
+  const marginLeft = props.inspect ? 0.6 : 0
+  const width = useJsonViewerStore(store => store.indentWidth)
+  const indentWidth = props.inspect ? width - marginLeft : width
   return (
     <Box
       className='data-object'
       sx={{
         display: props.inspect ? 'block' : 'inline-block',
-        pl: props.inspect ? indentWidth : 0,
-        color: keyColor
+        pl: props.inspect ? indentWidth - 0.6 : 0,
+        marginLeft,
+        color: keyColor,
+        borderLeft: props.inspect ? `1px solid ${borderColor}` : 'none'
       }}
     >
       {

src/index.tsx

@@ -63,6 +63,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   const setHover = useJsonViewerStore(store => store.setHover)
   return (
     <Paper
+      elevation={0}
       className={props.className}
       style={props.style}
       sx={{

src/stores/JsonViewerStore.ts

@@ -40,7 +40,7 @@ export const createJsonViewerStore = <T = unknown>(props: JsonViewerProps<T>) =>
       {
         inspectCache: {},
         hoverPath: null,
-        indentWidth: props.indentWidth ?? 2,
+        indentWidth: props.indentWidth ?? 3,
         groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
         collapseStringsAfterLength: props.collapseStringsAfterLength ?? 50,
         maxDisplayLength: props.maxDisplayLength ?? 30,

src/type.ts

@@ -42,7 +42,7 @@ export type JsonViewerProps<T = unknown> = {
   value: T
   /**
    * Indent width for nested objects
-   * @default 2
+   * @default 3
    */
   indentWidth?: number
   /**