@xyo-network/react-payload 2.25.22 → 2.25.23

package/dist/cjs/components/Details/JsonDetails.js

@@ -11,13 +11,14 @@ const JsonView = (0, react_1.lazy)(() => Promise.resolve().then(() => tslib_1.__
 const PayloadJsonDetails = (_a) => {
     var _b;
     var { jsonViewProps, payload = {} } = _a, props = tslib_1.__rest(_a, ["jsonViewProps", "payload"]);
-    const { breakpoints } = (0, material_1.useTheme)();
+    const { breakpoints, palette } = (0, material_1.useTheme)();
     const belowSm = (0, material_1.useMediaQuery)(breakpoints.down('sm'));
     let elevation = 2;
     if (props.paper) {
         elevation += (_b = props.elevation) !== null && _b !== void 0 ? _b : 0;
     }
-    return ((0, jsx_runtime_1.jsx)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload" }, props, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(sdk_react_1.FlexGrowRow, {}) }, { children: (0, jsx_runtime_1.jsx)(JsonView, Object.assign({ src: payload, enableClipboard: true, collapseStringsAfterLength: belowSm ? 24 : 32 }, jsonViewProps)) })) })));
+    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_property_1.PropertyGroup, Object.assign({ titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload" }, props, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ square: true, elevation: 2, style: { overflow: 'hidden', padding: '16px', width: '100%' } }, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(sdk_react_1.FlexGrowRow, {}) }, { children: (0, jsx_runtime_1.jsx)(JsonView, Object.assign({ groupArraysAfterLength: 5, shouldCollapse: (props) => props.name !== 'root', style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32 }, jsonViewProps)) })) })) })));
 };
 exports.PayloadJsonDetails = PayloadJsonDetails;
 //# sourceMappingURL=JsonDetails.js.map

package/dist/cjs/components/Details/JsonDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAuD;AACvD,iDAA+C;AAE/C,gEAA+E;AAC/E,iCAAsC;AAGtC,MAAM,QAAQ,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,2DAAQ,kCAAkC,CAAC,iBAAiB,GAAC,CAAC,CAAA;AAOlF,MAAM,kBAAkB,GAAsC,CAAC,EAAyC,EAAE,EAAE;;QAA7C,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,OAAY,EAAP,KAAK,sBAAvC,4BAAyC,CAAF;IAC3G,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAClC,MAAM,OAAO,GAAG,IAAA,wBAAa,EAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,uBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,IAAK,KAAK,cAChG,uBAAC,gBAAQ,kBAAC,QAAQ,EAAE,uBAAC,uBAAW,KAAG,gBACjC,uBAAC,QAAQ,kBAAC,GAAG,EAAE,OAAO,EAAE,eAAe,QAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAM,aAAa,EAAI,IACnG,IACG,CACjB,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,kBAAkB,sBAgB9B"}
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA8D;AAC9D,iDAA+C;AAE/C,gEAA+E;AAC/E,iCAAsC;AAGtC,MAAM,QAAQ,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,2DAAQ,kCAAkC,CAAC,iBAAiB,GAAC,CAAC,CAAA;AAOlF,MAAM,kBAAkB,GAAsC,CAAC,EAAyC,EAAE,EAAE;;QAA7C,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,OAAY,EAAP,KAAK,sBAAvC,4BAAyC,CAAF;IAC3G,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,IAAA,wBAAa,EAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,uBAAC,8BAAa,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,IAAK,KAAK,cAChG,uBAAC,gBAAK,kBAAC,MAAM,QAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,gBACvF,uBAAC,gBAAQ,kBAAC,QAAQ,EAAE,uBAAC,uBAAW,KAAG,gBACjC,uBAAC,QAAQ,kBACP,sBAAsB,EAAE,CAAC,EACzB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,EAChD,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACzD,GAAG,EAAE,OAAO,EACZ,eAAe,QACf,KAAK,EAAE,SAAS,EAChB,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IACzC,aAAa,EACjB,IACO,IACL,IACM,CACjB,CAAA;AACH,CAAC,CAAA;AA7BY,QAAA,kBAAkB,sBA6B9B"}

package/dist/esm/components/Details/JsonDetails.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMediaQuery, useTheme } from '@mui/material';
+import { Paper, useMediaQuery, useTheme } from '@mui/material';
 import { FlexGrowRow } from '@xylabs/sdk-react';
 import { PropertyGroup } from '@xyo-network/react-property';
 import { lazy, Suspense } from 'react';
 const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'));
 export const PayloadJsonDetails = ({ jsonViewProps, payload = {}, ...props }) => {
-    const { breakpoints } = useTheme();
+    const { breakpoints, palette } = useTheme();
     const belowSm = useMediaQuery(breakpoints.down('sm'));
     let elevation = 2;
     if (props.paper) {
         elevation += props.elevation ?? 0;
     }
-    return (_jsx(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { src: payload, enableClipboard: true, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }));
+    const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined;
+    return (_jsx(PropertyGroup, { titleProps: { elevation }, title: "JSON", tip: "The raw JSON of the payload", ...props, children: _jsx(Paper, { square: true, elevation: 2, style: { overflow: 'hidden', padding: '16px', width: '100%' }, children: _jsx(Suspense, { fallback: _jsx(FlexGrowRow, {}), children: _jsx(JsonView, { groupArraysAfterLength: 5, shouldCollapse: (props) => props.name !== 'root', style: { backgroundColor: undefined, overflow: 'hidden' }, src: payload, enableClipboard: true, theme: jsonTheme, collapseStringsAfterLength: belowSm ? 24 : 32, ...jsonViewProps }) }) }) }));
 };
 //# sourceMappingURL=JsonDetails.js.map

package/dist/esm/components/Details/JsonDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,KAAK,KAAK,YAChG,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IAAC,GAAG,EAAE,OAAO,EAAE,eAAe,QAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAM,aAAa,GAAI,GACnG,GACG,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"JsonDetails.js","sourceRoot":"","sources":["../../../../src/components/Details/JsonDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAsB,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kCAAkC,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAOzF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EAAE,aAAa,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC3C,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAErD,IAAI,SAAS,GAAG,CAAC,CAAA;IACjB,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,CAAA;KAClC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtE,OAAO,CACL,KAAC,aAAa,IAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAC,MAAM,EAAC,GAAG,EAAC,6BAA6B,KAAK,KAAK,YAChG,KAAC,KAAK,IAAC,MAAM,QAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YACvF,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,KAAG,YACjC,KAAC,QAAQ,IACP,sBAAsB,EAAE,CAAC,EACzB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,EAChD,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACzD,GAAG,EAAE,OAAO,EACZ,eAAe,QACf,KAAK,EAAE,SAAS,EAChB,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KACzC,aAAa,GACjB,GACO,GACL,GACM,CACjB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -18,14 +18,14 @@
     "@xyo-network/api": "^2.20.33",
     "@xyo-network/core": "^2.20.33",
     "@xyo-network/network": "^2.20.33",
-    "@xyo-network/react-archive": "^2.25.22",
-    "@xyo-network/react-archivist-api": "^2.25.22",
-    "@xyo-network/react-auth-service": "^2.25.22",
-    "@xyo-network/react-network": "^2.25.22",
-    "@xyo-network/react-property": "^2.25.22",
-    "@xyo-network/react-schema": "^2.25.22",
-    "@xyo-network/react-shared": "^2.25.22",
-    "@xyo-network/react-theme": "^2.25.22",
+    "@xyo-network/react-archive": "^2.25.23",
+    "@xyo-network/react-archivist-api": "^2.25.23",
+    "@xyo-network/react-auth-service": "^2.25.23",
+    "@xyo-network/react-network": "^2.25.23",
+    "@xyo-network/react-property": "^2.25.23",
+    "@xyo-network/react-schema": "^2.25.23",
+    "@xyo-network/react-shared": "^2.25.23",
+    "@xyo-network/react-theme": "^2.25.23",
     "@xyo-network/utils": "^2.20.33",
     "lodash": "^4.17.21",
     "luxon": "^2.4.0",
@@ -114,6 +114,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.22",
+  "version": "2.25.23",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Details/JsonDetails.tsx

@@ -1,4 +1,4 @@
-import { useMediaQuery, useTheme } from '@mui/material'
+import { Paper, useMediaQuery, useTheme } from '@mui/material'
 import { FlexGrowRow } from '@xylabs/sdk-react'
 import { XyoPayload } from '@xyo-network/core'
 import { PropertyGroup, PropertyGroupProps } from '@xyo-network/react-property'
@@ -13,7 +13,7 @@ export type PayloadJsonDetailsProps = PropertyGroupProps & {
 }
 
 export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonViewProps, payload = {}, ...props }) => {
-  const { breakpoints } = useTheme()
+  const { breakpoints, palette } = useTheme()
   const belowSm = useMediaQuery(breakpoints.down('sm'))
 
   let elevation = 2
@@ -21,11 +21,24 @@ export const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({ jsonView
     elevation += props.elevation ?? 0
   }
 
+  const jsonTheme = palette.mode === 'dark' ? 'shapeshifter' : undefined
+
   return (
     <PropertyGroup titleProps={{ elevation }} title="JSON" tip="The raw JSON of the payload" {...props}>
-      <Suspense fallback={<FlexGrowRow />}>
-        <JsonView src={payload} enableClipboard collapseStringsAfterLength={belowSm ? 24 : 32} {...jsonViewProps} />
-      </Suspense>
+      <Paper square elevation={2} style={{ overflow: 'hidden', padding: '16px', width: '100%' }}>
+        <Suspense fallback={<FlexGrowRow />}>
+          <JsonView
+            groupArraysAfterLength={5}
+            shouldCollapse={(props) => props.name !== 'root'}
+            style={{ backgroundColor: undefined, overflow: 'hidden' }}
+            src={payload}
+            enableClipboard
+            theme={jsonTheme}
+            collapseStringsAfterLength={belowSm ? 24 : 32}
+            {...jsonViewProps}
+          />
+        </Suspense>
+      </Paper>
     </PropertyGroup>
   )
 }