npm - @xyo-network/react-payload-table - Versions diffs - 2.64.0 → 2.64.1 - Mend

@xyo-network/react-payload-table 2.64.0 → 2.64.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/browser/components/DynamicTable/DynamicTableRow.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/DynamicTable/DynamicTableRow.tsx
 import {
   CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,
   ErrorOutlineRounded as ErrorOutlineRoundedIcon,
@@ -12,10 +12,46 @@ import { PayloadValidator } from "@xyo-network/payload-validator";
 import { useNetwork } from "@xyo-network/react-network";
 import { usePayloadRenderPluginResolver } from "@xyo-network/react-payload-plugin-resolver";
 import { HashTableCell, usePayloadHash } from "@xyo-network/react-shared";
-import {
-  payloadDynamicTableColumnConfigDefaults
-} from "./PayloadDynamicTableColumnConfig";
-const PayloadDynamicTableRow = ({
+// src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts
+var payloadDynamicTableColumnConfigDefaults = () => {
+  const xs = [
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const sm = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const md = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const lg = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Render", slug: "render", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const xl = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Render", slug: "render", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  return { lg, md, sm, xl, xs };
+};
+// src/components/DynamicTable/DynamicTableRow.tsx
+import { jsx } from "react/jsx-runtime";
+var PayloadDynamicTableRow = ({
   archive,
   columns = payloadDynamicTableColumnConfigDefaults(),
   exploreDomain,

package/dist/browser/components/DynamicTable/DynamicTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DynamicTable/DynamicTableRow.tsx"],"sourcesContent":["import {\n CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,\n ErrorOutlineRounded as ErrorOutlineRoundedIcon,\n WarningAmberRounded as WarningAmberRoundedIcon,\n} from '@mui/icons-material'\nimport { AvatarProps, TableCell, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { useBreakpoint } from '@xylabs/react-shared'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { useNetwork } from '@xyo-network/react-network'\nimport { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport { usePayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin-resolver'\nimport { HashTableCell, HashTableCellProps, usePayloadHash } from '@xyo-network/react-shared'\nimport { ComponentType } from 'react'\n\nimport {\n PayloadDynamicTableColumnConfig,\n payloadDynamicTableColumnConfigDefaults,\n PayloadDynamicTableColumnSlug,\n} from './PayloadDynamicTableColumnConfig'\n\nexport interface PayloadDynamicTableRowProps extends TableRowProps {\n archive?: string\n columns?: PayloadDynamicTableColumnConfig\n exploreDomain?: string\n network?: string\n payload?: Payload & { sources?: string[] }\n}\n\nexport const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({\n archive,\n columns = payloadDynamicTableColumnConfigDefaults(),\n exploreDomain,\n network: networkProp,\n payload,\n ...props\n}) => {\n const breakPoint = useBreakpoint()\n const payloadHash = usePayloadHash(payload)\n const { network } = useNetwork()\n const { resolver } = usePayloadRenderPluginResolver()\n const [validationErrors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])\n const isValid = validationErrors.length === 0\n const payloadFieldCount = payload ? Object.keys(PayloadHasher.hashFields(payload)).length : 0\n const hash: React.FC<HashTableCellProps> = (props) => (\n <HashTableCell\n key=\"hash\"\n align=\"left\"\n archive={archive}\n value={payloadHash}\n dataType=\"payload\"\n exploreDomain={exploreDomain}\n network={networkProp ?? network?.slug}\n {...props}\n />\n )\n\n const schema: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payload?.schema}\n </Typography>\n </TableCell>\n )\n\n const details: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payloadFieldCount}\n </Typography>\n </TableCell>\n )\n\n const render: React.FC<TableCellProps> = (props) => {\n const Render: ComponentType<PayloadRenderProps & TableCellProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.table.cell\n : undefined\n return Render ? <Render payload={payload} {...props} /> : <TableCell key=\"payloads\" align=\"left\" {...props}></TableCell>\n }\n\n const icon: React.FC<TableCellProps> = (props) => {\n const Avatar: ComponentType<PayloadRenderProps & AvatarProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.avatar.image\n : undefined\n\n return (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n {Avatar ? <Avatar payload={payload} /> : null}\n </TableCell>\n )\n }\n\n const valid: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"valid\" align=\"center\" {...props}>\n {isValid === undefined && payload != undefined ? (\n <WarningAmberRoundedIcon fontSize=\"small\" color=\"warning\" />\n ) : isValid === true ? (\n <CheckCircleOutlineRoundedIcon fontSize=\"small\" color=\"success\" />\n ) : isValid === false ? (\n <ErrorOutlineRoundedIcon color=\"error\" fontSize=\"small\" />\n ) : (\n //nbsp to keep row height consistent even when no data is provided for the row\n <Typography>  </Typography>\n )}\n </TableCell>\n )\n\n const tableCells: Record<PayloadDynamicTableColumnSlug, React.FC<TableCellProps>> = {\n details,\n hash,\n icon,\n render,\n schema,\n valid,\n }\n\n return breakPoint ? (\n <TableRow style={{ maxWidth: '100vw' }} {...props}>\n {columns[breakPoint]?.map((column) => {\n return column.slug ? tableCells[column.slug]({}) : null\n })}\n </TableRow>\n ) : null\n}\n"],"mappings":"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","names":["props"]}
1	+ {"version":3,"sources":["../../../../src/components/DynamicTable/DynamicTableRow.tsx","../../../../src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts"],"sourcesContent":["import {\n CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,\n ErrorOutlineRounded as ErrorOutlineRoundedIcon,\n WarningAmberRounded as WarningAmberRoundedIcon,\n} from '@mui/icons-material'\nimport { AvatarProps, TableCell, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { useBreakpoint } from '@xylabs/react-shared'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { useNetwork } from '@xyo-network/react-network'\nimport { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport { usePayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin-resolver'\nimport { HashTableCell, HashTableCellProps, usePayloadHash } from '@xyo-network/react-shared'\nimport { ComponentType } from 'react'\n\nimport {\n PayloadDynamicTableColumnConfig,\n payloadDynamicTableColumnConfigDefaults,\n PayloadDynamicTableColumnSlug,\n} from './PayloadDynamicTableColumnConfig'\n\nexport interface PayloadDynamicTableRowProps extends TableRowProps {\n archive?: string\n columns?: PayloadDynamicTableColumnConfig\n exploreDomain?: string\n network?: string\n payload?: Payload & { sources?: string[] }\n}\n\nexport const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({\n archive,\n columns = payloadDynamicTableColumnConfigDefaults(),\n exploreDomain,\n network: networkProp,\n payload,\n ...props\n}) => {\n const breakPoint = useBreakpoint()\n const payloadHash = usePayloadHash(payload)\n const { network } = useNetwork()\n const { resolver } = usePayloadRenderPluginResolver()\n const [validationErrors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])\n const isValid = validationErrors.length === 0\n const payloadFieldCount = payload ? Object.keys(PayloadHasher.hashFields(payload)).length : 0\n const hash: React.FC<HashTableCellProps> = (props) => (\n <HashTableCell\n key=\"hash\"\n align=\"left\"\n archive={archive}\n value={payloadHash}\n dataType=\"payload\"\n exploreDomain={exploreDomain}\n network={networkProp ?? network?.slug}\n {...props}\n />\n )\n\n const schema: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payload?.schema}\n </Typography>\n </TableCell>\n )\n\n const details: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payloadFieldCount}\n </Typography>\n </TableCell>\n )\n\n const render: React.FC<TableCellProps> = (props) => {\n const Render: ComponentType<PayloadRenderProps & TableCellProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.table.cell\n : undefined\n return Render ? <Render payload={payload} {...props} /> : <TableCell key=\"payloads\" align=\"left\" {...props}></TableCell>\n }\n\n const icon: React.FC<TableCellProps> = (props) => {\n const Avatar: ComponentType<PayloadRenderProps & AvatarProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.avatar.image\n : undefined\n\n return (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n {Avatar ? <Avatar payload={payload} /> : null}\n </TableCell>\n )\n }\n\n const valid: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"valid\" align=\"center\" {...props}>\n {isValid === undefined && payload != undefined ? (\n <WarningAmberRoundedIcon fontSize=\"small\" color=\"warning\" />\n ) : isValid === true ? (\n <CheckCircleOutlineRoundedIcon fontSize=\"small\" color=\"success\" />\n ) : isValid === false ? (\n <ErrorOutlineRoundedIcon color=\"error\" fontSize=\"small\" />\n ) : (\n //nbsp to keep row height consistent even when no data is provided for the row\n <Typography>  </Typography>\n )}\n </TableCell>\n )\n\n const tableCells: Record<PayloadDynamicTableColumnSlug, React.FC<TableCellProps>> = {\n details,\n hash,\n icon,\n render,\n schema,\n valid,\n }\n\n return breakPoint ? (\n <TableRow style={{ maxWidth: '100vw' }} {...props}>\n {columns[breakPoint]?.map((column) => {\n return column.slug ? tableCells[column.slug]({}) : null\n })}\n </TableRow>\n ) : null\n}\n","export type PayloadDynamicTableColumnSlug = 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n\nexport interface PayloadDynamicTableColumnHeadData {\n alignment?: 'left' \| 'center' \| 'right'\n name?: string\n slug?: 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n width?: string \| number\n}\n\nexport interface PayloadDynamicTableColumnConfig {\n xs?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n sm?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n md?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n lg?: PayloadDynamicTableColumnHeadData[]\n xl?: PayloadDynamicTableColumnHeadData[]\n}\n\nexport const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {\n const xs: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const sm: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const md: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const lg: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const xl: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n return { lg, md, sm, xl, xs }\n}\n"],"mappings":"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","names":["props"]}

package/dist/browser/components/DynamicTable/PayloadDynamicTableColumnConfig.js CHANGED Viewed

@@ -1,4 +1,5 @@
-const payloadDynamicTableColumnConfigDefaults = () => {
+// src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts
+var payloadDynamicTableColumnConfigDefaults = () => {
   const xs = [
     { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
     { alignment: "left", name: "Schema", slug: "schema", width: "50px" },

package/dist/browser/components/DynamicTable/PayloadDynamicTableColumnConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts"],"sourcesContent":["export type PayloadDynamicTableColumnSlug = 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n\nexport interface PayloadDynamicTableColumnHeadData {\n alignment?: 'left' \| 'center' \| 'right'\n name?: string\n slug?: 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n width?: string \| number\n}\n\nexport interface PayloadDynamicTableColumnConfig {\n xs?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n sm?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n md?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n lg?: PayloadDynamicTableColumnHeadData[]\n xl?: PayloadDynamicTableColumnHeadData[]\n}\n\nexport const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {\n const xs: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const sm: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const md: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const lg: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const xl: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n return { lg, md, sm, xl, xs }\n}\n"],"mappings":"AAoBO,~~MAAM~~,0CAA0C,MAAuC;AAC5F,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,SAAO,EAAE,IAAI,IAAI,IAAI,IAAI,GAAG;AAC9B;","names":[]}
1	+ {"version":3,"sources":["../../../../src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts"],"sourcesContent":["export type PayloadDynamicTableColumnSlug = 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n\nexport interface PayloadDynamicTableColumnHeadData {\n alignment?: 'left' \| 'center' \| 'right'\n name?: string\n slug?: 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n width?: string \| number\n}\n\nexport interface PayloadDynamicTableColumnConfig {\n xs?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n sm?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n md?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n lg?: PayloadDynamicTableColumnHeadData[]\n xl?: PayloadDynamicTableColumnHeadData[]\n}\n\nexport const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {\n const xs: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const sm: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const md: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const lg: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const xl: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n return { lg, md, sm, xl, xs }\n}\n"],"mappings":";AAoBO,IAAM,0CAA0C,MAAuC;AAC5F,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,QAAM,KAA0C;AAAA,IAC9C,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,QAAQ,MAAM,QAAQ,OAAO,OAAO;AAAA,IAC/D,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,UAAU,MAAM,UAAU,OAAO,OAAO;AAAA,IACnE,EAAE,WAAW,QAAQ,MAAM,SAAS,MAAM,SAAS,OAAO,OAAO;AAAA,EACnE;AACA,SAAO,EAAE,IAAI,IAAI,IAAI,IAAI,GAAG;AAC9B;","names":[]}

package/dist/browser/components/DynamicTable/Table.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/DynamicTable/Table.tsx
 import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from "@mui/icons-material";
 import {
   Alert,
@@ -6,20 +6,129 @@ import {
   IconButton,
   Table,
   TableBody,
-  TableCell,
+  TableCell as TableCell2,
   TableFooter,
   TableHead,
   TablePagination,
-  TableRow,
-  Typography,
+  TableRow as TableRow2,
+  Typography as Typography2,
   useTheme
 } from "@mui/material";
-import { useBreakpoint } from "@xylabs/react-shared";
+import { useBreakpoint as useBreakpoint2 } from "@xylabs/react-shared";
 import { ThrownErrorBoundary } from "@xyo-network/react-error";
 import { usePayloadHashes } from "@xyo-network/react-shared";
 import { useEffect, useMemo, useState } from "react";
-import { PayloadDynamicTableRow } from "./DynamicTableRow";
-import { payloadDynamicTableColumnConfigDefaults } from "./PayloadDynamicTableColumnConfig";
+// src/components/DynamicTable/DynamicTableRow.tsx
+import {
+  CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,
+  ErrorOutlineRounded as ErrorOutlineRoundedIcon,
+  WarningAmberRounded as WarningAmberRoundedIcon
+} from "@mui/icons-material";
+import { TableCell, TableRow, Typography } from "@mui/material";
+import { usePromise } from "@xylabs/react-promise";
+import { useBreakpoint } from "@xylabs/react-shared";
+import { PayloadHasher } from "@xyo-network/hash";
+import { PayloadValidator } from "@xyo-network/payload-validator";
+import { useNetwork } from "@xyo-network/react-network";
+import { usePayloadRenderPluginResolver } from "@xyo-network/react-payload-plugin-resolver";
+import { HashTableCell, usePayloadHash } from "@xyo-network/react-shared";
+// src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts
+var payloadDynamicTableColumnConfigDefaults = () => {
+  const xs = [
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const sm = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const md = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const lg = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Render", slug: "render", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  const xl = [
+    { alignment: "left", name: "Icon", slug: "icon", width: "50px" },
+    { alignment: "left", name: "Hash", slug: "hash", width: "100%" },
+    { alignment: "left", name: "Schema", slug: "schema", width: "50px" },
+    { alignment: "left", name: "Render", slug: "render", width: "50px" },
+    { alignment: "left", name: "Valid", slug: "valid", width: "50px" }
+  ];
+  return { lg, md, sm, xl, xs };
+};
+// src/components/DynamicTable/DynamicTableRow.tsx
+import { jsx } from "react/jsx-runtime";
+var PayloadDynamicTableRow = ({
+  archive,
+  columns = payloadDynamicTableColumnConfigDefaults(),
+  exploreDomain,
+  network: networkProp,
+  payload,
+  ...props
+}) => {
+  const breakPoint = useBreakpoint();
+  const payloadHash = usePayloadHash(payload);
+  const { network } = useNetwork();
+  const { resolver } = usePayloadRenderPluginResolver();
+  const [validationErrors = []] = usePromise(async () => payload ? await new PayloadValidator(payload).validate() : void 0, [payload]);
+  const isValid = validationErrors.length === 0;
+  const payloadFieldCount = payload ? Object.keys(PayloadHasher.hashFields(payload)).length : 0;
+  const hash = (props2) => /* @__PURE__ */ jsx(
+    HashTableCell,
+    {
+      align: "left",
+      archive,
+      value: payloadHash,
+      dataType: "payload",
+      exploreDomain,
+      network: networkProp ?? network?.slug,
+      ...props2
+    },
+    "hash"
+  );
+  const schema = (props2) => /* @__PURE__ */ jsx(TableCell, { align: "left", ...props2, children: /* @__PURE__ */ jsx(Typography, { fontFamily: "monospace", variant: "body2", noWrap: true, children: payload?.schema }) }, "payloads");
+  const details = (props2) => /* @__PURE__ */ jsx(TableCell, { align: "left", ...props2, children: /* @__PURE__ */ jsx(Typography, { fontFamily: "monospace", variant: "body2", noWrap: true, children: payloadFieldCount }) }, "payloads");
+  const render = (props2) => {
+    const Render = payload ? resolver?.resolve(payload)?.components.table.cell : void 0;
+    return Render ? /* @__PURE__ */ jsx(Render, { payload, ...props2 }) : /* @__PURE__ */ jsx(TableCell, { align: "left", ...props2 }, "payloads");
+  };
+  const icon = (props2) => {
+    const Avatar = payload ? resolver?.resolve(payload)?.components.avatar.image : void 0;
+    return /* @__PURE__ */ jsx(TableCell, { align: "left", ...props2, children: Avatar ? /* @__PURE__ */ jsx(Avatar, { payload }) : null }, "payloads");
+  };
+  const valid = (props2) => /* @__PURE__ */ jsx(TableCell, { align: "center", ...props2, children: isValid === void 0 && payload != void 0 ? /* @__PURE__ */ jsx(WarningAmberRoundedIcon, { fontSize: "small", color: "warning" }) : isValid === true ? /* @__PURE__ */ jsx(CheckCircleOutlineRoundedIcon, { fontSize: "small", color: "success" }) : isValid === false ? /* @__PURE__ */ jsx(ErrorOutlineRoundedIcon, { color: "error", fontSize: "small" }) : (
+    //nbsp to keep row height consistent even when no data is provided for the row
+    /* @__PURE__ */ jsx(Typography, { children: " \xA0" })
+  ) }, "valid");
+  const tableCells = {
+    details,
+    hash,
+    icon,
+    render,
+    schema,
+    valid
+  };
+  return breakPoint ? /* @__PURE__ */ jsx(TableRow, { style: { maxWidth: "100vw" }, ...props, children: columns[breakPoint]?.map((column) => {
+    return column.slug ? tableCells[column.slug]({}) : null;
+  }) }) : null;
+};
+// src/components/DynamicTable/Table.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function TablePaginationActions(props) {
   const theme = useTheme();
   const { count, page, rowsPerPage, onPageChange } = props;
@@ -36,13 +145,13 @@ function TablePaginationActions(props) {
     onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   };
   return /* @__PURE__ */ jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx(LastPageIcon, {}) : /* @__PURE__ */ jsx(FirstPageIcon, {}) }),
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx(KeyboardArrowRight, {}) : /* @__PURE__ */ jsx(KeyboardArrowLeft, {}) }),
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx(KeyboardArrowLeft, {}) : /* @__PURE__ */ jsx(KeyboardArrowRight, {}) }),
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx(FirstPageIcon, {}) : /* @__PURE__ */ jsx(LastPageIcon, {}) })
+    /* @__PURE__ */ jsx2(IconButton, { onClick: handleFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx2(LastPageIcon, {}) : /* @__PURE__ */ jsx2(FirstPageIcon, {}) }),
+    /* @__PURE__ */ jsx2(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx2(KeyboardArrowRight, {}) : /* @__PURE__ */ jsx2(KeyboardArrowLeft, {}) }),
+    /* @__PURE__ */ jsx2(IconButton, { onClick: handleNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx2(KeyboardArrowLeft, {}) : /* @__PURE__ */ jsx2(KeyboardArrowRight, {}) }),
+    /* @__PURE__ */ jsx2(IconButton, { onClick: handleLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === "rtl" ? /* @__PURE__ */ jsx2(FirstPageIcon, {}) : /* @__PURE__ */ jsx2(LastPageIcon, {}) })
   ] });
 }
-const PayloadDynamicTable = ({
+var PayloadDynamicTable = ({
   archive,
   children,
   columns = payloadDynamicTableColumnConfigDefaults(),
@@ -52,7 +161,7 @@ const PayloadDynamicTable = ({
   payloads,
   ...props
 }) => {
-  const breakPoint = useBreakpoint();
+  const breakPoint = useBreakpoint2();
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
   const payloadCount = payloads ? payloads.length : 0;
@@ -70,20 +179,20 @@ const PayloadDynamicTable = ({
     setPage(0);
   };
   return breakPoint ? /* @__PURE__ */ jsxs(Table, { stickyHeader: true, ...props, children: [
-    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns[breakPoint]?.map((column, index) => {
-      return /* @__PURE__ */ jsx(TableCell, { align: column.alignment ?? "left", width: column.width, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: column.name }) }, index);
+    /* @__PURE__ */ jsx2(TableHead, { children: /* @__PURE__ */ jsx2(TableRow2, { children: columns[breakPoint]?.map((column, index) => {
+      return /* @__PURE__ */ jsx2(TableCell2, { align: column.alignment ?? "left", width: column.width, children: /* @__PURE__ */ jsx2(Typography2, { variant: "body2", noWrap: true, children: column.name }) }, index);
     }) }) }),
     /* @__PURE__ */ jsxs(TableBody, { sx: { overflowY: "scroll " }, children: [
       payloadPairs?.map(([payload, hash], index) => {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           ThrownErrorBoundary,
           {
             boundaryName: "PayloadTableBody",
             errorComponent: (e) => /* @__PURE__ */ jsxs(Alert, { severity: "error", children: [
               "Error Loading Payload: ",
-              /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: e.message })
+              /* @__PURE__ */ jsx2(Typography2, { fontWeight: "bold", children: e.message })
             ] }),
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx2(
               PayloadDynamicTableRow,
               {
                 archive,
@@ -99,9 +208,9 @@ const PayloadDynamicTable = ({
         );
       }),
       children,
-      emptyRows > 0 && Array(emptyRows).fill(/* @__PURE__ */ jsx(PayloadDynamicTableRow, {}))
+      emptyRows > 0 && Array(emptyRows).fill(/* @__PURE__ */ jsx2(PayloadDynamicTableRow, {}))
     ] }),
-    /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(TableFooter, { children: /* @__PURE__ */ jsx2(TableRow2, { children: /* @__PURE__ */ jsx2(
       TablePagination,
       {
         rowsPerPageOptions: [5, 10, 25, { label: "All", value: -1 }],

package/dist/browser/components/DynamicTable/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DynamicTable/Table.tsx"],"sourcesContent":["import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n IconButton,\n Table,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TablePagination,\n TableProps,\n TableRow,\n Typography,\n useTheme,\n} from '@mui/material'\nimport { useBreakpoint } from '@xylabs/react-shared'\nimport { Payload } from '@xyo-network/payload-model'\nimport { ThrownErrorBoundary } from '@xyo-network/react-error'\nimport { usePayloadHashes } from '@xyo-network/react-shared'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport { PayloadDynamicTableRow } from './DynamicTableRow'\nimport { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'\n\nexport interface PayloadDynamicTableProps extends TableProps {\n archive?: string\n columns?: PayloadDynamicTableColumnConfig\n exploreDomain?: string\n onRowClick?: (value: Payload) => void\n payloads?: Payload[] \| null\n rowsPerPage?: number\n}\n\ninterface TablePaginationActionsProps {\n count: number\n onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void\n page: number\n rowsPerPage: number\n}\n\nfunction TablePaginationActions(props: TablePaginationActionsProps) {\n const theme = useTheme()\n const { count, page, rowsPerPage, onPageChange } = props\n\n const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, 0)\n }\n\n const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, page - 1)\n }\n\n const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, page + 1)\n }\n\n const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))\n }\n\n return (\n <Box sx={{ flexShrink: 0, ml: 2.5 }}>\n <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label=\"first page\">\n {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}\n </IconButton>\n <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label=\"previous page\">\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n </IconButton>\n <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label=\"next page\">\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </IconButton>\n <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label=\"last page\">\n {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}\n </IconButton>\n </Box>\n )\n}\n\nexport const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({\n archive,\n children,\n columns = payloadDynamicTableColumnConfigDefaults(),\n exploreDomain,\n onRowClick,\n rowsPerPage: rowsPerPageProp = 10,\n payloads,\n ...props\n}) => {\n const breakPoint = useBreakpoint()\n const [page, setPage] = useState(0)\n const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)\n const payloadCount = payloads ? payloads.length : 0\n // Avoid a layout jump when reaching the last page with empty rows.\n const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0\n\n const pagedPayloads = useMemo(() => payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [payloads, page, rowsPerPage])\n\n const payloadPairs = usePayloadHashes(pagedPayloads)\n\n useEffect(() => {\n setRowsPerPage(rowsPerPageProp)\n }, [rowsPerPageProp])\n\n const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> \| null, newPage: number) => {\n setPage(newPage)\n }\n\n const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n setRowsPerPage(parseInt(event.target.value, 10))\n setPage(0)\n }\n\n return breakPoint ? (\n <Table stickyHeader {...props}>\n <TableHead>\n <TableRow>\n {columns[breakPoint]?.map((column, index) => {\n return (\n <TableCell key={index} align={column.alignment ?? 'left'} width={column.width}>\n <Typography variant=\"body2\" noWrap>\n {column.name}\n </Typography>\n </TableCell>\n )\n })}\n </TableRow>\n </TableHead>\n <TableBody sx={{ overflowY: 'scroll ' }}>\n {payloadPairs?.map(([payload, hash], index) => {\n return (\n <ThrownErrorBoundary\n boundaryName=\"PayloadTableBody\"\n key={`${hash}-${index}`}\n errorComponent={(e) => (\n <Alert severity=\"error\">\n Error Loading Payload: <Typography fontWeight=\"bold\">{e.message}</Typography>\n </Alert>\n )}\n >\n <PayloadDynamicTableRow\n archive={archive}\n onClick={\n onRowClick\n ? () => {\n onRowClick(payload)\n }\n : undefined\n }\n exploreDomain={exploreDomain}\n payload={payload}\n />\n </ThrownErrorBoundary>\n )\n })}\n {children}\n {emptyRows > 0 && Array(emptyRows).fill(<PayloadDynamicTableRow />)}\n </TableBody>\n <TableFooter>\n <TableRow>\n <TablePagination\n rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}\n colSpan={5}\n count={payloadCount}\n rowsPerPage={rowsPerPage}\n page={page}\n SelectProps={{\n inputProps: {\n 'aria-label': 'rows per page',\n },\n native: true,\n }}\n onPageChange={handleChangePage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n ActionsComponent={TablePaginationActions}\n />\n </TableRow>\n </TableFooter>\n </Table>\n ) : null\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/components/DynamicTable/Table.tsx","../../../../src/components/DynamicTable/DynamicTableRow.tsx","../../../../src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts"],"sourcesContent":["import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'\nimport {\n Alert,\n Box,\n IconButton,\n Table,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TablePagination,\n TableProps,\n TableRow,\n Typography,\n useTheme,\n} from '@mui/material'\nimport { useBreakpoint } from '@xylabs/react-shared'\nimport { Payload } from '@xyo-network/payload-model'\nimport { ThrownErrorBoundary } from '@xyo-network/react-error'\nimport { usePayloadHashes } from '@xyo-network/react-shared'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport { PayloadDynamicTableRow } from './DynamicTableRow'\nimport { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig'\n\nexport interface PayloadDynamicTableProps extends TableProps {\n archive?: string\n columns?: PayloadDynamicTableColumnConfig\n exploreDomain?: string\n onRowClick?: (value: Payload) => void\n payloads?: Payload[] \| null\n rowsPerPage?: number\n}\n\ninterface TablePaginationActionsProps {\n count: number\n onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void\n page: number\n rowsPerPage: number\n}\n\nfunction TablePaginationActions(props: TablePaginationActionsProps) {\n const theme = useTheme()\n const { count, page, rowsPerPage, onPageChange } = props\n\n const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, 0)\n }\n\n const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, page - 1)\n }\n\n const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, page + 1)\n }\n\n const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))\n }\n\n return (\n <Box sx={{ flexShrink: 0, ml: 2.5 }}>\n <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label=\"first page\">\n {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}\n </IconButton>\n <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label=\"previous page\">\n {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}\n </IconButton>\n <IconButton onClick={handleNextButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label=\"next page\">\n {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}\n </IconButton>\n <IconButton onClick={handleLastPageButtonClick} disabled={page >= Math.ceil(count / rowsPerPage) - 1} aria-label=\"last page\">\n {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}\n </IconButton>\n </Box>\n )\n}\n\nexport const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({\n archive,\n children,\n columns = payloadDynamicTableColumnConfigDefaults(),\n exploreDomain,\n onRowClick,\n rowsPerPage: rowsPerPageProp = 10,\n payloads,\n ...props\n}) => {\n const breakPoint = useBreakpoint()\n const [page, setPage] = useState(0)\n const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)\n const payloadCount = payloads ? payloads.length : 0\n // Avoid a layout jump when reaching the last page with empty rows.\n const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - payloadCount) : 0\n\n const pagedPayloads = useMemo(() => payloads?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), [payloads, page, rowsPerPage])\n\n const payloadPairs = usePayloadHashes(pagedPayloads)\n\n useEffect(() => {\n setRowsPerPage(rowsPerPageProp)\n }, [rowsPerPageProp])\n\n const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> \| null, newPage: number) => {\n setPage(newPage)\n }\n\n const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n setRowsPerPage(parseInt(event.target.value, 10))\n setPage(0)\n }\n\n return breakPoint ? (\n <Table stickyHeader {...props}>\n <TableHead>\n <TableRow>\n {columns[breakPoint]?.map((column, index) => {\n return (\n <TableCell key={index} align={column.alignment ?? 'left'} width={column.width}>\n <Typography variant=\"body2\" noWrap>\n {column.name}\n </Typography>\n </TableCell>\n )\n })}\n </TableRow>\n </TableHead>\n <TableBody sx={{ overflowY: 'scroll ' }}>\n {payloadPairs?.map(([payload, hash], index) => {\n return (\n <ThrownErrorBoundary\n boundaryName=\"PayloadTableBody\"\n key={`${hash}-${index}`}\n errorComponent={(e) => (\n <Alert severity=\"error\">\n Error Loading Payload: <Typography fontWeight=\"bold\">{e.message}</Typography>\n </Alert>\n )}\n >\n <PayloadDynamicTableRow\n archive={archive}\n onClick={\n onRowClick\n ? () => {\n onRowClick(payload)\n }\n : undefined\n }\n exploreDomain={exploreDomain}\n payload={payload}\n />\n </ThrownErrorBoundary>\n )\n })}\n {children}\n {emptyRows > 0 && Array(emptyRows).fill(<PayloadDynamicTableRow />)}\n </TableBody>\n <TableFooter>\n <TableRow>\n <TablePagination\n rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}\n colSpan={5}\n count={payloadCount}\n rowsPerPage={rowsPerPage}\n page={page}\n SelectProps={{\n inputProps: {\n 'aria-label': 'rows per page',\n },\n native: true,\n }}\n onPageChange={handleChangePage}\n onRowsPerPageChange={handleChangeRowsPerPage}\n ActionsComponent={TablePaginationActions}\n />\n </TableRow>\n </TableFooter>\n </Table>\n ) : null\n}\n","import {\n CheckCircleOutlineRounded as CheckCircleOutlineRoundedIcon,\n ErrorOutlineRounded as ErrorOutlineRoundedIcon,\n WarningAmberRounded as WarningAmberRoundedIcon,\n} from '@mui/icons-material'\nimport { AvatarProps, TableCell, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { useBreakpoint } from '@xylabs/react-shared'\nimport { PayloadHasher } from '@xyo-network/hash'\nimport { Payload } from '@xyo-network/payload-model'\nimport { PayloadValidator } from '@xyo-network/payload-validator'\nimport { useNetwork } from '@xyo-network/react-network'\nimport { PayloadRenderProps } from '@xyo-network/react-payload-plugin'\nimport { usePayloadRenderPluginResolver } from '@xyo-network/react-payload-plugin-resolver'\nimport { HashTableCell, HashTableCellProps, usePayloadHash } from '@xyo-network/react-shared'\nimport { ComponentType } from 'react'\n\nimport {\n PayloadDynamicTableColumnConfig,\n payloadDynamicTableColumnConfigDefaults,\n PayloadDynamicTableColumnSlug,\n} from './PayloadDynamicTableColumnConfig'\n\nexport interface PayloadDynamicTableRowProps extends TableRowProps {\n archive?: string\n columns?: PayloadDynamicTableColumnConfig\n exploreDomain?: string\n network?: string\n payload?: Payload & { sources?: string[] }\n}\n\nexport const PayloadDynamicTableRow: React.FC<PayloadDynamicTableRowProps> = ({\n archive,\n columns = payloadDynamicTableColumnConfigDefaults(),\n exploreDomain,\n network: networkProp,\n payload,\n ...props\n}) => {\n const breakPoint = useBreakpoint()\n const payloadHash = usePayloadHash(payload)\n const { network } = useNetwork()\n const { resolver } = usePayloadRenderPluginResolver()\n const [validationErrors = []] = usePromise(async () => (payload ? await new PayloadValidator(payload).validate() : undefined), [payload])\n const isValid = validationErrors.length === 0\n const payloadFieldCount = payload ? Object.keys(PayloadHasher.hashFields(payload)).length : 0\n const hash: React.FC<HashTableCellProps> = (props) => (\n <HashTableCell\n key=\"hash\"\n align=\"left\"\n archive={archive}\n value={payloadHash}\n dataType=\"payload\"\n exploreDomain={exploreDomain}\n network={networkProp ?? network?.slug}\n {...props}\n />\n )\n\n const schema: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payload?.schema}\n </Typography>\n </TableCell>\n )\n\n const details: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n <Typography fontFamily=\"monospace\" variant=\"body2\" noWrap>\n {payloadFieldCount}\n </Typography>\n </TableCell>\n )\n\n const render: React.FC<TableCellProps> = (props) => {\n const Render: ComponentType<PayloadRenderProps & TableCellProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.table.cell\n : undefined\n return Render ? <Render payload={payload} {...props} /> : <TableCell key=\"payloads\" align=\"left\" {...props}></TableCell>\n }\n\n const icon: React.FC<TableCellProps> = (props) => {\n const Avatar: ComponentType<PayloadRenderProps & AvatarProps> \| undefined = payload\n ? resolver?.resolve(payload)?.components.avatar.image\n : undefined\n\n return (\n <TableCell key=\"payloads\" align=\"left\" {...props}>\n {Avatar ? <Avatar payload={payload} /> : null}\n </TableCell>\n )\n }\n\n const valid: React.FC<TableCellProps> = (props) => (\n <TableCell key=\"valid\" align=\"center\" {...props}>\n {isValid === undefined && payload != undefined ? (\n <WarningAmberRoundedIcon fontSize=\"small\" color=\"warning\" />\n ) : isValid === true ? (\n <CheckCircleOutlineRoundedIcon fontSize=\"small\" color=\"success\" />\n ) : isValid === false ? (\n <ErrorOutlineRoundedIcon color=\"error\" fontSize=\"small\" />\n ) : (\n //nbsp to keep row height consistent even when no data is provided for the row\n <Typography>  </Typography>\n )}\n </TableCell>\n )\n\n const tableCells: Record<PayloadDynamicTableColumnSlug, React.FC<TableCellProps>> = {\n details,\n hash,\n icon,\n render,\n schema,\n valid,\n }\n\n return breakPoint ? (\n <TableRow style={{ maxWidth: '100vw' }} {...props}>\n {columns[breakPoint]?.map((column) => {\n return column.slug ? tableCells[column.slug]({}) : null\n })}\n </TableRow>\n ) : null\n}\n","export type PayloadDynamicTableColumnSlug = 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n\nexport interface PayloadDynamicTableColumnHeadData {\n alignment?: 'left' \| 'center' \| 'right'\n name?: string\n slug?: 'hash' \| 'schema' \| 'valid' \| 'details' \| 'render' \| 'icon'\n width?: string \| number\n}\n\nexport interface PayloadDynamicTableColumnConfig {\n xs?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n sm?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n md?: PayloadDynamicTableColumnHeadData[]\n // eslint-disable-next-line @typescript-eslint/member-ordering\n lg?: PayloadDynamicTableColumnHeadData[]\n xl?: PayloadDynamicTableColumnHeadData[]\n}\n\nexport const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {\n const xs: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const sm: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const md: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const lg: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n const xl: PayloadDynamicTableColumnHeadData[] = [\n { alignment: 'left', name: 'Icon', slug: 'icon', width: '50px' },\n { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },\n { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },\n { alignment: 'left', name: 'Render', slug: 'render', width: '50px' },\n { alignment: 'left', name: 'Valid', slug: 'valid', width: '50px' },\n ]\n return { lg, md, sm, xl, xs }\n}\n"],"mappings":"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","names":["TableCell","TableRow","Typography","useBreakpoint","props","jsx","useBreakpoint","TableRow","TableCell","Typography"]}