@xyo-network/react-payload-table 2.64.0-rc.2 → 2.64.0-rc.7

package/dist/node/components/Table/FetchMoreTable.stories.mjs

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Typography } from "@mui/material";
+import { delay } from "@xylabs/delay";
+import { useEvent } from "@xyo-network/react-event";
+import { useEffect, useState } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { PayloadTable } from "./Table";
+const newPayloads = () => Array(50).fill(void 0).map((_, index) => ({ index, random: Math.random(), schema: "network.xyo.stories.test" }));
+const maxPayloads = 200;
+const NewPayloadsDecorator = (Story, args) => {
+  const testPayloads = newPayloads();
+  const [payloads, setPayloads] = useState([]);
+  const [count, setCount] = useState(0);
+  const addToTotalPayloads = (payloads2) => setPayloads((previous) => {
+    previous.push(...payloads2);
+    setCount(previous.length);
+    return previous;
+  });
+  useEffect(() => {
+    setTimeout(() => {
+      addToTotalPayloads(testPayloads);
+    }, 500);
+  }, []);
+  const addPayloads = () => {
+    addToTotalPayloads(newPayloads());
+    return true;
+  };
+  const newPayloadList = async () => {
+    await delay(800);
+    const newPayloadList2 = newPayloads();
+    setCount(newPayloadList2.length);
+    setPayloads(newPayloadList2);
+  };
+  args.args = {
+    ...args.args,
+    count,
+    fetchMorePayloads: payloads.length < maxPayloads ? addPayloads : null,
+    payloads
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Typography, { children: [
+      "Max Payloads: ",
+      maxPayloads
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: newPayloadList, children: "Simulate Network Change" }),
+    /* @__PURE__ */ jsx(Story, { ...args })
+  ] });
+};
+const StorybookEntry = {
+  argTypes: {},
+  component: PayloadTable,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "payload/FetchMoreTable"
+};
+const Template = (args) => {
+  const [ref] = useEvent((noun, verb, data) => console.log(`[${noun}|${verb}|${data}]`));
+  return /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(PayloadTable, { ref, ...args }) });
+};
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [NewPayloadsDecorator];
+var FetchMoreTable_stories_default = StorybookEntry;
+export {
+  Default,
+  FetchMoreTable_stories_default as default
+};
+//# sourceMappingURL=FetchMoreTable.stories.mjs.map

package/dist/node/components/Table/FetchMoreTable.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/FetchMoreTable.stories.tsx"],"sourcesContent":["import { Button, Typography } from '@mui/material'\nimport { Decorator, Meta, StoryFn } from '@storybook/react'\nimport { delay } from '@xylabs/delay'\nimport { Payload } from '@xyo-network/payload-model'\nimport { useEvent } from '@xyo-network/react-event'\nimport { useEffect, useState } from 'react'\nimport { BrowserRouter } from 'react-router-dom'\n\nimport { PayloadTable } from './Table'\n\nconst newPayloads = () =>\n  Array(50)\n    .fill(undefined)\n    .map((_, index) => ({ index, random: Math.random(), schema: 'network.xyo.stories.test' }))\n\n// simulating the end of the list\nconst maxPayloads = 200\n\nconst NewPayloadsDecorator: Decorator = (Story, args) => {\n  const testPayloads = newPayloads()\n  const [payloads, setPayloads] = useState<Payload[]>([])\n  const [count, setCount] = useState(0)\n\n  const addToTotalPayloads = (payloads: Payload[]) =>\n    setPayloads((previous) => {\n      previous.push(...payloads)\n      setCount(previous.length)\n      return previous\n    })\n\n  useEffect(() => {\n    // simulate initial async payloads\n    setTimeout(() => {\n      addToTotalPayloads(testPayloads)\n    }, 500)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const addPayloads = () => {\n    addToTotalPayloads(newPayloads())\n    return true\n  }\n\n  const newPayloadList = async () => {\n    // Simulating delay fetching new payloads\n    await delay(800)\n    const newPayloadList = newPayloads()\n    setCount(newPayloadList.length)\n    setPayloads(newPayloadList)\n  }\n\n  args.args = {\n    ...args.args,\n    count,\n    fetchMorePayloads: payloads.length < maxPayloads ? addPayloads : null,\n    payloads,\n  }\n\n  return (\n    <>\n      <Typography>Max Payloads: {maxPayloads}</Typography>\n      <Button variant=\"contained\" onClick={newPayloadList}>\n        Simulate Network Change\n      </Button>\n      <Story {...args} />\n    </>\n  )\n}\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: PayloadTable,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'payload/FetchMoreTable',\n} as Meta<typeof PayloadTable>\n\nconst Template: StoryFn<typeof PayloadTable> = (args) => {\n  const [ref] = useEvent<HTMLTableElement>((noun, verb, data) => console.log(`[${noun}|${verb}|${data}]`))\n  return (\n    <BrowserRouter>\n      <PayloadTable ref={ref} {...args}></PayloadTable>\n    </BrowserRouter>\n  )\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\nDefault.decorators = [NewPayloadsDecorator]\n\nexport { Default }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":"AA2DI,mBAEE,KADA,YADF;AA3DJ,SAAS,QAAQ,kBAAkB;AAEnC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AACpC,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAE7B,MAAM,cAAc,MAClB,MAAM,EAAE,EACL,KAAK,MAAS,EACd,IAAI,CAAC,GAAG,WAAW,EAAE,OAAO,QAAQ,KAAK,OAAO,GAAG,QAAQ,2BAA2B,EAAE;AAG7F,MAAM,cAAc;AAEpB,MAAM,uBAAkC,CAAC,OAAO,SAAS;AACvD,QAAM,eAAe,YAAY;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAoB,CAAC,CAAC;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,qBAAqB,CAACA,cAC1B,YAAY,CAAC,aAAa;AACxB,aAAS,KAAK,GAAGA,SAAQ;AACzB,aAAS,SAAS,MAAM;AACxB,WAAO;AAAA,EACT,CAAC;AAEH,YAAU,MAAM;AAEd,eAAW,MAAM;AACf,yBAAmB,YAAY;AAAA,IACjC,GAAG,GAAG;AAAA,EAER,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,MAAM;AACxB,uBAAmB,YAAY,CAAC;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB,YAAY;AAEjC,UAAM,MAAM,GAAG;AACf,UAAMC,kBAAiB,YAAY;AACnC,aAASA,gBAAe,MAAM;AAC9B,gBAAYA,eAAc;AAAA,EAC5B;AAEA,OAAK,OAAO;AAAA,IACV,GAAG,KAAK;AAAA,IACR;AAAA,IACA,mBAAmB,SAAS,SAAS,cAAc,cAAc;AAAA,IACjE;AAAA,EACF;AAEA,SACE,iCACE;AAAA,yBAAC,cAAW;AAAA;AAAA,MAAe;AAAA,OAAY;AAAA,IACvC,oBAAC,UAAO,SAAQ,aAAY,SAAS,gBAAgB,qCAErD;AAAA,IACA,oBAAC,SAAO,GAAG,MAAM;AAAA,KACnB;AAEJ;AAEA,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAyC,CAAC,SAAS;AACvD,QAAM,CAAC,GAAG,IAAI,SAA2B,CAAC,MAAM,MAAM,SAAS,QAAQ,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;AACvG,SACE,oBAAC,iBACC,8BAAC,gBAAa,KAAW,GAAG,MAAM,GACpC;AAEJ;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAChB,QAAQ,aAAa,CAAC,oBAAoB;AAK1C,IAAO,iCAAQ;","names":["payloads","newPayloadList"]}

