@xyo-network/react-payload-table 3.0.1 → 3.0.3

package/src/components/DynamicTable/PayloadDynamicTableColumnConfig.ts

@@ -20,35 +20,79 @@ export interface PayloadDynamicTableColumnConfig {
 
 export const payloadDynamicTableColumnConfigDefaults = (): PayloadDynamicTableColumnConfig => {
   const xs: PayloadDynamicTableColumnHeadData[] = [
-    { alignment: 'left', name: 'Hash', slug: 'hash', width: '100%' },
-    { alignment: 'left', name: 'Schema', slug: 'schema', width: '50px' },
-    { alignment: 'left', name: 'Valid', slug: 'valid', 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 sm: PayloadDynamicTableColumnHeadData[] = [
-    { 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' },
+    {
+      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: PayloadDynamicTableColumnHeadData[] = [
-    { 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' },
+    {
+      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: PayloadDynamicTableColumnHeadData[] = [
-    { 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' },
+    {
+      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: PayloadDynamicTableColumnHeadData[] = [
-    { 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' },
+    {
+      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 }
+  return {
+    lg, md, sm, xl, xs,
+  }
 }

package/src/components/DynamicTable/Table.tsx

@@ -1,4 +1,7 @@
-import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'
+import {
+  FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
+} from '@mui/icons-material'
+import type { TableProps } from '@mui/material'
 import {
   Alert,
   Box,
@@ -9,19 +12,22 @@ import {
   TableFooter,
   TableHead,
   TablePagination,
-  TableProps,
   TableRow,
   Typography,
   useTheme,
 } from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
-import { Payload } from '@xyo-network/payload-model'
+import type { Payload } from '@xyo-network/payload-model'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
-import React, { ReactNode, useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { PayloadDynamicTableRow } from './DynamicTableRow.tsx'
-import { PayloadDynamicTableColumnConfig, payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig.ts'
+import type { PayloadDynamicTableColumnConfig } from './PayloadDynamicTableColumnConfig.ts'
+import { payloadDynamicTableColumnConfigDefaults } from './PayloadDynamicTableColumnConfig.ts'
 
 export interface PayloadDynamicTableProps extends TableProps {
   archive?: string
@@ -41,7 +47,9 @@ interface TablePaginationActionsProps {
 
 function TablePaginationActions(props: TablePaginationActionsProps) {
   const theme = useTheme()
-  const { count, page, rowsPerPage, onPageChange } = props
+  const {
+    count, page, rowsPerPage, onPageChange,
+  } = props
 
   const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     onPageChange(event, 0)
@@ -176,9 +184,7 @@ export const PayloadDynamicTable: React.FC<PayloadDynamicTableProps> = ({
                 rowsPerPage={rowsPerPage}
                 page={page}
                 SelectProps={{
-                  inputProps: {
-                    'aria-label': 'rows per page',
-                  },
+                  inputProps: { 'aria-label': 'rows per page' },
                   native: true,
                 }}
                 onPageChange={handleChangePage}

package/src/components/Table/FetchMoreTable.stories.tsx

@@ -1,7 +1,9 @@
 import { Button, Typography } from '@mui/material'
-import { Decorator, Meta, StoryFn } from '@storybook/react'
+import type {
+  Decorator, Meta, StoryFn,
+} from '@storybook/react'
 import { delay } from '@xylabs/delay'
-import { Payload } from '@xyo-network/payload-model'
+import type { Payload } from '@xyo-network/payload-model'
 import { useEvent } from '@xyo-network/react-event'
 import React, { useEffect, useState } from 'react'
 import { BrowserRouter } from 'react-router-dom'
@@ -12,7 +14,9 @@ const newPayloads = () =>
   Array(50)
     // eslint-disable-next-line unicorn/no-useless-undefined
     .fill(undefined)
-    .map((_, index) => ({ index, random: Math.random(), schema: 'network.xyo.stories.test' }))
+    .map((_, index) => ({
+      index, random: Math.random(), schema: 'network.xyo.stories.test',
+    }))
 
 // simulating the end of the list
 const maxPayloads = 200
@@ -31,9 +35,10 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
 
   useEffect(() => {
     // simulate initial async payloads
-    setTimeout(() => {
+    const timeout = setTimeout(() => {
       addToTotalPayloads(testPayloads)
     }, 500)
+    return () => clearTimeout(timeout)
   }, [])
 
   const addPayloads = () => {
@@ -73,11 +78,7 @@ const NewPayloadsDecorator: Decorator = (Story, args) => {
 const StorybookEntry = {
   argTypes: {},
   component: PayloadTable,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'payload/FetchMoreTable',
 } as Meta<typeof PayloadTable>
 

package/src/components/Table/PayloadTableColumnConfig.ts

@@ -23,5 +23,7 @@ export const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig =>
   const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
   const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
   const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']
-  return { lg, md, sm, xl, xs }
+  return {
+    lg, md, sm, xl, xs,
+  }
 }

package/src/components/Table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import { Chip } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
-import { Payload } from '@xyo-network/payload-model'
+import type { Meta, StoryFn } from '@storybook/react'
+import type { Payload } from '@xyo-network/payload-model'
 import { useEvent } from '@xyo-network/react-event'
 import { sampleIdPayload, sampleSystemInfoBrowserPayload } from '@xyo-network/react-storybook'
 import React, { useState } from 'react'
@@ -11,11 +11,7 @@ import { PayloadTable } from './Table.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: PayloadTable,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'payload/Table',
 } as Meta<typeof PayloadTable>
 
@@ -55,9 +51,7 @@ const payloads: Payload[] = [
 ]
 
 const WithData = Template.bind({})
-WithData.args = {
-  payloads,
-}
+WithData.args = { payloads }
 
 const WithOutStickyHeaderFooter = Template.bind({})
 WithOutStickyHeaderFooter.args = {
@@ -72,8 +66,11 @@ WithDataAndMaxSchemaDepth.args = {
 }
 
 const WithInvalid = Template.bind({})
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { schema, ...badPayload } = sampleIdPayload
+
+const {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  schema, ...badPayload
+} = sampleIdPayload
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -85,6 +82,8 @@ WithNoResults.args = { payloads: [] }
 const WithLoading = Template.bind({})
 WithLoading.args = { loading: true, payloads: [] }
 
-export { Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter }
+export {
+  Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter,
+}
 
 export default StorybookEntry

package/src/components/Table/Table.tsx

@@ -1,14 +1,20 @@
-import { Hash } from '@xylabs/hex'
-import { Payload } from '@xyo-network/payload-model'
-import { TableEx, TableExProps } from '@xyo-network/react-table'
-import React, { ComponentType, forwardRef, useEffect, useMemo, useState } from 'react'
+import type { Hash } from '@xylabs/hex'
+import type { Payload } from '@xyo-network/payload-model'
+import type { TableExProps } from '@xyo-network/react-table'
+import { TableEx } from '@xyo-network/react-table'
+import type { ComponentType } from 'react'
+import React, {
+  forwardRef, useEffect, useMemo, useState,
+} from 'react'
 
-import { PayloadTableColumnConfig } from './PayloadTableColumnConfig.ts'
+import type { PayloadTableColumnConfig } from './PayloadTableColumnConfig.ts'
 import { PayloadTableBody } from './TableBody.tsx'
 import { PayloadTableFooter } from './TableFooter.tsx'
 import { PayloadTableHead } from './TableHead.tsx'
 import { TableRowNoData } from './TableRowNoData.tsx'
-import { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types/index.ts'
+import type {
+  PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps,
+} from './types/index.ts'
 
 export interface PayloadTableProps extends TableExProps {
   PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>

package/src/components/Table/TableBody.tsx

@@ -1,10 +1,13 @@
-import { Alert, TableBody, Typography } from '@mui/material'
+import {
+  Alert, TableBody, Typography,
+} from '@mui/material'
 import { ThrownErrorBoundary } from '@xyo-network/react-error'
 import { usePayloadHashes } from '@xyo-network/react-shared'
-import React, { ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import React from 'react'
 
 import { PayloadTableRow } from './TableRow.tsx'
-import { PayloadTableBodyProps } from './types/index.ts'
+import type { PayloadTableBodyProps } from './types/index.ts'
 
 export const PayloadTableBody: React.FC<PayloadTableBodyProps> = ({
   children,

package/src/components/Table/TableFooter.tsx

@@ -1,9 +1,11 @@
-import { styled, TablePagination, TableRow } from '@mui/material'
+import {
+  styled, TablePagination, TableRow,
+} from '@mui/material'
 import { TableFooterEx } from '@xyo-network/react-table'
 import React from 'react'
 
 import { TablePaginationActions } from './TablePagination.tsx'
-import { PayloadTableFooterProps } from './types/index.ts'
+import type { PayloadTableFooterProps } from './types/index.ts'
 
 export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
   count,
@@ -23,9 +25,7 @@ export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
         rowsPerPage={rowsPerPage ?? 10}
         page={page ?? 0}
         SelectProps={{
-          inputProps: {
-            'aria-label': 'rows per page',
-          },
+          inputProps: { 'aria-label': 'rows per page' },
           native: true,
         }}
         onPageChange={handleChangePage ?? (() => {})}
@@ -38,9 +38,7 @@ export const PayloadTableFooter: React.FC<PayloadTableFooterProps> = ({
 )
 
 const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
-  '& > .MuiToolbar-root': {
-    paddingLeft: theme.spacing(1),
-  },
+  '& > .MuiToolbar-root': { paddingLeft: theme.spacing(1) },
   'borderTop': '1px solid',
   'borderTopColor': theme.palette.divider,
 }))

package/src/components/Table/TableHead.tsx

@@ -1,9 +1,11 @@
-import { TableCell, TableHead, TableRow, Typography } from '@mui/material'
+import {
+  TableCell, TableHead, TableRow, Typography,
+} from '@mui/material'
 import { useBreakpoint } from '@xylabs/react-shared'
 import React, { useMemo } from 'react'
 
 import { payloadColumnNames, payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.ts'
-import { PayloadTableHeadProps } from './types/index.ts'
+import type { PayloadTableHeadProps } from './types/index.ts'
 
 export const PayloadTableHead: React.FC<PayloadTableHeadProps> = ({ columns, ...props }) => {
   const breakPoint = useBreakpoint()

package/src/components/Table/TablePagination.tsx

@@ -1,9 +1,13 @@
-import { FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon } from '@mui/icons-material'
-import { Box, CircularProgress, IconButton, useTheme } from '@mui/material'
+import {
+  FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, LastPage as LastPageIcon,
+} from '@mui/icons-material'
+import {
+  Box, CircularProgress, IconButton, useTheme,
+} from '@mui/material'
 import { useEvent } from '@xyo-network/react-event'
 import React from 'react'
 
-import { PaginationNouns } from './types/index.ts'
+import type { PaginationNouns } from './types/index.ts'
 
 export interface TablePaginationActionsProps {
   count: number
@@ -14,7 +18,9 @@ export interface TablePaginationActionsProps {
   rowsPerPage: number
 }
 
-export function TablePaginationActions({ count, enableNextPage, loading, onPageChange, page, rowsPerPage }: TablePaginationActionsProps) {
+export function TablePaginationActions({
+  count, enableNextPage, loading, onPageChange, page, rowsPerPage,
+}: TablePaginationActionsProps) {
   const theme = useTheme()
   const [paginationRef, paginationDispatch] = useEvent<HTMLButtonElement, PaginationNouns>()
 
@@ -41,7 +47,14 @@ export function TablePaginationActions({ count, enableNextPage, loading, onPageC
   return (
     <>
       {loading
-        ? <CircularProgress size="small" sx={{ height: theme.spacing(2), position: 'absolute', width: theme.spacing(2) }} />
+        ? (
+            <CircularProgress
+              size="small"
+              sx={{
+                height: theme.spacing(2), position: 'absolute', width: theme.spacing(2),
+              }}
+            />
+          )
         : null}
       <Box sx={{ flexShrink: 0, ml: 2.5 }}>
         <IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">

package/src/components/Table/TableRow.tsx

@@ -3,17 +3,21 @@ import {
   ErrorOutlineRounded as ErrorOutlineRoundedIcon,
   WarningAmberRounded as WarningAmberRoundedIcon,
 } from '@mui/icons-material'
-import { alpha, TableCell, TableCellProps, TableRow, TableRowProps, Typography } from '@mui/material'
-import { Hash } from '@xylabs/hex'
+import type { TableCellProps, TableRowProps } from '@mui/material'
+import {
+  alpha, TableCell, TableRow, Typography,
+} from '@mui/material'
+import type { Hash } from '@xylabs/hex'
 import { usePromise } from '@xylabs/react-promise'
 import { useBreakpoint } from '@xylabs/react-shared'
-import { Payload } from '@xyo-network/payload-model'
+import type { Payload } from '@xyo-network/payload-model'
 import { PayloadValidator } from '@xyo-network/payload-validator'
 import { useNetwork } from '@xyo-network/react-network'
 import { HashTableCell, usePayloadHash } from '@xyo-network/react-shared'
 import React, { useMemo } from 'react'
 
-import { PayloadTableColumnConfig, payloadTableColumnConfigDefaults, PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
+import type { PayloadTableColumnConfig, PayloadTableColumnSlug } from './PayloadTableColumnConfig.ts'
+import { payloadTableColumnConfigDefaults } from './PayloadTableColumnConfig.ts'
 
 export interface PayloadTableRowProps extends TableRowProps {
   archive?: string

package/src/components/Table/TableRowNoData.tsx

@@ -1,4 +1,7 @@
-import { styled, TableCell, TableRow, TableRowProps, Typography, TypographyProps } from '@mui/material'
+import type { TableRowProps, TypographyProps } from '@mui/material'
+import {
+  styled, TableCell, TableRow, Typography,
+} from '@mui/material'
 import React from 'react'
 
 export interface TableRowNoDataProps extends TableRowProps {
@@ -7,7 +10,9 @@ export interface TableRowNoDataProps extends TableRowProps {
   typographyProps?: TypographyProps
 }
 
-export const TableRowNoData: React.FC<TableRowNoDataProps> = ({ additionalCells, hideBorder = false, typographyProps, ...props }) => {
+export const TableRowNoData: React.FC<TableRowNoDataProps> = ({
+  additionalCells, hideBorder = false, typographyProps, ...props
+}) => {
   return (
     <TableRow {...props}>
       <StyledTableCell hideBorder={hideBorder}>
@@ -31,6 +36,4 @@ interface StyledTableCellProps {
 const StyledTableCell = styled(TableCell, {
   name: 'StyledTableCell',
   shouldForwardProp: (prop: string) => prop !== 'hideBorder',
-})<StyledTableCellProps>(({ hideBorder }) => ({
-  ...(hideBorder && { border: 'none' }),
-}))
+})<StyledTableCellProps>(({ hideBorder }) => ({ ...(hideBorder && { border: 'none' }) }))

package/src/components/Table/types/PayloadTableBodyProps.ts

@@ -1,8 +1,8 @@
-import { TableBodyProps, TableRowProps } from '@mui/material'
-import { Hash } from '@xylabs/hex'
-import { WithChildren } from '@xylabs/react-shared'
-import { Payload } from '@xyo-network/payload-model'
-import { ComponentType } from 'react'
+import type { TableBodyProps, TableRowProps } from '@mui/material'
+import type { Hash } from '@xylabs/hex'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Payload } from '@xyo-network/payload-model'
+import type { ComponentType } from 'react'
 
 export interface PayloadTableBodyProps extends TableBodyProps, WithChildren {
   NoResultRowComponent?: ComponentType<TableRowProps>

package/src/components/Table/types/PayloadTableFooterProps.ts

@@ -1,5 +1,5 @@
-import { TableExVariants } from '@xyo-network/react-table'
-import { ChangeEvent, MouseEvent } from 'react'
+import type { TableExVariants } from '@xyo-network/react-table'
+import type { ChangeEvent, MouseEvent } from 'react'
 
 export interface PayloadTableFooterProps {
   count?: number

package/src/components/Table/types/PayloadTableHeadProps.ts

@@ -1,6 +1,6 @@
-import { TableHeadProps } from '@mui/material'
+import type { TableHeadProps } from '@mui/material'
 
-import { PayloadTableColumnConfig, PayloadTableColumnSlug } from '../PayloadTableColumnConfig.ts'
+import type { PayloadTableColumnConfig, PayloadTableColumnSlug } from '../PayloadTableColumnConfig.ts'
 
 export interface PayloadTableHeadProps extends TableHeadProps {
   columns?: PayloadTableColumnConfig<PayloadTableColumnSlug>

package/xy.config.ts

@@ -1,9 +1,7 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },