@pallasoft/ps-core-components 2.21.0 → 2.22.1

package/dist/components/ps-navigation-progress.d.ts

@@ -1,10 +1,11 @@
 export interface PsNavigationProgressProps {
     className?: string;
     color?: string;
+    delayMs?: number;
     height?: number;
     isLoading?: boolean;
     label?: string;
     progress?: number;
     shadow?: boolean;
 }
-export declare const PsNavigationProgress: ({ className, color, height, isLoading, label, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;
+export declare const PsNavigationProgress: ({ className, color, delayMs, height, isLoading, label, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;

package/dist/components/ps-navigation-progress.js

@@ -5,12 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_navigation_progress_config_1 = require("../constants/ps-navigation-progress-config");
 const use_ps_navigation_progress_1 = require("../hooks/use-ps-navigation-progress");
-const PsNavigationProgress = ({ className, color = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultColor, height = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultHeight, isLoading, label = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+const PsNavigationProgress = ({ className, color = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultColor, delayMs = ps_navigation_progress_config_1.PsNavigationProgressConfig.showDelayMs, height = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultHeight, isLoading, label = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
     const { isAnimated, isVisible, width } = (0, use_ps_navigation_progress_1.usePsNavigationProgress)(isLoading !== undefined
         ? isLoading
         : progress !== undefined &&
             progress > 0 &&
-            progress < ps_navigation_progress_config_1.PsNavigationProgressConfig.completeWidth);
+            progress < ps_navigation_progress_config_1.PsNavigationProgressConfig.completeWidth, delayMs);
     return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(width), className: ps_design_system_1.PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: ps_design_system_1.PallasoftZIndex.Toast }, children: (0, jsx_runtime_1.jsx)("div", { className: 'h-full origin-left ease-out', style: {
                 backgroundColor: color,
                 boxShadow: shadow ? `0 0 10px ${color}, 0 0 5px ${color}` : undefined,

package/dist/constants/ps-navigation-progress-config.d.ts

@@ -4,6 +4,7 @@ export declare const PsNavigationProgressConfig: {
     readonly defaultHeight: 3;
     readonly defaultLabel: "Page loading";
     readonly fadeMs: 320;
+    readonly showDelayMs: 150;
     readonly startWidth: 12;
     readonly transitionMs: 240;
     readonly trickleFactor: 0.14;

package/dist/constants/ps-navigation-progress-config.js

@@ -7,6 +7,7 @@ exports.PsNavigationProgressConfig = {
     defaultHeight: 3,
     defaultLabel: 'Page loading',
     fadeMs: 320,
+    showDelayMs: 150,
     startWidth: 12,
     transitionMs: 240,
     trickleFactor: 0.14,

package/dist/esm/components/ps-navigation-progress.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
 import { usePsNavigationProgress } from '../hooks/use-ps-navigation-progress';
-export const PsNavigationProgress = ({ className, color = PsNavigationProgressConfig.defaultColor, height = PsNavigationProgressConfig.defaultHeight, isLoading, label = PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+export const PsNavigationProgress = ({ className, color = PsNavigationProgressConfig.defaultColor, delayMs = PsNavigationProgressConfig.showDelayMs, height = PsNavigationProgressConfig.defaultHeight, isLoading, label = PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
     const { isAnimated, isVisible, width } = usePsNavigationProgress(isLoading !== undefined
         ? isLoading
         : progress !== undefined &&
             progress > 0 &&
-            progress < PsNavigationProgressConfig.completeWidth);
+            progress < PsNavigationProgressConfig.completeWidth, delayMs);
     return (_jsx("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(width), className: PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: PallasoftZIndex.Toast }, children: _jsx("div", { className: 'h-full origin-left ease-out', style: {
                 backgroundColor: color,
                 boxShadow: shadow ? `0 0 10px ${color}, 0 0 5px ${color}` : undefined,

package/dist/esm/constants/ps-navigation-progress-config.js

@@ -4,6 +4,7 @@ export const PsNavigationProgressConfig = {
     defaultHeight: 3,
     defaultLabel: 'Page loading',
     fadeMs: 320,
+    showDelayMs: 150,
     startWidth: 12,
     transitionMs: 240,
     trickleFactor: 0.14,

package/dist/esm/hooks/use-ps-change-queue.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const usePsChangeQueue = ({ onDrained, onFailed, send, }) => {
+    const pending = useRef([]);
+    const isRunning = useRef(false);
+    const latest = useRef({ onDrained, onFailed, send });
+    useEffect(() => {
+        latest.current = { onDrained, onFailed, send };
+    }, [onDrained, onFailed, send]);
+    const run = useCallback(async () => {
+        if (isRunning.current)
+            return;
+        isRunning.current = true;
+        await Promise.resolve();
+        while (pending.current.length > 0) {
+            const batch = pending.current;
+            pending.current = [];
+            await latest.current.send(batch).catch(() => {
+                const dropped = pending.current;
+                pending.current = [];
+                latest.current.onFailed(batch, dropped);
+            });
+        }
+        isRunning.current = false;
+        latest.current.onDrained();
+    }, []);
+    const enqueue = useCallback((change) => {
+        pending.current = [...pending.current, change];
+        void run();
+    }, [run]);
+    return { enqueue };
+};

package/dist/esm/hooks/use-ps-navigation-progress.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
 const hidden = { isAnimated: false, isVisible: false, width: 0 };
-export const usePsNavigationProgress = (isLoading) => {
+export const usePsNavigationProgress = (isLoading, delayMs = PsNavigationProgressConfig.showDelayMs) => {
     const [state, setState] = useState(hidden);
     const timers = useRef([]);
     useEffect(() => {
@@ -14,17 +14,23 @@ export const usePsNavigationProgress = (isLoading) => {
         };
         clear();
         if (isLoading) {
-            setState({ isAnimated: false, isVisible: true, width: 0 });
-            timers.current.push(window.setTimeout(() => setState({
-                isAnimated: true,
-                isVisible: true,
-                width: PsNavigationProgressConfig.startWidth,
-            }), 0), window.setInterval(() => setState((current) => ({
-                ...current,
-                width: current.width +
-                    (PsNavigationProgressConfig.trickleMax - current.width) *
-                        PsNavigationProgressConfig.trickleFactor,
-            })), PsNavigationProgressConfig.trickleMs));
+            const start = () => {
+                setState({ isAnimated: false, isVisible: true, width: 0 });
+                timers.current.push(window.setTimeout(() => setState({
+                    isAnimated: true,
+                    isVisible: true,
+                    width: PsNavigationProgressConfig.startWidth,
+                }), 0), window.setInterval(() => setState((current) => ({
+                    ...current,
+                    width: current.width +
+                        (PsNavigationProgressConfig.trickleMax - current.width) *
+                            PsNavigationProgressConfig.trickleFactor,
+                })), PsNavigationProgressConfig.trickleMs));
+            };
+            if (delayMs > 0)
+                timers.current.push(window.setTimeout(start, delayMs));
+            else
+                start();
             return clear;
         }
         setState((current) => current.isVisible
@@ -36,6 +42,6 @@ export const usePsNavigationProgress = (isLoading) => {
             : current);
         timers.current.push(window.setTimeout(() => setState((current) => ({ ...current, isVisible: false })), PsNavigationProgressConfig.transitionMs), window.setTimeout(() => setState(hidden), PsNavigationProgressConfig.transitionMs + PsNavigationProgressConfig.fadeMs));
         return clear;
-    }, [isLoading]);
+    }, [delayMs, isLoading]);
     return state;
 };

package/dist/esm/index.js

@@ -56,6 +56,9 @@ export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
 export * from './hooks/use-ps-debounced-value';
+export * from './hooks/use-ps-change-queue';
+export * from './interfaces/ps-change-queue-input';
+export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';

package/dist/esm/interfaces/ps-change-queue-input.js

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

package/dist/esm/interfaces/ps-change-queue-result.js

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

package/dist/hooks/use-ps-change-queue.d.ts

@@ -0,0 +1,3 @@
+import type { PsChangeQueueInput } from '../interfaces/ps-change-queue-input';
+import type { PsChangeQueueResult } from '../interfaces/ps-change-queue-result';
+export declare const usePsChangeQueue: <Change>({ onDrained, onFailed, send, }: PsChangeQueueInput<Change>) => PsChangeQueueResult<Change>;

package/dist/hooks/use-ps-change-queue.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsChangeQueue = void 0;
+const react_1 = require("react");
+const usePsChangeQueue = ({ onDrained, onFailed, send, }) => {
+    const pending = (0, react_1.useRef)([]);
+    const isRunning = (0, react_1.useRef)(false);
+    const latest = (0, react_1.useRef)({ onDrained, onFailed, send });
+    (0, react_1.useEffect)(() => {
+        latest.current = { onDrained, onFailed, send };
+    }, [onDrained, onFailed, send]);
+    const run = (0, react_1.useCallback)(async () => {
+        if (isRunning.current)
+            return;
+        isRunning.current = true;
+        await Promise.resolve();
+        while (pending.current.length > 0) {
+            const batch = pending.current;
+            pending.current = [];
+            await latest.current.send(batch).catch(() => {
+                const dropped = pending.current;
+                pending.current = [];
+                latest.current.onFailed(batch, dropped);
+            });
+        }
+        isRunning.current = false;
+        latest.current.onDrained();
+    }, []);
+    const enqueue = (0, react_1.useCallback)((change) => {
+        pending.current = [...pending.current, change];
+        void run();
+    }, [run]);
+    return { enqueue };
+};
+exports.usePsChangeQueue = usePsChangeQueue;

package/dist/hooks/use-ps-navigation-progress.d.ts

@@ -1,2 +1,2 @@
 import { PsNavigationProgressState } from '../models/ps-navigation-progress';
-export declare const usePsNavigationProgress: (isLoading: boolean) => PsNavigationProgressState;
+export declare const usePsNavigationProgress: (isLoading: boolean, delayMs?: number) => PsNavigationProgressState;

package/dist/hooks/use-ps-navigation-progress.js

@@ -4,7 +4,7 @@ exports.usePsNavigationProgress = void 0;
 const react_1 = require("react");
 const ps_navigation_progress_config_1 = require("../constants/ps-navigation-progress-config");
 const hidden = { isAnimated: false, isVisible: false, width: 0 };
-const usePsNavigationProgress = (isLoading) => {
+const usePsNavigationProgress = (isLoading, delayMs = ps_navigation_progress_config_1.PsNavigationProgressConfig.showDelayMs) => {
     const [state, setState] = (0, react_1.useState)(hidden);
     const timers = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(() => {
@@ -17,17 +17,23 @@ const usePsNavigationProgress = (isLoading) => {
         };
         clear();
         if (isLoading) {
-            setState({ isAnimated: false, isVisible: true, width: 0 });
-            timers.current.push(window.setTimeout(() => setState({
-                isAnimated: true,
-                isVisible: true,
-                width: ps_navigation_progress_config_1.PsNavigationProgressConfig.startWidth,
-            }), 0), window.setInterval(() => setState((current) => ({
-                ...current,
-                width: current.width +
-                    (ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleMax - current.width) *
-                        ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleFactor,
-            })), ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleMs));
+            const start = () => {
+                setState({ isAnimated: false, isVisible: true, width: 0 });
+                timers.current.push(window.setTimeout(() => setState({
+                    isAnimated: true,
+                    isVisible: true,
+                    width: ps_navigation_progress_config_1.PsNavigationProgressConfig.startWidth,
+                }), 0), window.setInterval(() => setState((current) => ({
+                    ...current,
+                    width: current.width +
+                        (ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleMax - current.width) *
+                            ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleFactor,
+                })), ps_navigation_progress_config_1.PsNavigationProgressConfig.trickleMs));
+            };
+            if (delayMs > 0)
+                timers.current.push(window.setTimeout(start, delayMs));
+            else
+                start();
             return clear;
         }
         setState((current) => current.isVisible
@@ -39,7 +45,7 @@ const usePsNavigationProgress = (isLoading) => {
             : current);
         timers.current.push(window.setTimeout(() => setState((current) => ({ ...current, isVisible: false })), ps_navigation_progress_config_1.PsNavigationProgressConfig.transitionMs), window.setTimeout(() => setState(hidden), ps_navigation_progress_config_1.PsNavigationProgressConfig.transitionMs + ps_navigation_progress_config_1.PsNavigationProgressConfig.fadeMs));
         return clear;
-    }, [isLoading]);
+    }, [delayMs, isLoading]);
     return state;
 };
 exports.usePsNavigationProgress = usePsNavigationProgress;

package/dist/index.d.ts

@@ -56,6 +56,9 @@ export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';
 export * from './models/ps-navigation-progress';
 export * from './hooks/use-ps-debounced-value';
+export * from './hooks/use-ps-change-queue';
+export * from './interfaces/ps-change-queue-input';
+export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';

package/dist/index.js

@@ -72,6 +72,9 @@ __exportStar(require("./models/ps-element-size"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
 __exportStar(require("./models/ps-navigation-progress"), exports);
 __exportStar(require("./hooks/use-ps-debounced-value"), exports);
+__exportStar(require("./hooks/use-ps-change-queue"), exports);
+__exportStar(require("./interfaces/ps-change-queue-input"), exports);
+__exportStar(require("./interfaces/ps-change-queue-result"), exports);
 __exportStar(require("./hooks/use-ps-optimistic-rows"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-result"), exports);

package/dist/interfaces/ps-change-queue-input.d.ts

@@ -0,0 +1,5 @@
+export interface PsChangeQueueInput<Change> {
+    onDrained: () => void;
+    onFailed: (failed: Change[], dropped: Change[]) => void;
+    send: (changes: Change[]) => Promise<unknown>;
+}

package/dist/interfaces/ps-change-queue-input.js

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

package/dist/interfaces/ps-change-queue-result.d.ts

@@ -0,0 +1,3 @@
+export interface PsChangeQueueResult<Change> {
+    enqueue: (change: Change) => void;
+}

package/dist/interfaces/ps-change-queue-result.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.21.0",
+	"version": "2.22.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",