package/dist/node/components/Table/PayloadTableColumnConfig.d.mts

@@ -0,0 +1,11 @@
+export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid';
+export interface PayloadTableColumnConfig<T = PayloadTableColumnSlug> {
+    xs?: T[];
+    sm?: T[];
+    md?: T[];
+    lg?: T[];
+    xl?: T[];
+}
+export declare const payloadColumnNames: Record<PayloadTableColumnSlug, string>;
+export declare const payloadTableColumnConfigDefaults: () => PayloadTableColumnConfig;
+//# sourceMappingURL=PayloadTableColumnConfig.d.ts.map

package/dist/node/components/Table/PayloadTableColumnConfig.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadTableColumnConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,sBAAsB;IAClE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IACR,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;CACT;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAIrE,CAAA;AAED,eAAO,MAAM,gCAAgC,QAAO,wBAOnD,CAAA"}

package/dist/node/components/Table/PayloadTableColumnConfig.d.ts

@@ -0,0 +1,11 @@
+export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid';
+export interface PayloadTableColumnConfig<T = PayloadTableColumnSlug> {
+    xs?: T[];
+    sm?: T[];
+    md?: T[];
+    lg?: T[];
+    xl?: T[];
+}
+export declare const payloadColumnNames: Record<PayloadTableColumnSlug, string>;
+export declare const payloadTableColumnConfigDefaults: () => PayloadTableColumnConfig;
+//# sourceMappingURL=PayloadTableColumnConfig.d.ts.map

package/dist/node/components/Table/PayloadTableColumnConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayloadTableColumnConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEhE,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,sBAAsB;IAClE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAER,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IACR,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;CACT;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,EAAE,MAAM,CAIrE,CAAA;AAED,eAAO,MAAM,gCAAgC,QAAO,wBAOnD,CAAA"}

package/dist/node/components/Table/PayloadTableColumnConfig.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PayloadTableColumnConfig_exports = {};
+__export(PayloadTableColumnConfig_exports, {
+  payloadColumnNames: () => payloadColumnNames,
+  payloadTableColumnConfigDefaults: () => payloadTableColumnConfigDefaults
+});
+module.exports = __toCommonJS(PayloadTableColumnConfig_exports);
+const payloadColumnNames = {
+  hash: "Hash",
+  schema: "Schema",
+  valid: "Valid"
+};
+const payloadTableColumnConfigDefaults = () => {
+  const xs = ["hash", "schema", "valid"];
+  const sm = ["hash", "schema", "valid"];
+  const md = ["hash", "schema", "valid"];
+  const lg = ["hash", "schema", "valid"];
+  const xl = ["hash", "schema", "valid"];
+  return { lg, md, sm, xl, xs };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  payloadColumnNames,
+  payloadTableColumnConfigDefaults
+});
+//# sourceMappingURL=PayloadTableColumnConfig.js.map

package/dist/node/components/Table/PayloadTableColumnConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"sourcesContent":["export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid'\n\nexport interface PayloadTableColumnConfig<T = PayloadTableColumnSlug> {\n  xs?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  sm?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  md?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  lg?: T[]\n  xl?: T[]\n}\n\nexport const payloadColumnNames: Record<PayloadTableColumnSlug, string> = {\n  hash: 'Hash',\n  schema: 'Schema',\n  valid: 'Valid',\n}\n\nexport const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig => {\n  const xs: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const sm: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  return { lg, md, sm, xl, xs }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,MAAM,qBAA6D;AAAA,EACxE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,mCAAmC,MAAgC;AAC9E,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,SAAO,EAAE,IAAI,IAAI,IAAI,IAAI,GAAG;AAC9B;","names":[]}

package/dist/node/components/Table/PayloadTableColumnConfig.mjs

@@ -0,0 +1,18 @@
+const payloadColumnNames = {
+  hash: "Hash",
+  schema: "Schema",
+  valid: "Valid"
+};
+const payloadTableColumnConfigDefaults = () => {
+  const xs = ["hash", "schema", "valid"];
+  const sm = ["hash", "schema", "valid"];
+  const md = ["hash", "schema", "valid"];
+  const lg = ["hash", "schema", "valid"];
+  const xl = ["hash", "schema", "valid"];
+  return { lg, md, sm, xl, xs };
+};
+export {
+  payloadColumnNames,
+  payloadTableColumnConfigDefaults
+};
+//# sourceMappingURL=PayloadTableColumnConfig.mjs.map

package/dist/node/components/Table/PayloadTableColumnConfig.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/PayloadTableColumnConfig.ts"],"sourcesContent":["export type PayloadTableColumnSlug = 'hash' | 'schema' | 'valid'\n\nexport interface PayloadTableColumnConfig<T = PayloadTableColumnSlug> {\n  xs?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  sm?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  md?: T[]\n  // eslint-disable-next-line @typescript-eslint/member-ordering\n  lg?: T[]\n  xl?: T[]\n}\n\nexport const payloadColumnNames: Record<PayloadTableColumnSlug, string> = {\n  hash: 'Hash',\n  schema: 'Schema',\n  valid: 'Valid',\n}\n\nexport const payloadTableColumnConfigDefaults = (): PayloadTableColumnConfig => {\n  const xs: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const sm: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const md: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const lg: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  const xl: PayloadTableColumnSlug[] = ['hash', 'schema', 'valid']\n  return { lg, md, sm, xl, xs }\n}\n"],"mappings":"AAaO,MAAM,qBAA6D;AAAA,EACxE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,mCAAmC,MAAgC;AAC9E,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,QAAM,KAA+B,CAAC,QAAQ,UAAU,OAAO;AAC/D,SAAO,EAAE,IAAI,IAAI,IAAI,IAAI,GAAG;AAC9B;","names":[]}

package/dist/node/components/Table/Table.d.mts

@@ -0,0 +1,26 @@
+import { Payload } from '@xyo-network/payload-model';
+import { TableExProps } from '@xyo-network/react-table';
+import { ComponentType } from 'react';
+import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
+import { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types';
+export interface PayloadTableProps extends TableExProps {
+    PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>;
+    PayloadTableFooterComponent?: ComponentType<PayloadTableFooterProps>;
+    PayloadTableHeadComponent?: ComponentType<PayloadTableHeadProps>;
+    archive?: string;
+    columns?: PayloadTableColumnConfig;
+    /** Total number of payloads passed */
+    count?: number;
+    exploreDomain?: string;
+    /** External trigger to fetch more payloads */
+    fetchMorePayloads?: () => void;
+    loading?: boolean;
+    /** set number of schema parts to display starting from the end */
+    maxSchemaDepth?: number;
+    onRowClick?: (value: Payload) => void;
+    payloads?: Payload[] | null;
+    rowsPerPage?: number;
+}
+export declare const PayloadTableWithRef: import("react").ForwardRefExoticComponent<Omit<PayloadTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const PayloadTable: import("react").ForwardRefExoticComponent<Omit<PayloadTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+//# sourceMappingURL=Table.d.ts.map

package/dist/node/components/Table/Table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAA;AAE/E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAKrE,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/F,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,yBAAyB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAChE,2BAA2B,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAA;IACpE,yBAAyB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,6HAkG/B,CAAA;AAID,eAAO,MAAM,YAAY,6HAAsB,CAAA"}

package/dist/node/components/Table/Table.d.ts

@@ -0,0 +1,26 @@
+import { Payload } from '@xyo-network/payload-model';
+import { TableExProps } from '@xyo-network/react-table';
+import { ComponentType } from 'react';
+import { PayloadTableColumnConfig } from './PayloadTableColumnConfig';
+import { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types';
+export interface PayloadTableProps extends TableExProps {
+    PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>;
+    PayloadTableFooterComponent?: ComponentType<PayloadTableFooterProps>;
+    PayloadTableHeadComponent?: ComponentType<PayloadTableHeadProps>;
+    archive?: string;
+    columns?: PayloadTableColumnConfig;
+    /** Total number of payloads passed */
+    count?: number;
+    exploreDomain?: string;
+    /** External trigger to fetch more payloads */
+    fetchMorePayloads?: () => void;
+    loading?: boolean;
+    /** set number of schema parts to display starting from the end */
+    maxSchemaDepth?: number;
+    onRowClick?: (value: Payload) => void;
+    payloads?: Payload[] | null;
+    rowsPerPage?: number;
+}
+export declare const PayloadTableWithRef: import("react").ForwardRefExoticComponent<Omit<PayloadTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const PayloadTable: import("react").ForwardRefExoticComponent<Omit<PayloadTableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+//# sourceMappingURL=Table.d.ts.map

package/dist/node/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAW,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,aAAa,EAA4C,MAAM,OAAO,CAAA;AAE/E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAKrE,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/F,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,yBAAyB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAChE,2BAA2B,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAA;IACpE,yBAAyB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAA;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,6HAkG/B,CAAA;AAID,eAAO,MAAM,YAAY,6HAAsB,CAAA"}

package/dist/node/components/Table/Table.js

@@ -0,0 +1,126 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Table_exports = {};
+__export(Table_exports, {
+  PayloadTable: () => PayloadTable,
+  PayloadTableWithRef: () => PayloadTableWithRef
+});
+module.exports = __toCommonJS(Table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_table = require("@xyo-network/react-table");
+var import_react = require("react");
+var import_TableBody = require("./TableBody");
+var import_TableFooter = require("./TableFooter");
+var import_TableHead = require("./TableHead");
+var import_TableRowNoData = require("./TableRowNoData");
+const PayloadTableWithRef = (0, import_react.forwardRef)(
+  ({
+    exploreDomain,
+    archive,
+    onRowClick,
+    fetchMorePayloads,
+    rowsPerPage: rowsPerPageProp = 25,
+    payloads,
+    columns,
+    PayloadTableHeadComponent = import_TableHead.PayloadTableHead,
+    PayloadTableBodyComponent = import_TableBody.PayloadTableBody,
+    PayloadTableFooterComponent = import_TableFooter.PayloadTableFooter,
+    maxSchemaDepth,
+    count = 0,
+    loading = false,
+    variant = "scrollable",
+    ...props
+  }, ref) => {
+    const [page, setPage] = (0, import_react.useState)(0);
+    const [rowsPerPage, setRowsPerPage] = (0, import_react.useState)(rowsPerPageProp);
+    const [visiblePayloads, setVisiblePayloads] = (0, import_react.useState)([]);
+    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0;
+    (0, import_react.useEffect)(() => {
+      setRowsPerPage(rowsPerPageProp);
+    }, [rowsPerPageProp]);
+    (0, import_react.useEffect)(() => {
+      if (payloads) {
+        setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage));
+      }
+    }, [count, page, payloads, rowsPerPage]);
+    (0, import_react.useEffect)(() => {
+      setPage(0);
+    }, [payloads]);
+    const handleAdditionalPayloads = () => {
+      if (fetchMorePayloads && payloads) {
+        const buffer = rowsPerPage * 2;
+        const lastVisiblePayload = visiblePayloads?.at(-1);
+        if (lastVisiblePayload) {
+          const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload);
+          if (lastVisibleIndex !== void 0 && payloads.length - (lastVisibleIndex + 1) <= buffer) {
+            fetchMorePayloads();
+          }
+        }
+      }
+    };
+    const handleChangePage = (_event, newPage) => {
+      handleAdditionalPayloads();
+      setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+      setRowsPerPage(parseInt(event.target.value, 10));
+      setPage(0);
+    };
+    const noResults = (0, import_react.useMemo)(() => {
+      return !loading && (!visiblePayloads || visiblePayloads.length === 0);
+    }, [loading, visiblePayloads]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_table.TableEx, { variant, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PayloadTableHeadComponent, { columns }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        PayloadTableBodyComponent,
+        {
+          payloads: visiblePayloads,
+          exploreDomain,
+          archive,
+          maxSchemaDepth,
+          onRowClick,
+          emptyRows,
+          noResults,
+          NoResultRowComponent: import_TableRowNoData.TableRowNoData
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        PayloadTableFooterComponent,
+        {
+          count,
+          variant,
+          rowsPerPage,
+          handleChangePage,
+          handleChangeRowsPerPage,
+          fetchMorePayloads,
+          loading,
+          page
+        }
+      )
+    ] });
+  }
+);
+PayloadTableWithRef.displayName = "PayloadTable";
+const PayloadTable = PayloadTableWithRef;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayloadTable,
+  PayloadTableWithRef
+});
+//# sourceMappingURL=Table.js.map

package/dist/node/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Payload } from '@xyo-network/payload-model'\nimport { TableEx, TableExProps } from '@xyo-network/react-table'\nimport { ComponentType, forwardRef, useEffect, useMemo, useState } from 'react'\n\nimport { PayloadTableColumnConfig } from './PayloadTableColumnConfig'\nimport { PayloadTableBody } from './TableBody'\nimport { PayloadTableFooter } from './TableFooter'\nimport { PayloadTableHead } from './TableHead'\nimport { TableRowNoData } from './TableRowNoData'\nimport { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types'\n\nexport interface PayloadTableProps extends TableExProps {\n  PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>\n  PayloadTableFooterComponent?: ComponentType<PayloadTableFooterProps>\n  PayloadTableHeadComponent?: ComponentType<PayloadTableHeadProps>\n  archive?: string\n  columns?: PayloadTableColumnConfig\n  /** Total number of payloads passed */\n  count?: number\n  exploreDomain?: string\n  /** External trigger to fetch more payloads */\n  fetchMorePayloads?: () => void\n  loading?: boolean\n  /** set number of schema parts to display starting from the end */\n  maxSchemaDepth?: number\n  onRowClick?: (value: Payload) => void\n  payloads?: Payload[] | null\n  rowsPerPage?: number\n}\n\nexport const PayloadTableWithRef = forwardRef<HTMLTableElement, PayloadTableProps>(\n  (\n    {\n      exploreDomain,\n      archive,\n      onRowClick,\n      fetchMorePayloads,\n      rowsPerPage: rowsPerPageProp = 25,\n      payloads,\n      columns,\n      PayloadTableHeadComponent = PayloadTableHead,\n      PayloadTableBodyComponent = PayloadTableBody,\n      PayloadTableFooterComponent = PayloadTableFooter,\n      maxSchemaDepth,\n      count = 0,\n      loading = false,\n      variant = 'scrollable',\n      ...props\n    },\n    ref,\n  ) => {\n    const [page, setPage] = useState(0)\n    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)\n    const [visiblePayloads, setVisiblePayloads] = useState<Payload[]>([])\n\n    // Avoid a layout jump when reaching the last page with empty rows.\n    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0\n\n    useEffect(() => {\n      setRowsPerPage(rowsPerPageProp)\n    }, [rowsPerPageProp])\n\n    // React to various prop changes to derive new visible payloads\n    // count is needed to show initial payloads added async to the same payloads reference\n    useEffect(() => {\n      if (payloads) {\n        setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))\n      }\n    }, [count, page, payloads, rowsPerPage])\n\n    // If the payload reference changes, assume we have a new list and reset current page\n    useEffect(() => {\n      setPage(0)\n    }, [payloads])\n\n    const handleAdditionalPayloads = () => {\n      if (fetchMorePayloads && payloads) {\n        const buffer = rowsPerPage * 2\n        const lastVisiblePayload = visiblePayloads?.at(-1)\n        if (lastVisiblePayload) {\n          const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)\n          if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {\n            fetchMorePayloads()\n          }\n        }\n      }\n    }\n\n    const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {\n      handleAdditionalPayloads()\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    const noResults = useMemo(() => {\n      return !loading && (!visiblePayloads || visiblePayloads.length === 0)\n    }, [loading, visiblePayloads])\n\n    return (\n      <TableEx variant={variant} ref={ref} {...props}>\n        <PayloadTableHeadComponent columns={columns} />\n        <PayloadTableBodyComponent\n          payloads={visiblePayloads}\n          exploreDomain={exploreDomain}\n          archive={archive}\n          maxSchemaDepth={maxSchemaDepth}\n          onRowClick={onRowClick}\n          emptyRows={emptyRows}\n          noResults={noResults}\n          NoResultRowComponent={TableRowNoData}\n        />\n        <PayloadTableFooterComponent\n          count={count}\n          variant={variant}\n          rowsPerPage={rowsPerPage}\n          handleChangePage={handleChangePage}\n          handleChangeRowsPerPage={handleChangeRowsPerPage}\n          fetchMorePayloads={fetchMorePayloads}\n          loading={loading}\n          page={page}\n        />\n      </TableEx>\n    )\n  },\n)\n\nPayloadTableWithRef.displayName = 'PayloadTable'\n\nexport const PayloadTable = PayloadTableWithRef\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuGM;AAtGN,yBAAsC;AACtC,mBAAwE;AAGxE,uBAAiC;AACjC,yBAAmC;AACnC,uBAAiC;AACjC,4BAA+B;AAsBxB,MAAM,0BAAsB;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,kBAAkB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,4BAA4B;AAAA,IAC5B,4BAA4B;AAAA,IAC5B,8BAA8B;AAAA,IAC9B;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,eAAe;AAC9D,UAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAoB,CAAC,CAAC;AAGpE,UAAM,YAAY,OAAO,IAAI,KAAK,IAAI,IAAI,IAAI,QAAQ,cAAc,SAAS,CAAC,IAAI;AAElF,gCAAU,MAAM;AACd,qBAAe,eAAe;AAAA,IAChC,GAAG,CAAC,eAAe,CAAC;AAIpB,gCAAU,MAAM;AACd,UAAI,UAAU;AACZ,2BAAmB,SAAS,MAAM,OAAO,aAAa,OAAO,cAAc,WAAW,CAAC;AAAA,MACzF;AAAA,IACF,GAAG,CAAC,OAAO,MAAM,UAAU,WAAW,CAAC;AAGvC,gCAAU,MAAM;AACd,cAAQ,CAAC;AAAA,IACX,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,2BAA2B,MAAM;AACrC,UAAI,qBAAqB,UAAU;AACjC,cAAM,SAAS,cAAc;AAC7B,cAAM,qBAAqB,iBAAiB,GAAG,EAAE;AACjD,YAAI,oBAAoB;AACtB,gBAAM,mBAAmB,UAAU,QAAQ,kBAAkB;AAC7D,cAAI,qBAAqB,UAAa,SAAS,UAAU,mBAAmB,MAAM,QAAQ;AACxF,8BAAkB;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,mBAAmB,CAAC,QAAoD,YAAoB;AAChG,+BAAyB;AACzB,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,UAAqE;AACpG,qBAAe,SAAS,MAAM,OAAO,OAAO,EAAE,CAAC;AAC/C,cAAQ,CAAC;AAAA,IACX;AAEA,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,aAAO,CAAC,YAAY,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,IACrE,GAAG,CAAC,SAAS,eAAe,CAAC;AAE7B,WACE,6CAAC,8BAAQ,SAAkB,KAAW,GAAG,OACvC;AAAA,kDAAC,6BAA0B,SAAkB;AAAA,MAC7C;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,sBAAsB;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAE3B,MAAM,eAAe;","names":[]}

package/dist/node/components/Table/Table.mjs

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TableEx } from "@xyo-network/react-table";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import { PayloadTableBody } from "./TableBody";
+import { PayloadTableFooter } from "./TableFooter";
+import { PayloadTableHead } from "./TableHead";
+import { TableRowNoData } from "./TableRowNoData";
+const PayloadTableWithRef = forwardRef(
+  ({
+    exploreDomain,
+    archive,
+    onRowClick,
+    fetchMorePayloads,
+    rowsPerPage: rowsPerPageProp = 25,
+    payloads,
+    columns,
+    PayloadTableHeadComponent = PayloadTableHead,
+    PayloadTableBodyComponent = PayloadTableBody,
+    PayloadTableFooterComponent = PayloadTableFooter,
+    maxSchemaDepth,
+    count = 0,
+    loading = false,
+    variant = "scrollable",
+    ...props
+  }, ref) => {
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp);
+    const [visiblePayloads, setVisiblePayloads] = useState([]);
+    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0;
+    useEffect(() => {
+      setRowsPerPage(rowsPerPageProp);
+    }, [rowsPerPageProp]);
+    useEffect(() => {
+      if (payloads) {
+        setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage));
+      }
+    }, [count, page, payloads, rowsPerPage]);
+    useEffect(() => {
+      setPage(0);
+    }, [payloads]);
+    const handleAdditionalPayloads = () => {
+      if (fetchMorePayloads && payloads) {
+        const buffer = rowsPerPage * 2;
+        const lastVisiblePayload = visiblePayloads?.at(-1);
+        if (lastVisiblePayload) {
+          const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload);
+          if (lastVisibleIndex !== void 0 && payloads.length - (lastVisibleIndex + 1) <= buffer) {
+            fetchMorePayloads();
+          }
+        }
+      }
+    };
+    const handleChangePage = (_event, newPage) => {
+      handleAdditionalPayloads();
+      setPage(newPage);
+    };
+    const handleChangeRowsPerPage = (event) => {
+      setRowsPerPage(parseInt(event.target.value, 10));
+      setPage(0);
+    };
+    const noResults = useMemo(() => {
+      return !loading && (!visiblePayloads || visiblePayloads.length === 0);
+    }, [loading, visiblePayloads]);
+    return /* @__PURE__ */ jsxs(TableEx, { variant, ref, ...props, children: [
+      /* @__PURE__ */ jsx(PayloadTableHeadComponent, { columns }),
+      /* @__PURE__ */ jsx(
+        PayloadTableBodyComponent,
+        {
+          payloads: visiblePayloads,
+          exploreDomain,
+          archive,
+          maxSchemaDepth,
+          onRowClick,
+          emptyRows,
+          noResults,
+          NoResultRowComponent: TableRowNoData
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PayloadTableFooterComponent,
+        {
+          count,
+          variant,
+          rowsPerPage,
+          handleChangePage,
+          handleChangeRowsPerPage,
+          fetchMorePayloads,
+          loading,
+          page
+        }
+      )
+    ] });
+  }
+);
+PayloadTableWithRef.displayName = "PayloadTable";
+const PayloadTable = PayloadTableWithRef;
+export {
+  PayloadTable,
+  PayloadTableWithRef
+};
+//# sourceMappingURL=Table.mjs.map

package/dist/node/components/Table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { Payload } from '@xyo-network/payload-model'\nimport { TableEx, TableExProps } from '@xyo-network/react-table'\nimport { ComponentType, forwardRef, useEffect, useMemo, useState } from 'react'\n\nimport { PayloadTableColumnConfig } from './PayloadTableColumnConfig'\nimport { PayloadTableBody } from './TableBody'\nimport { PayloadTableFooter } from './TableFooter'\nimport { PayloadTableHead } from './TableHead'\nimport { TableRowNoData } from './TableRowNoData'\nimport { PayloadTableBodyProps, PayloadTableFooterProps, PayloadTableHeadProps } from './types'\n\nexport interface PayloadTableProps extends TableExProps {\n  PayloadTableBodyComponent?: ComponentType<PayloadTableBodyProps>\n  PayloadTableFooterComponent?: ComponentType<PayloadTableFooterProps>\n  PayloadTableHeadComponent?: ComponentType<PayloadTableHeadProps>\n  archive?: string\n  columns?: PayloadTableColumnConfig\n  /** Total number of payloads passed */\n  count?: number\n  exploreDomain?: string\n  /** External trigger to fetch more payloads */\n  fetchMorePayloads?: () => void\n  loading?: boolean\n  /** set number of schema parts to display starting from the end */\n  maxSchemaDepth?: number\n  onRowClick?: (value: Payload) => void\n  payloads?: Payload[] | null\n  rowsPerPage?: number\n}\n\nexport const PayloadTableWithRef = forwardRef<HTMLTableElement, PayloadTableProps>(\n  (\n    {\n      exploreDomain,\n      archive,\n      onRowClick,\n      fetchMorePayloads,\n      rowsPerPage: rowsPerPageProp = 25,\n      payloads,\n      columns,\n      PayloadTableHeadComponent = PayloadTableHead,\n      PayloadTableBodyComponent = PayloadTableBody,\n      PayloadTableFooterComponent = PayloadTableFooter,\n      maxSchemaDepth,\n      count = 0,\n      loading = false,\n      variant = 'scrollable',\n      ...props\n    },\n    ref,\n  ) => {\n    const [page, setPage] = useState(0)\n    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageProp)\n    const [visiblePayloads, setVisiblePayloads] = useState<Payload[]>([])\n\n    // Avoid a layout jump when reaching the last page with empty rows.\n    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - count || 0) : 0\n\n    useEffect(() => {\n      setRowsPerPage(rowsPerPageProp)\n    }, [rowsPerPageProp])\n\n    // React to various prop changes to derive new visible payloads\n    // count is needed to show initial payloads added async to the same payloads reference\n    useEffect(() => {\n      if (payloads) {\n        setVisiblePayloads(payloads.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))\n      }\n    }, [count, page, payloads, rowsPerPage])\n\n    // If the payload reference changes, assume we have a new list and reset current page\n    useEffect(() => {\n      setPage(0)\n    }, [payloads])\n\n    const handleAdditionalPayloads = () => {\n      if (fetchMorePayloads && payloads) {\n        const buffer = rowsPerPage * 2\n        const lastVisiblePayload = visiblePayloads?.at(-1)\n        if (lastVisiblePayload) {\n          const lastVisibleIndex = payloads?.indexOf(lastVisiblePayload)\n          if (lastVisibleIndex !== undefined && payloads.length - (lastVisibleIndex + 1) <= buffer) {\n            fetchMorePayloads()\n          }\n        }\n      }\n    }\n\n    const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {\n      handleAdditionalPayloads()\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    const noResults = useMemo(() => {\n      return !loading && (!visiblePayloads || visiblePayloads.length === 0)\n    }, [loading, visiblePayloads])\n\n    return (\n      <TableEx variant={variant} ref={ref} {...props}>\n        <PayloadTableHeadComponent columns={columns} />\n        <PayloadTableBodyComponent\n          payloads={visiblePayloads}\n          exploreDomain={exploreDomain}\n          archive={archive}\n          maxSchemaDepth={maxSchemaDepth}\n          onRowClick={onRowClick}\n          emptyRows={emptyRows}\n          noResults={noResults}\n          NoResultRowComponent={TableRowNoData}\n        />\n        <PayloadTableFooterComponent\n          count={count}\n          variant={variant}\n          rowsPerPage={rowsPerPage}\n          handleChangePage={handleChangePage}\n          handleChangeRowsPerPage={handleChangeRowsPerPage}\n          fetchMorePayloads={fetchMorePayloads}\n          loading={loading}\n          page={page}\n        />\n      </TableEx>\n    )\n  },\n)\n\nPayloadTableWithRef.displayName = 'PayloadTable'\n\nexport const PayloadTable = PayloadTableWithRef\n"],"mappings":"AAuGM,SACE,KADF;AAtGN,SAAS,eAA6B;AACtC,SAAwB,YAAY,WAAW,SAAS,gBAAgB;AAGxE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAsBxB,MAAM,sBAAsB;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,kBAAkB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,4BAA4B;AAAA,IAC5B,4BAA4B;AAAA,IAC5B,8BAA8B;AAAA,IAC9B;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,eAAe;AAC9D,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAoB,CAAC,CAAC;AAGpE,UAAM,YAAY,OAAO,IAAI,KAAK,IAAI,IAAI,IAAI,QAAQ,cAAc,SAAS,CAAC,IAAI;AAElF,cAAU,MAAM;AACd,qBAAe,eAAe;AAAA,IAChC,GAAG,CAAC,eAAe,CAAC;AAIpB,cAAU,MAAM;AACd,UAAI,UAAU;AACZ,2BAAmB,SAAS,MAAM,OAAO,aAAa,OAAO,cAAc,WAAW,CAAC;AAAA,MACzF;AAAA,IACF,GAAG,CAAC,OAAO,MAAM,UAAU,WAAW,CAAC;AAGvC,cAAU,MAAM;AACd,cAAQ,CAAC;AAAA,IACX,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,2BAA2B,MAAM;AACrC,UAAI,qBAAqB,UAAU;AACjC,cAAM,SAAS,cAAc;AAC7B,cAAM,qBAAqB,iBAAiB,GAAG,EAAE;AACjD,YAAI,oBAAoB;AACtB,gBAAM,mBAAmB,UAAU,QAAQ,kBAAkB;AAC7D,cAAI,qBAAqB,UAAa,SAAS,UAAU,mBAAmB,MAAM,QAAQ;AACxF,8BAAkB;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,mBAAmB,CAAC,QAAoD,YAAoB;AAChG,+BAAyB;AACzB,cAAQ,OAAO;AAAA,IACjB;AAEA,UAAM,0BAA0B,CAAC,UAAqE;AACpG,qBAAe,SAAS,MAAM,OAAO,OAAO,EAAE,CAAC;AAC/C,cAAQ,CAAC;AAAA,IACX;AAEA,UAAM,YAAY,QAAQ,MAAM;AAC9B,aAAO,CAAC,YAAY,CAAC,mBAAmB,gBAAgB,WAAW;AAAA,IACrE,GAAG,CAAC,SAAS,eAAe,CAAC;AAE7B,WACE,qBAAC,WAAQ,SAAkB,KAAW,GAAG,OACvC;AAAA,0BAAC,6BAA0B,SAAkB;AAAA,MAC7C;AAAA,QAAC;AAAA;AAAA,UACC,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,sBAAsB;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,oBAAoB,cAAc;AAE3B,MAAM,eAAe;","names":[]}

package/dist/node/components/Table/Table.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Table_stories_exports = {};
+__export(Table_stories_exports, {
+  Default: () => Default,
+  WithData: () => WithData,
+  WithDataAndMaxSchemaDepth: () => WithDataAndMaxSchemaDepth,
+  WithInvalid: () => WithInvalid,
+  WithLoading: () => WithLoading,
+  WithNoResults: () => WithNoResults,
+  WithOutStickyHeaderFooter: () => WithOutStickyHeaderFooter,
+  default: () => Table_stories_default
+});
+module.exports = __toCommonJS(Table_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_material = require("@mui/material");
+var import_react_event = require("@xyo-network/react-event");
+var import_react_storybook = require("@xyo-network/react-storybook");
+var import_react2 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_Table = require("./Table");
+const StorybookEntry = {
+  argTypes: {},
+  component: import_Table.PayloadTable,
+  parameters: {
+    docs: {
+      page: null
+    }
+  },
+  title: "payload/Table"
+};
+const Template = (args) => {
+  const [eventData, setEventData] = (0, import_react2.useState)();
+  const [ref] = (0, import_react_event.useEvent)((_noun, _verb, data) => setEventData(data));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.BrowserRouter, { children: [
+    eventData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, { label: `EventData: ${eventData}`, onDelete: () => setEventData(void 0) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.PayloadTable, { ref, ...args })
+  ] });
+};
+const Default = Template.bind({});
+Default.args = {};
+Default.decorators = [import_react_storybook.useAppThemeDecorator];
+const payloads = [
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  { schema: "network.xyo.debug.super.long.schema.for.some.reason" },
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload,
+  import_react_storybook.sampleIdPayload,
+  import_react_storybook.sampleSystemInfoBrowserPayload
+];
+const WithData = Template.bind({});
+WithData.args = {
+  payloads
+};
+WithData.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithOutStickyHeaderFooter = Template.bind({});
+WithOutStickyHeaderFooter.args = {
+  payloads,
+  variant: "normal"
+};
+const WithDataAndMaxSchemaDepth = Template.bind({});
+WithDataAndMaxSchemaDepth.args = {
+  maxSchemaDepth: 2,
+  payloads
+};
+WithDataAndMaxSchemaDepth.decorators = [import_react_storybook.useAppThemeDecorator];
+const WithInvalid = Template.bind({});
+const { schema, ...badPayload } = import_react_storybook.sampleIdPayload;
+WithInvalid.args = { payloads: [import_react_storybook.sampleIdPayload, badPayload] };
+const WithNoResults = Template.bind({});
+WithNoResults.args = { payloads: [] };
+const WithLoading = Template.bind({});
+WithLoading.args = { loading: true, payloads: [] };
+var Table_stories_default = StorybookEntry;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Default,
+  WithData,
+  WithDataAndMaxSchemaDepth,
+  WithInvalid,
+  WithLoading,
+  WithNoResults,
+  WithOutStickyHeaderFooter
+});
+//# sourceMappingURL=Table.stories.js.map

