@pallasoft/ps-core-components 2.3.1 → 2.5.0

package/dist/esm/hooks/use-ps-invisible-recaptcha.js

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+let scriptLoadPromise = null;
+const explicitRenderQuery = 'render=explicit';
+const loadRecaptchaScript = (scriptUrl) => {
+    if (scriptLoadPromise)
+        return scriptLoadPromise;
+    const scriptSrc = `${scriptUrl}?${explicitRenderQuery}`;
+    scriptLoadPromise = new Promise((resolve, reject) => {
+        const existing = document.querySelector(`script[src="${scriptSrc}"]`);
+        if (existing) {
+            existing.addEventListener('load', () => resolve());
+            existing.addEventListener('error', () => reject(new Error('Failed to load reCAPTCHA')));
+            if (window.grecaptcha)
+                resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = scriptSrc;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load reCAPTCHA'));
+        document.head.appendChild(script);
+    });
+    return scriptLoadPromise;
+};
+export const usePsInvisibleRecaptcha = ({ siteKey, scriptUrl, badgePosition = 'bottomright', }) => {
+    const [isReady, setIsReady] = useState(false);
+    const widgetIdRef = useRef(null);
+    const containerRef = useRef(null);
+    const pendingRef = useRef(null);
+    useEffect(() => {
+        let isMounted = true;
+        const container = document.createElement('div');
+        container.style.display = 'none';
+        document.body.appendChild(container);
+        containerRef.current = container;
+        loadRecaptchaScript(scriptUrl)
+            .then(() => {
+            if (!isMounted || !window.grecaptcha)
+                return;
+            window.grecaptcha.ready(() => {
+                if (!isMounted || !window.grecaptcha || !containerRef.current)
+                    return;
+                widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
+                    'sitekey': siteKey,
+                    'size': 'invisible',
+                    'badge': badgePosition,
+                    'callback': (token) => {
+                        pendingRef.current?.resolve(token);
+                        pendingRef.current = null;
+                    },
+                    'expired-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA expired'));
+                        pendingRef.current = null;
+                    },
+                    'error-callback': () => {
+                        pendingRef.current?.reject(new Error('reCAPTCHA verification failed'));
+                        pendingRef.current = null;
+                    },
+                });
+                setIsReady(true);
+            });
+        })
+            .catch(() => {
+            if (isMounted)
+                setIsReady(false);
+        });
+        return () => {
+            isMounted = false;
+            container.remove();
+            containerRef.current = null;
+        };
+    }, [siteKey, scriptUrl, badgePosition]);
+    const execute = useCallback(() => {
+        return new Promise((resolve, reject) => {
+            if (!window.grecaptcha || widgetIdRef.current === null) {
+                reject(new Error('reCAPTCHA is not ready yet'));
+                return;
+            }
+            pendingRef.current = { resolve, reject };
+            window.grecaptcha.execute(widgetIdRef.current);
+        }).finally(() => {
+            if (window.grecaptcha && widgetIdRef.current !== null) {
+                window.grecaptcha.reset(widgetIdRef.current);
+            }
+        });
+    }, []);
+    return { execute, isReady };
+};

package/dist/esm/hooks/use-ps-layer-z-index.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { PallasoftZIndexService } from '@pallasoft/ps-design-system';
+import { PsLayerContext } from '../contexts/ps-layer-context';
+export const usePsLayerZIndex = (layer) => PallasoftZIndexService.above(useContext(PsLayerContext), layer);

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

@@ -0,0 +1,41 @@
+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) => {
+    const [state, setState] = useState(hidden);
+    const timers = useRef([]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const clear = () => {
+            timers.current.forEach((timer) => window.clearTimeout(timer));
+            timers.current.forEach((timer) => window.clearInterval(timer));
+            timers.current = [];
+        };
+        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));
+            return clear;
+        }
+        setState((current) => current.isVisible
+            ? {
+                isAnimated: true,
+                isVisible: true,
+                width: PsNavigationProgressConfig.completeWidth,
+            }
+            : current);
+        timers.current.push(window.setTimeout(() => setState((current) => ({ ...current, isVisible: false })), PsNavigationProgressConfig.transitionMs), window.setTimeout(() => setState(hidden), PsNavigationProgressConfig.transitionMs + PsNavigationProgressConfig.fadeMs));
+        return clear;
+    }, [isLoading]);
+    return state;
+};

package/dist/esm/hooks/use-ps-route-loader-data.js

