@pallasoft/ps-table-components 1.16.0 → 1.17.1

package/dist/components/ps-streamed-rows.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { PsTableStreamInput } from '../interfaces/table-stream-input';
+export interface PsStreamedRowsProps<RowData> extends PsTableStreamInput<RowData> {
+    children: (rows: RowData[]) => ReactNode;
+}
+export declare const PsStreamedRows: <RowData>({ children, ...input }: PsStreamedRowsProps<RowData>) => import("react").JSX.Element;

package/dist/components/ps-streamed-rows.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStreamedRows = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_table_stream_context_1 = require("../contexts/ps-table-stream-context");
+const use_ps_streamed_rows_1 = require("../hooks/use-ps-streamed-rows");
+const PsStreamedRows = ({ children, ...input }) => {
+    const { rows, status } = (0, use_ps_streamed_rows_1.usePsStreamedRows)(input);
+    return ((0, jsx_runtime_1.jsx)(ps_table_stream_context_1.PsTableStreamContext.Provider, { value: status, children: children(rows) }));
+};
+exports.PsStreamedRows = PsStreamedRows;

package/dist/components/ps-table-stream-status.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { PsTableStreamStatusData } from '../interfaces/table-stream-status';
+export interface PsTableStreamStatusProps {
+    className?: string;
+    children: (status: PsTableStreamStatusData) => ReactNode;
+}
+export declare const PsTableStreamStatus: ({ className, children }: PsTableStreamStatusProps) => import("react").JSX.Element | null;

package/dist/components/ps-table-stream-status.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStreamStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_ps_table_stream_status_1 = require("../hooks/use-ps-table-stream-status");
+const PsTableStreamStatus = ({ className, children }) => {
+    const status = (0, use_ps_table_stream_status_1.usePsTableStreamStatus)();
+    if (status === null)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-live": 'polite', className: className, children: children(status) }));
+};
+exports.PsTableStreamStatus = PsTableStreamStatus;

package/dist/contexts/ps-table-stream-context.d.ts

@@ -0,0 +1,2 @@
+import type { PsTableStreamStatusData } from '../interfaces/table-stream-status';
+export declare const PsTableStreamContext: import("react").Context<PsTableStreamStatusData | null>;

package/dist/contexts/ps-table-stream-context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStreamContext = void 0;
+const react_1 = require("react");
+exports.PsTableStreamContext = (0, react_1.createContext)(null);

package/dist/esm/components/ps-streamed-rows.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsTableStreamContext } from '../contexts/ps-table-stream-context';
+import { usePsStreamedRows } from '../hooks/use-ps-streamed-rows';
+export const PsStreamedRows = ({ children, ...input }) => {
+    const { rows, status } = usePsStreamedRows(input);
+    return (_jsx(PsTableStreamContext.Provider, { value: status, children: children(rows) }));
+};

package/dist/esm/components/ps-table-stream-status.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsTableStreamStatus } from '../hooks/use-ps-table-stream-status';
+export const PsTableStreamStatus = ({ className, children }) => {
+    const status = usePsTableStreamStatus();
+    if (status === null)
+        return null;
+    return (_jsx("span", { "aria-live": 'polite', className: className, children: children(status) }));
+};

package/dist/esm/contexts/ps-table-stream-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const PsTableStreamContext = createContext(null);

package/dist/esm/hooks/use-ps-streamed-rows.js

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PsTableStreamService } from '../services/ps-table-stream-service';
+export const usePsStreamedRows = ({ first, getRowId, loadPage, pageSize, total, }) => {
+    const [stream, setStream] = useState({
+        first,
+        hasFailed: false,
+        previous: [],
+        rows: first,
+    });
+    const rowId = useRef(getRowId);
+    const load = useRef(loadPage);
+    const requested = useRef(null);
+    rowId.current = getRowId;
+    load.current = loadPage;
+    if (stream.first !== first)
+        setStream({
+            first,
+            hasFailed: false,
+            previous: PsTableStreamService.merge(stream.rows, stream.previous, getRowId, total),
+            rows: first,
+        });
+    const nextPage = stream.hasFailed
+        ? null
+        : PsTableStreamService.nextPage(stream.rows.length, total, pageSize);
+    useEffect(() => {
+        if (nextPage === null || requested.current === stream.rows)
+            return;
+        const base = stream.rows;
+        requested.current = base;
+        load.current(nextPage).then((page) => setStream((current) => current.rows !== base
+            ? current
+            : page.length === 0
+                ? { ...current, hasFailed: true }
+                : { ...current, rows: PsTableStreamService.append(current.rows, page, rowId.current) }), () => setStream((current) => (current.rows !== base ? current : { ...current, hasFailed: true })));
+    }, [nextPage, stream.rows]);
+    const isStreaming = nextPage !== null;
+    const rows = useMemo(() => isStreaming
+        ? PsTableStreamService.merge(stream.rows, stream.previous, rowId.current, total)
+        : stream.rows, [isStreaming, stream.previous, stream.rows, total]);
+    const status = useMemo(() => (isStreaming ? { loaded: stream.rows.length, total } : null), [isStreaming, stream.rows.length, total]);
+    return { rows, status };
+};

package/dist/esm/hooks/use-ps-table-stream-status.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { PsTableStreamContext } from '../contexts/ps-table-stream-context';
+export const usePsTableStreamStatus = () => useContext(PsTableStreamContext);

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export * from './components/ps-data-table';
+export * from './components/ps-streamed-rows';
+export * from './components/ps-table-stream-status';
 export * from './components/ps-table-group-header';
 export * from './components/ps-table-pagination';
 export * from './constants/table-card-role';
@@ -13,8 +15,14 @@ export * from './interfaces/table-query';
 export * from './interfaces/table-row-action';
 export * from './interfaces/table-row-group';
 export * from './interfaces/table-sort';
+export * from './interfaces/table-stream-input';
+export * from './interfaces/table-stream-result';
+export * from './interfaces/table-stream-status';
+export * from './hooks/use-ps-streamed-rows';
+export * from './hooks/use-ps-table-stream-status';
 export * from './services/ps-table-cell-tooltip-service';
 export * from './services/ps-table-column-size-service';
 export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
+export * from './services/ps-table-stream-service';

package/dist/esm/interfaces/table-stream-input.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-stream-result.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-stream-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-stream-status.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-table-stream-service.js

@@ -0,0 +1,13 @@
+export class PsTableStreamService {
+    static nextPage(loaded, total, pageSize) {
+        return loaded < total ? Math.floor(loaded / pageSize) + 1 : null;
+    }
+    static merge(fresh, previous, getRowId, total) {
+        const freshIds = new Set(fresh.map(getRowId));
+        return [...fresh, ...previous.filter((row) => !freshIds.has(getRowId(row)))].slice(0, total);
+    }
+    static append(rows, page, getRowId) {
+        const seen = new Set(rows.map(getRowId));
+        return [...rows, ...page.filter((row) => !seen.has(getRowId(row)))];
+    }
+}

package/dist/hooks/use-ps-streamed-rows.d.ts

@@ -0,0 +1,3 @@
+import type { PsTableStreamInput } from '../interfaces/table-stream-input';
+import type { PsTableStreamResult } from '../interfaces/table-stream-result';
+export declare const usePsStreamedRows: <RowData>({ first, getRowId, loadPage, pageSize, total, }: PsTableStreamInput<RowData>) => PsTableStreamResult<RowData>;

package/dist/hooks/use-ps-streamed-rows.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsStreamedRows = void 0;
+const react_1 = require("react");
+const ps_table_stream_service_1 = require("../services/ps-table-stream-service");
+const usePsStreamedRows = ({ first, getRowId, loadPage, pageSize, total, }) => {
+    const [stream, setStream] = (0, react_1.useState)({
+        first,
+        hasFailed: false,
+        previous: [],
+        rows: first,
+    });
+    const rowId = (0, react_1.useRef)(getRowId);
+    const load = (0, react_1.useRef)(loadPage);
+    const requested = (0, react_1.useRef)(null);
+    rowId.current = getRowId;
+    load.current = loadPage;
+    if (stream.first !== first)
+        setStream({
+            first,
+            hasFailed: false,
+            previous: ps_table_stream_service_1.PsTableStreamService.merge(stream.rows, stream.previous, getRowId, total),
+            rows: first,
+        });
+    const nextPage = stream.hasFailed
+        ? null
+        : ps_table_stream_service_1.PsTableStreamService.nextPage(stream.rows.length, total, pageSize);
+    (0, react_1.useEffect)(() => {
+        if (nextPage === null || requested.current === stream.rows)
+            return;
+        const base = stream.rows;
+        requested.current = base;
+        load.current(nextPage).then((page) => setStream((current) => current.rows !== base
+            ? current
+            : page.length === 0
+                ? { ...current, hasFailed: true }
+                : { ...current, rows: ps_table_stream_service_1.PsTableStreamService.append(current.rows, page, rowId.current) }), () => setStream((current) => (current.rows !== base ? current : { ...current, hasFailed: true })));
+    }, [nextPage, stream.rows]);
+    const isStreaming = nextPage !== null;
+    const rows = (0, react_1.useMemo)(() => isStreaming
+        ? ps_table_stream_service_1.PsTableStreamService.merge(stream.rows, stream.previous, rowId.current, total)
+        : stream.rows, [isStreaming, stream.previous, stream.rows, total]);
+    const status = (0, react_1.useMemo)(() => (isStreaming ? { loaded: stream.rows.length, total } : null), [isStreaming, stream.rows.length, total]);
+    return { rows, status };
+};
+exports.usePsStreamedRows = usePsStreamedRows;

package/dist/hooks/use-ps-table-stream-status.d.ts

@@ -0,0 +1,2 @@
+import type { PsTableStreamStatusData } from '../interfaces/table-stream-status';
+export declare const usePsTableStreamStatus: () => PsTableStreamStatusData | null;

package/dist/hooks/use-ps-table-stream-status.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTableStreamStatus = void 0;
+const react_1 = require("react");
+const ps_table_stream_context_1 = require("../contexts/ps-table-stream-context");
+const usePsTableStreamStatus = () => (0, react_1.useContext)(ps_table_stream_context_1.PsTableStreamContext);
+exports.usePsTableStreamStatus = usePsTableStreamStatus;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './components/ps-data-table';
+export * from './components/ps-streamed-rows';
+export * from './components/ps-table-stream-status';
 export * from './components/ps-table-group-header';
 export * from './components/ps-table-pagination';
 export * from './constants/table-card-role';
@@ -13,8 +15,14 @@ export * from './interfaces/table-query';
 export * from './interfaces/table-row-action';
 export * from './interfaces/table-row-group';
 export * from './interfaces/table-sort';
+export * from './interfaces/table-stream-input';
+export * from './interfaces/table-stream-result';
+export * from './interfaces/table-stream-status';
+export * from './hooks/use-ps-streamed-rows';
+export * from './hooks/use-ps-table-stream-status';
 export * from './services/ps-table-cell-tooltip-service';
 export * from './services/ps-table-column-size-service';
 export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
+export * from './services/ps-table-stream-service';

package/dist/index.js

@@ -15,6 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-data-table"), exports);
+__exportStar(require("./components/ps-streamed-rows"), exports);
+__exportStar(require("./components/ps-table-stream-status"), exports);
 __exportStar(require("./components/ps-table-group-header"), exports);
 __exportStar(require("./components/ps-table-pagination"), exports);
 __exportStar(require("./constants/table-card-role"), exports);
@@ -29,8 +31,14 @@ __exportStar(require("./interfaces/table-query"), exports);
 __exportStar(require("./interfaces/table-row-action"), exports);
 __exportStar(require("./interfaces/table-row-group"), exports);
 __exportStar(require("./interfaces/table-sort"), exports);
+__exportStar(require("./interfaces/table-stream-input"), exports);
+__exportStar(require("./interfaces/table-stream-result"), exports);
+__exportStar(require("./interfaces/table-stream-status"), exports);
+__exportStar(require("./hooks/use-ps-streamed-rows"), exports);
+__exportStar(require("./hooks/use-ps-table-stream-status"), exports);
 __exportStar(require("./services/ps-table-cell-tooltip-service"), exports);
 __exportStar(require("./services/ps-table-column-size-service"), exports);
 __exportStar(require("./services/ps-table-group-service"), exports);
 __exportStar(require("./services/ps-table-query-service"), exports);
 __exportStar(require("./services/ps-table-search-service"), exports);
+__exportStar(require("./services/ps-table-stream-service"), exports);

package/dist/interfaces/table-stream-input.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableStreamInput<RowData> {
+    first: RowData[];
+    getRowId: (row: RowData) => string;
+    loadPage: (page: number) => Promise<RowData[]>;
+    pageSize: number;
+    total: number;
+}

package/dist/interfaces/table-stream-input.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-stream-result.d.ts

@@ -0,0 +1,5 @@
+import type { PsTableStreamStatusData } from './table-stream-status';
+export interface PsTableStreamResult<RowData> {
+    rows: RowData[];
+    status: PsTableStreamStatusData | null;
+}

package/dist/interfaces/table-stream-result.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-stream-state.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableStreamState<RowData> {
+    first: RowData[];
+    hasFailed: boolean;
+    previous: RowData[];
+    rows: RowData[];
+}

package/dist/interfaces/table-stream-state.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-stream-status.d.ts

@@ -0,0 +1,4 @@
+export interface PsTableStreamStatusData {
+    loaded: number;
+    total: number;
+}

package/dist/interfaces/table-stream-status.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-table-stream-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsTableStreamService {
+    static nextPage(loaded: number, total: number, pageSize: number): number | null;
+    static merge<RowData>(fresh: RowData[], previous: RowData[], getRowId: (row: RowData) => string, total: number): RowData[];
+    static append<RowData>(rows: RowData[], page: RowData[], getRowId: (row: RowData) => string): RowData[];
+}

package/dist/services/ps-table-stream-service.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableStreamService = void 0;
+class PsTableStreamService {
+    static nextPage(loaded, total, pageSize) {
+        return loaded < total ? Math.floor(loaded / pageSize) + 1 : null;
+    }
+    static merge(fresh, previous, getRowId, total) {
+        const freshIds = new Set(fresh.map(getRowId));
+        return [...fresh, ...previous.filter((row) => !freshIds.has(getRowId(row)))].slice(0, total);
+    }
+    static append(rows, page, getRowId) {
+        const seen = new Set(rows.map(getRowId));
+        return [...rows, ...page.filter((row) => !seen.has(getRowId(row)))];
+    }
+}
+exports.PsTableStreamService = PsTableStreamService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.16.0",
+	"version": "1.17.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -9,7 +9,6 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/esm/index.js",
 			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"