package/dist/node/components/Table/Table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/Table.stories.tsx"],"sourcesContent":["import { Chip } from '@mui/material'\nimport { Meta, StoryFn } from '@storybook/react'\nimport { Payload } from '@xyo-network/payload-model'\nimport { useEvent } from '@xyo-network/react-event'\nimport { sampleIdPayload, sampleSystemInfoBrowserPayload, useAppThemeDecorator } from '@xyo-network/react-storybook'\nimport { useState } from 'react'\nimport { BrowserRouter } from 'react-router-dom'\n\nimport { PayloadTable } from './Table'\n\nconst StorybookEntry = {\n  argTypes: {},\n  component: PayloadTable,\n  parameters: {\n    docs: {\n      page: null,\n    },\n  },\n  title: 'payload/Table',\n} as Meta<typeof PayloadTable>\n\nconst Template: StoryFn<typeof PayloadTable> = (args) => {\n  const [eventData, setEventData] = useState<string | undefined>()\n  const [ref] = useEvent<HTMLTableElement>((_noun, _verb, data) => setEventData(data))\n\n  return (\n    <BrowserRouter>\n      {eventData ? <Chip label={`EventData: ${eventData}`} onDelete={() => setEventData(undefined)} /> : null}\n      <PayloadTable ref={ref} {...args}></PayloadTable>\n    </BrowserRouter>\n  )\n}\n\nconst Default = Template.bind({})\nDefault.args = {}\nDefault.decorators = [useAppThemeDecorator]\n\nconst payloads: Payload[] = [\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  { schema: 'network.xyo.debug.super.long.schema.for.some.reason' },\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n  sampleIdPayload,\n  sampleSystemInfoBrowserPayload,\n]\n\nconst WithData = Template.bind({})\nWithData.args = {\n  payloads,\n}\nWithData.decorators = [useAppThemeDecorator]\n\nconst WithOutStickyHeaderFooter = Template.bind({})\nWithOutStickyHeaderFooter.args = {\n  payloads,\n  variant: 'normal',\n}\n\nconst WithDataAndMaxSchemaDepth = Template.bind({})\nWithDataAndMaxSchemaDepth.args = {\n  maxSchemaDepth: 2,\n  payloads,\n}\nWithDataAndMaxSchemaDepth.decorators = [useAppThemeDecorator]\n\nconst WithInvalid = Template.bind({})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst { schema, ...badPayload } = sampleIdPayload\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n//@ts-ignore\nWithInvalid.args = { payloads: [sampleIdPayload, badPayload] }\n\nconst WithNoResults = Template.bind({})\nWithNoResults.args = { payloads: [] }\n\nconst WithLoading = Template.bind({})\nWithLoading.args = { loading: true, payloads: [] }\n\nexport { Default, WithData, WithDataAndMaxSchemaDepth, WithInvalid, WithLoading, WithNoResults, WithOutStickyHeaderFooter }\n\n// eslint-disable-next-line import/no-default-export\nexport default StorybookEntry\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AA1BJ,sBAAqB;AAGrB,yBAAyB;AACzB,6BAAsF;AACtF,IAAAA,gBAAyB;AACzB,8BAA8B;AAE9B,mBAA6B;AAE7B,MAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AACT;AAEA,MAAM,WAAyC,CAAC,SAAS;AACvD,QAAM,CAAC,WAAW,YAAY,QAAI,wBAA6B;AAC/D,QAAM,CAAC,GAAG,QAAI,6BAA2B,CAAC,OAAO,OAAO,SAAS,aAAa,IAAI,CAAC;AAEnF,SACE,6CAAC,yCACE;AAAA,gBAAY,4CAAC,wBAAK,OAAO,cAAc,SAAS,IAAI,UAAU,MAAM,aAAa,MAAS,GAAG,IAAK;AAAA,IACnG,4CAAC,6BAAa,KAAW,GAAG,MAAM;AAAA,KACpC;AAEJ;AAEA,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;AAChC,QAAQ,OAAO,CAAC;AAChB,QAAQ,aAAa,CAAC,2CAAoB;AAE1C,MAAM,WAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,EAAE,QAAQ,sDAAsD;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,WAAW,SAAS,KAAK,CAAC,CAAC;AACjC,SAAS,OAAO;AAAA,EACd;AACF;AACA,SAAS,aAAa,CAAC,2CAAoB;AAE3C,MAAM,4BAA4B,SAAS,KAAK,CAAC,CAAC;AAClD,0BAA0B,OAAO;AAAA,EAC/B;AAAA,EACA,SAAS;AACX;AAEA,MAAM,4BAA4B,SAAS,KAAK,CAAC,CAAC;AAClD,0BAA0B,OAAO;AAAA,EAC/B,gBAAgB;AAAA,EAChB;AACF;AACA,0BAA0B,aAAa,CAAC,2CAAoB;AAE5D,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AAEpC,MAAM,EAAE,QAAQ,GAAG,WAAW,IAAI;AAIlC,YAAY,OAAO,EAAE,UAAU,CAAC,wCAAiB,UAAU,EAAE;AAE7D,MAAM,gBAAgB,SAAS,KAAK,CAAC,CAAC;AACtC,cAAc,OAAO,EAAE,UAAU,CAAC,EAAE;AAEpC,MAAM,cAAc,SAAS,KAAK,CAAC,CAAC;AACpC,YAAY,OAAO,EAAE,SAAS,MAAM,UAAU,CAAC,EAAE;AAKjD,IAAO,wBAAQ;","names":["import_react"]}