@xyo-network/react-payload-details 5.0.0 → 5.0.2

package/dist/browser/index.mjs

@@ -195,14 +195,13 @@ var PayloadValidationDetails = /* @__PURE__ */ __name(({ skipBody = false, value
 }, "PayloadValidationDetails");
 
 // src/components/Details/Details.tsx
-var PayloadDetails = /* @__PURE__ */ __name(({ ref, paper, payload, ...props }) => {
+var PayloadDetails = /* @__PURE__ */ __name(({ paper, payload, ...props }) => {
   return /* @__PURE__ */ React5.createElement(FlexCol3, {
     gap: 1,
     justifyContent: "flex-start",
     alignItems: "stretch",
     marginTop: 2,
     marginBottom: 8,
-    ref,
     ...props
   }, /* @__PURE__ */ React5.createElement(PayloadDataDetails, {
     paper,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Details/DataDetails.tsx","../../src/components/Details/HashSourceDetails.tsx","../../src/components/Details/Details.tsx","../../src/components/Details/JsonDetails.tsx","../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { forget } from '@xylabs/forget'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle\n        ? null\n        : (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent=\"start\">\n          <Typography\n            padding={2}\n            fontFamily=\"monospace\"\n            variant=\"body1\"\n            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails = ({\n  ref, paper, payload, ...props\n}: PayloadDetailsProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} ref={ref} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints, palette } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const jsonTheme = palette.mode === 'dark' ? 'dark' : 'light'\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ backgroundColor: undefined, overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          theme={jsonTheme}\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error, index) => {\n                    return <Typography key={index}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":"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","names":["ContentCopy","ContentCopyIcon","Visibility","VisibilityIcon","Dialog","DialogActions","DialogContent","DialogTitle","forget","ButtonEx","PayloadHasher","Property","usePayloadHash","React","useState","ContentCopy","ContentCopyIcon","IconButton","Typography","useTheme","FlexCol","FlexGrowRow","FlexRow","QuickTipButton","PayloadHasher","React","PayloadHashSourceDetails","noTitle","payload","props","theme","useTheme","payloadString","JSON","stringify","PayloadHasher","hashFields","FlexCol","alignItems","FlexRow","margin","justifyContent","Typography","QuickTipButton","title","FlexGrowRow","background","border","borderColor","palette","divider","padding","fontFamily","variant","sx","overflowWrap","wordBreak","IconButton","ContentCopyIcon","PayloadDataDetails","size","badge","payload","props","payloadString","JSON","stringify","PayloadHasher","hashFields","viewSourceOpen","setViewSourceOpen","useState","hash","usePayloadHash","elevation","paper","actions","icon","React","VisibilityIcon","name","onClick","ContentCopyIcon","forget","navigator","clipboard","writeText","onCopy","Property","titleProps","title","value","tip","Dialog","open","onClose","DialogTitle","DialogContent","PayloadHashSourceDetails","noTitle","DialogActions","ButtonEx","color","FlexCol","React","Paper","useMediaQuery","useTheme","JsonViewerEx","PropertyGroup","React","PayloadJsonDetails","jsonViewProps","payload","props","breakpoints","palette","useTheme","belowSm","useMediaQuery","down","elevation","paper","jsonTheme","mode","React","PropertyGroup","titleProps","title","tip","Paper","square","variant","style","overflow","padding","width","JsonViewerEx","groupArraysAfterLength","backgroundColor","undefined","value","enableClipboard","theme","collapseStringsAfterLength","Typography","FlexCol","usePromise","PayloadValidator","Property","PropertyGroup","SchemaProperty","React","PayloadValidationDetails","skipBody","value","props","validateErrors","usePromise","PayloadValidator","validate","undefined","bodyErrors","errors","elevation","paper","React","PropertyGroup","titleProps","title","tip","Property","flexGrow","length","FlexCol","map","error","index","Typography","key","toString","schema","SchemaProperty","PayloadDetails","ref","paper","payload","props","React","FlexCol","gap","justifyContent","alignItems","marginTop","marginBottom","PayloadDataDetails","size","badge","PayloadValidationDetails","value","PayloadJsonDetails","displayName"]}
+{"version":3,"sources":["../../src/components/Details/DataDetails.tsx","../../src/components/Details/HashSourceDetails.tsx","../../src/components/Details/Details.tsx","../../src/components/Details/JsonDetails.tsx","../../src/components/Details/ValidationDetails/ValidationDetails.tsx"],"sourcesContent":["import { ContentCopy as ContentCopyIcon, Visibility as VisibilityIcon } from '@mui/icons-material'\nimport {\n  Dialog, DialogActions, DialogContent, DialogTitle,\n} from '@mui/material'\nimport { forget } from '@xylabs/forget'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { PropertyAction, PropertyProps } from '@xyo-network/react-property'\nimport { Property } from '@xyo-network/react-property'\nimport type { SizeProp } from '@xyo-network/react-shared'\nimport { usePayloadHash } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { PayloadHashSourceDetails } from './HashSourceDetails.tsx'\n\nexport type PayloadDataDetailsProps = PropertyProps & {\n  badge?: boolean\n  payload?: Payload\n  size?: SizeProp\n}\n\nexport const PayloadDataDetails: React.FC<PayloadDataDetailsProps> = ({\n  size, badge, payload, ...props\n}) => {\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  const [viewSourceOpen, setViewSourceOpen] = useState(false)\n  const hash = usePayloadHash(payload)\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const actions: PropertyAction[] = [\n    {\n      icon: <VisibilityIcon />,\n      name: 'View',\n      onClick: () => setViewSourceOpen(true),\n    },\n    {\n      icon: <ContentCopyIcon />,\n      name: 'Copy',\n      onClick: () => forget(navigator.clipboard.writeText(hash ?? '')),\n    },\n  ]\n\n  const onCopy = () => {\n    forget(navigator.clipboard.writeText(payloadString))\n  }\n\n  return (\n    <>\n      <Property\n        titleProps={{ elevation }}\n        badge={badge}\n        size={size}\n        actions={actions}\n        title=\"Payload Hash\"\n        value={hash ?? '<Unknown>'}\n        tip=\"This is the payload hash\"\n        {...props}\n      />\n      <Dialog open={viewSourceOpen} onClose={() => setViewSourceOpen(false)}>\n        <DialogTitle>Hash Source</DialogTitle>\n        <DialogContent>\n          <PayloadHashSourceDetails noTitle payload={payload} />\n        </DialogContent>\n        <DialogActions>\n          <ButtonEx color=\"secondary\" onClick={onCopy}>\n            Copy\n          </ButtonEx>\n          <ButtonEx color=\"secondary\" onClick={() => setViewSourceOpen(false)}>\n            Close\n          </ButtonEx>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n","import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'\nimport {\n  IconButton, Typography, useTheme,\n} from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n  FlexCol, FlexGrowRow, FlexRow,\n} from '@xylabs/react-flexbox'\nimport { QuickTipButton } from '@xylabs/react-quick-tip-button'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nexport interface PayloadHashSourceDetailsProps extends FlexBoxProps {\n  noTitle?: boolean\n  payload?: Payload\n}\n\nexport const PayloadHashSourceDetails: React.FC<PayloadHashSourceDetailsProps> = ({\n  noTitle = false, payload, ...props\n}) => {\n  const theme = useTheme()\n  const payloadString = payload ? JSON.stringify(PayloadHasher.hashFields(payload), null, 2) : ''\n\n  return (\n    <FlexCol alignItems=\"stretch\" {...props}>\n      {noTitle\n        ? null\n        : (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography>Hash Source</Typography>\n              <QuickTipButton title=\"Hash Source\">The actual string used to generate the hash (SHA256)</QuickTipButton>\n            </FlexRow>\n          )}\n      <FlexRow>\n        <FlexGrowRow background border={1} borderColor={theme.palette.divider} justifyContent=\"start\">\n          <Typography\n            padding={2}\n            fontFamily=\"monospace\"\n            variant=\"body1\"\n            sx={{ overflowWrap: 'break-word', wordBreak: 'break-all' }}\n          >\n            {payloadString}\n          </Typography>\n        </FlexGrowRow>\n        <IconButton>\n          <ContentCopyIcon />\n        </IconButton>\n      </FlexRow>\n      {noTitle\n        ? (\n            <FlexRow margin={1} justifyContent=\"flex-start\">\n              <Typography variant=\"body2\">\n                The actual string used to generate the hash (SHA256). This can be used to validate the hash manually.\n              </Typography>\n            </FlexRow>\n          )\n        : null}\n    </FlexCol>\n  )\n}\n","import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { Payload } from '@xyo-network/payload-model'\nimport React from 'react'\n\nimport { PayloadDataDetails } from './DataDetails.tsx'\nimport { PayloadJsonDetails } from './JsonDetails.tsx'\nimport { PayloadValidationDetails } from './ValidationDetails/index.ts'\n\nexport type WithPaper<T> = T & { paper: true }\nexport type WithoutPaper<T> = T & { paper?: false }\n\nexport type PayloadDetailsProps = FlexBoxProps & {\n  paper?: boolean\n  payload?: Payload\n}\n\nexport const PayloadDetails: React.FC<PayloadDetailsProps> = ({\n  paper, payload, ...props\n}) => {\n  return (\n    <FlexCol gap={1} justifyContent=\"flex-start\" alignItems=\"stretch\" marginTop={2} marginBottom={8} {...props}>\n      <PayloadDataDetails paper={paper} size=\"large\" badge payload={payload} />\n      <PayloadValidationDetails paper={paper} value={payload} />\n      <PayloadJsonDetails paper={paper} payload={payload} />\n    </FlexCol>\n  )\n}\n\nPayloadDetails.displayName = 'PayloadDetails'\n","import {\n  Paper, useMediaQuery, useTheme,\n} from '@mui/material'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type { JsonViewerExProps } from '@xyo-network/react-payload-raw-info'\nimport { JsonViewerEx } from '@xyo-network/react-payload-raw-info'\nimport type { PropertyGroupProps } from '@xyo-network/react-property'\nimport { PropertyGroup } from '@xyo-network/react-property'\nimport React from 'react'\n\nexport type PayloadJsonDetailsProps = PropertyGroupProps & {\n  jsonViewProps?: JsonViewerExProps\n  payload?: Payload\n}\n\nexport const PayloadJsonDetails: React.FC<PayloadJsonDetailsProps> = ({\n  jsonViewProps, payload, ...props\n}) => {\n  const { breakpoints, palette } = useTheme()\n  const belowSm = useMediaQuery(breakpoints.down('sm'))\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  const jsonTheme = palette.mode === 'dark' ? 'dark' : 'light'\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"JSON\" tip=\"The raw JSON of the payload\" {...props}>\n      <Paper\n        square\n        variant=\"elevation\"\n        style={{\n          overflow: 'hidden', padding: '16px', width: '100%',\n        }}\n      >\n        <JsonViewerEx\n          groupArraysAfterLength={20}\n          style={{ backgroundColor: undefined, overflow: 'hidden' }}\n          value={payload}\n          enableClipboard\n          theme={jsonTheme}\n          collapseStringsAfterLength={belowSm ? 24 : 32}\n          {...jsonViewProps}\n        />\n      </Paper>\n    </PropertyGroup>\n  )\n}\n","import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { usePromise } from '@xylabs/react-promise'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { Property, PropertyGroup } from '@xyo-network/react-property'\nimport { SchemaProperty } from '@xyo-network/react-schema'\nimport React from 'react'\n\nimport type { PayloadValidationDetailsProps } from './ValidationDetailsProps.ts'\n\nexport const PayloadValidationDetails: React.FC<PayloadValidationDetailsProps> = ({\n  skipBody = false, value, ...props\n}) => {\n  const [validateErrors] = usePromise(async () => (value ? await new PayloadValidator(value).validate() : undefined), [value])\n\n  const bodyErrors = skipBody ? [] : (validateErrors ?? [])\n  const errors: Error[] = [...bodyErrors]\n\n  let elevation = 2\n  if (props.paper) {\n    elevation += props.elevation ?? 0\n  }\n\n  return (\n    <PropertyGroup titleProps={{ elevation }} title=\"Validation\" tip=\"The results from validating the payload\" {...props}>\n      <Property\n        titleProps={{ elevation }}\n        flexGrow={1}\n        title=\"Valid\"\n        value={errors.length === 0 ? 'True' : 'False'}\n        tip={\n          errors.length > 0\n            ? (\n                <FlexCol>\n                  {errors.map((error, index) => {\n                    return <Typography key={index}>{error.toString()}</Typography>\n                  })}\n                </FlexCol>\n              )\n            : <Typography>No Errors</Typography>\n        }\n      />\n      {value?.schema && <SchemaProperty flexGrow={1} titleProps={{ elevation }} value={value.schema} />}\n    </PropertyGroup>\n  )\n}\n"],"mappings":"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","names":["ContentCopy","ContentCopyIcon","Visibility","VisibilityIcon","Dialog","DialogActions","DialogContent","DialogTitle","forget","ButtonEx","PayloadHasher","Property","usePayloadHash","React","useState","ContentCopy","ContentCopyIcon","IconButton","Typography","useTheme","FlexCol","FlexGrowRow","FlexRow","QuickTipButton","PayloadHasher","React","PayloadHashSourceDetails","noTitle","payload","props","theme","useTheme","payloadString","JSON","stringify","PayloadHasher","hashFields","FlexCol","alignItems","FlexRow","margin","justifyContent","Typography","QuickTipButton","title","FlexGrowRow","background","border","borderColor","palette","divider","padding","fontFamily","variant","sx","overflowWrap","wordBreak","IconButton","ContentCopyIcon","PayloadDataDetails","size","badge","payload","props","payloadString","JSON","stringify","PayloadHasher","hashFields","viewSourceOpen","setViewSourceOpen","useState","hash","usePayloadHash","elevation","paper","actions","icon","React","VisibilityIcon","name","onClick","ContentCopyIcon","forget","navigator","clipboard","writeText","onCopy","Property","titleProps","title","value","tip","Dialog","open","onClose","DialogTitle","DialogContent","PayloadHashSourceDetails","noTitle","DialogActions","ButtonEx","color","FlexCol","React","Paper","useMediaQuery","useTheme","JsonViewerEx","PropertyGroup","React","PayloadJsonDetails","jsonViewProps","payload","props","breakpoints","palette","useTheme","belowSm","useMediaQuery","down","elevation","paper","jsonTheme","mode","React","PropertyGroup","titleProps","title","tip","Paper","square","variant","style","overflow","padding","width","JsonViewerEx","groupArraysAfterLength","backgroundColor","undefined","value","enableClipboard","theme","collapseStringsAfterLength","Typography","FlexCol","usePromise","PayloadValidator","Property","PropertyGroup","SchemaProperty","React","PayloadValidationDetails","skipBody","value","props","validateErrors","usePromise","PayloadValidator","validate","undefined","bodyErrors","errors","elevation","paper","React","PropertyGroup","titleProps","title","tip","Property","flexGrow","length","FlexCol","map","error","index","Typography","key","toString","schema","SchemaProperty","PayloadDetails","paper","payload","props","React","FlexCol","gap","justifyContent","alignItems","marginTop","marginBottom","PayloadDataDetails","size","badge","PayloadValidationDetails","value","PayloadJsonDetails","displayName"]}

package/dist/types/components/Details/Details.d.ts

@@ -11,10 +11,5 @@ export type PayloadDetailsProps = FlexBoxProps & {
     paper?: boolean;
     payload?: Payload;
 };
-export declare const PayloadDetails: {
-    ({ ref, paper, payload, ...props }: PayloadDetailsProps & {
-        ref?: React.RefObject<HTMLDivElement | null>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const PayloadDetails: React.FC<PayloadDetailsProps>;
 //# sourceMappingURL=Details.d.ts.map

package/dist/types/components/Details/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc;wCAExB,mBAAmB,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KAAE;;CAQxE,CAAA"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,EAAE,IAAI,CAAA;CAAE,CAAA;AAC9C,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAEnD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-payload-details",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -37,24 +37,24 @@
     "./package.json": "./package.json"
   },
   "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
     "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
     "@xylabs/forget": "^4.6.0",
-    "@xylabs/react-button": "^6.0.0",
-    "@xylabs/react-flexbox": "^6.0.0",
-    "@xylabs/react-promise": "^6.0.0",
-    "@xylabs/react-quick-tip-button": "^6.0.0",
+    "@xylabs/react-button": "^6.0.4",
+    "@xylabs/react-flexbox": "^6.0.4",
+    "@xylabs/react-promise": "^6.0.4",
+    "@xylabs/react-quick-tip-button": "^6.0.4",
     "@xyo-network/hash": "^3.9.37",
     "@xyo-network/payload-model": "^3.9.37",
     "@xyo-network/payload-validator": "^3.9.37",
-    "@xyo-network/react-payload-raw-info": "^5.0.0",
-    "@xyo-network/react-property": "^5.0.0",
-    "@xyo-network/react-schema": "^5.0.0",
-    "@xyo-network/react-shared": "^5.0.0"
+    "@xyo-network/react-payload-raw-info": "^5.0.2",
+    "@xyo-network/react-property": "^5.0.2",
+    "@xyo-network/react-schema": "^5.0.2",
+    "@xyo-network/react-shared": "^5.0.2"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -64,9 +64,9 @@
     "@mui/styles": "^6.4.7",
     "@storybook/react": "^8.6.4",
     "@types/react": "^19.0.10",
-    "@xylabs/ts-scripts-yarn3": "^6.0.5",
-    "@xylabs/tsconfig-react": "^6.0.5",
-    "@xyo-network/react-storybook": "^5.0.0",
+    "@xylabs/ts-scripts-yarn3": "^6.0.8",
+    "@xylabs/tsconfig-react": "^6.0.8",
+    "@xyo-network/react-storybook": "^5.0.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.3.0",

package/src/components/Details/Details.tsx

@@ -15,11 +15,11 @@ export type PayloadDetailsProps = FlexBoxProps & {
   payload?: Payload
 }
 
-export const PayloadDetails = ({
-  ref, paper, payload, ...props
-}: PayloadDetailsProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
+export const PayloadDetails: React.FC<PayloadDetailsProps> = ({
+  paper, payload, ...props
+}) => {
   return (
-    <FlexCol gap={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} ref={ref} {...props}>
+    <FlexCol gap={1} justifyContent="flex-start" alignItems="stretch" marginTop={2} marginBottom={8} {...props}>
       <PayloadDataDetails paper={paper} size="large" badge payload={payload} />
       <PayloadValidationDetails paper={paper} value={payload} />
       <PayloadJsonDetails paper={paper} payload={payload} />