@@ -0,0 +1,12 @@
+export const createPsRouteLoaderDataHook = (routeId) => {
+    let cache;
+    return () => {
+        const { useRouteLoaderData } = require('@remix-run/react');
+        const data = useRouteLoaderData(routeId);
+        if (data !== undefined)
+            cache = data;
+        if (cache === undefined)
+            throw new Error(`No loader data found for route "${routeId}"`);
+        return cache;
+    };
+};

package/dist/esm/hooks/use-ps-viewport.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { PallasoftViewportService, PallasoftViewportTier } from '@pallasoft/ps-design-system';
+export const usePsViewport = (defaultTier = PallasoftViewportTier.Desktop) => {
+    const [tier, setTier] = useState(defaultTier);
+    useEffect(() => {
+        const resolve = () => setTier(PallasoftViewportService.getTier(window.innerWidth));
+        resolve();
+        const tabletQuery = window.matchMedia(PallasoftViewportService.getTabletQuery());
+        const desktopQuery = window.matchMedia(PallasoftViewportService.getDesktopQuery());
+        tabletQuery.addEventListener('change', resolve);
+        desktopQuery.addEventListener('change', resolve);
+        return () => {
+            tabletQuery.removeEventListener('change', resolve);
+            desktopQuery.removeEventListener('change', resolve);
+        };
+    }, []);
+    return tier;
+};

package/dist/esm/index.js

@@ -0,0 +1,43 @@
+export * from './components/ps-layer';
+export * from './components/ps-accordion';
+export * from './components/ps-action-tile';
+export * from './components/ps-audio-spectrum';
+export * from './components/ps-badge';
+export * from './components/ps-button';
+export * from './components/ps-card';
+export * from './components/ps-draggable-grid';
+export * from './components/ps-empty-state';
+export * from './components/ps-fab';
+export * from './components/ps-infinite-scroll';
+export * from './components/ps-list-tile';
+export * from './components/ps-metric-card';
+export * from './components/ps-pill';
+export * from './components/ps-portable-text';
+export * from './components/ps-reflective-app-shell';
+export * from './components/ps-navigation-progress';
+export * from './components/ps-section-header';
+export * from './components/ps-site-header';
+export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
+export * from './components/ps-spinner';
+export * from './components/ps-theme-toggle';
+export * from './components/ps-voice-orb';
+export * from './hooks/use-ps-audio-spectrum';
+export * from './hooks/use-ps-exit-transition';
+export * from './hooks/use-ps-hide-on-scroll';
+export * from './hooks/use-ps-invisible-recaptcha';
+export * from './contexts/ps-layer-context';
+export * from './hooks/use-ps-layer-z-index';
+export * from './hooks/use-ps-route-loader-data';
+export * from './hooks/use-ps-viewport';
+export * from './interfaces/ps-component-props';
+export * from './models/ps-voice-orb';
+export * from './models/ps-navigation-progress';
+export * from './hooks/use-ps-navigation-progress';
+export * from './models/ps-draggable-grid';
+export * from './constants/ps-draggable-grid';
+export * from './constants/ps-navigation-progress-config';

package/dist/esm/interfaces/ps-component-props.js

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

package/dist/esm/models/ps-draggable-grid.js

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

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

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

package/dist/esm/models/ps-recaptcha-pending-request.js

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

package/dist/esm/models/ps-remix-react-module.js

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

package/dist/esm/models/ps-voice-orb.js

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

package/dist/hooks/use-ps-exit-transition.js

@@ -26,7 +26,6 @@ const usePsExitTransition = (isOpen, durationMs = 180) => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen, durationMs]);
     hasRenderedRef.current = shouldRender;
     return { isClosing, shouldRender };

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 [state, setState] = (0, react_1.useState)(hidden);
+    const timers = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const clear = () => {
+            timers.current.forEach((timer) => window.clearTimeout(timer));
+            timers.current.forEach((timer) => window.clearInterval(timer));
+            timers.current = [];
+        };
+        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));
+            return clear;
+        }
+        setState((current) => current.isVisible
+            ? {
+                isAnimated: true,
+                isVisible: true,
+                width: ps_navigation_progress_config_1.PsNavigationProgressConfig.completeWidth,
+            }
+            : 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]);
+    return state;
+};
+exports.usePsNavigationProgress = usePsNavigationProgress;

package/dist/index.d.ts

@@ -18,6 +18,11 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';
 export * from './components/ps-theme-toggle';
 export * from './components/ps-voice-orb';
@@ -31,4 +36,8 @@ export * from './hooks/use-ps-route-loader-data';
 export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-voice-orb';
+export * from './models/ps-navigation-progress';
+export * from './hooks/use-ps-navigation-progress';
+export * from './models/ps-draggable-grid';
+export * from './constants/ps-draggable-grid';
 export * from './constants/ps-navigation-progress-config';

package/dist/index.js

@@ -34,6 +34,11 @@ __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./components/ps-skeleton-card"), exports);
+__exportStar(require("./components/ps-skeleton-group"), exports);
+__exportStar(require("./components/ps-skeleton-list"), exports);
+__exportStar(require("./components/ps-skeleton-table"), exports);
+__exportStar(require("./components/ps-skeleton-text"), exports);
 __exportStar(require("./components/ps-spinner"), exports);
 __exportStar(require("./components/ps-theme-toggle"), exports);
 __exportStar(require("./components/ps-voice-orb"), exports);
@@ -47,4 +52,8 @@ __exportStar(require("./hooks/use-ps-route-loader-data"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
+__exportStar(require("./models/ps-navigation-progress"), exports);
+__exportStar(require("./hooks/use-ps-navigation-progress"), exports);
+__exportStar(require("./models/ps-draggable-grid"), exports);
+__exportStar(require("./constants/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-navigation-progress-config"), exports);

package/dist/models/ps-draggable-grid.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+export interface PsDraggableGridItem {
+    id: string;
+    label: string;
+}
+export interface PsDraggableGridRenderOptions<TItem extends PsDraggableGridItem> {
+    handle: JSX.Element;
+    index: number;
+    isDragging: boolean;
+    isOverlay: boolean;
+    item: TItem;
+}
+export interface PsDraggableGridProps<TItem extends PsDraggableGridItem> {
+    getItemClassName?: (item: TItem) => string;
+    items: TItem[];
+    onReorder: (items: TItem[]) => void;
+    onReorderEnd?: (items: TItem[]) => void;
+    renderItem: (options: PsDraggableGridRenderOptions<TItem>) => JSX.Element | null;
+}

package/dist/models/ps-draggable-grid.js

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

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

@@ -0,0 +1,5 @@
+export interface PsNavigationProgressState {
+    isAnimated: boolean;
+    isVisible: boolean;
+    width: number;
+}

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

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

package/dist/models/ps-recaptcha-pending-request.d.ts

@@ -0,0 +1,4 @@
+export interface PsRecaptchaPendingRequest {
+    reject: (error: Error) => void;
+    resolve: (token: string) => void;
+}

package/dist/models/ps-recaptcha-pending-request.js

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

package/dist/models/ps-remix-react-module.d.ts

@@ -0,0 +1,3 @@
+export interface PsRemixReactModule {
+    useRouteLoaderData: (routeId: string) => unknown;
+}

package/dist/models/ps-remix-react-module.js

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

package/package.json

@@ -1,12 +1,15 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.3.1",
+	"version": "2.5.0",
 	"private": false,
 	"main": "./dist/index.js",
+	"module": "./dist/esm/index.js",
 	"types": "./dist/index.d.ts",
+	"sideEffects": false,
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"
 		}
@@ -16,7 +19,7 @@
 	],
 	"scripts": {
 		"husky:prepare": "npx husky",
-		"build": "tsc",
+		"build": "tsc && tsc -p tsconfig.esm.json",
 		"setup:graphify": "sh scripts/graphify-setup.sh",
 		"update:graphify": "sh scripts/graphify-update.sh",
 		"lint": "npm run lint:eslint",
@@ -28,6 +31,9 @@
 		"release": "semantic-release"
 	},
 	"dependencies": {
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
 		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.1.0",
 		"@portabletext/react": "^3.2.4",
@@ -36,7 +42,8 @@
 		"react-infinite-scroll-component": "^6.1.1"
 	},
 	"peerDependencies": {
-		"react": "^18 || ^19"
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^20.1.0",
@@ -50,6 +57,7 @@
 		"@semantic-release/npm": "^12.0.0",
 		"@semantic-release/release-notes-generator": "^14.0.1",
 		"@types/react": "^18.3.28",
+		"@types/react-dom": "^18.3.7",
 		"@typescript-eslint/eslint-plugin": "^8.48.0",
 		"@typescript-eslint/parser": "^8.48.0",
 		"commitlint": "^20.1.0",