@pallasoft/ps-core-components 2.43.0 → 2.44.1

package/dist/components/ps-skeleton-table.d.ts

@@ -1,3 +1,4 @@
+import type { PsSkeletonTableRow } from '../models/ps-skeleton-table-row';
 export interface PsSkeletonTableProps {
     alignments?: ('left' | 'right')[];
     className?: string;
@@ -5,6 +6,7 @@ export interface PsSkeletonTableProps {
     hasFooter?: boolean;
     hasToolbar?: boolean;
     isFramed?: boolean;
+    rowLayout?: PsSkeletonTableRow[];
     rows?: number;
 }
-export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;
+export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rowLayout, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton-table.js

@@ -7,7 +7,8 @@ const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
+const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
+    const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
     const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
     const isRight = (columnIndex) => alignments !== undefined
         ? alignments[columnIndex] === 'right'
@@ -17,6 +18,18 @@ const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false
             : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
     return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: ps_skeleton_shape_1.PsSkeletonShape.Control }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: ps_skeleton_shape_1.PsSkeletonShape.Button })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: isFramed
                     ? ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', ps_skeleton_config_1.PsSkeletonConfig.tableFrameClassName)
-                    : 'overflow-hidden', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rowIndex, columnIndex, false)) }, rowIndex))), hasFooter ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rows, columnIndex, true)) })) : null] })] }));
+                    : 'overflow-hidden', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), layout.map((row, rowIndex) => {
+                        const isSection = row.isSection === true;
+                        const depth = row.depth === undefined ? 0 : row.depth;
+                        return ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => {
+                                if (isSection && columnIndex > 0 && !isRight(columnIndex))
+                                    return (0, jsx_runtime_1.jsx)("span", {}, columnIndex);
+                                if (columnIndex > 0 || (depth === 0 && !isSection))
+                                    return cell(rowIndex, columnIndex, isSection);
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 items-center gap-3', style: {
+                                        paddingInlineStart: `${depth * ps_skeleton_config_1.PsSkeletonConfig.tableIndentRem}rem`,
+                                    }, children: [isSection ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_skeleton_config_1.PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
+                            }) }, rowIndex));
+                    }), hasFooter ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(layout.length, columnIndex, true)) })) : null] })] }));
 };
 exports.PsSkeletonTable = PsSkeletonTable;

package/dist/constants/ps-button-classes.js

@@ -9,15 +9,15 @@ exports.PsButtonSizeClassNames = {
 };
 exports.PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
-    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    ghost: 'ps-control-surface text-ink enabled:hover:border-primary/40',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
-    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
-    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    secondary: 'ps-control-surface text-ink enabled:hover:border-primary/40 enabled:hover:text-primary dark:enabled:hover:text-white',
+    surface: 'ps-control-surface text-ink enabled:hover:border-primary/40',
 };
 exports.PsLinkButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white hover:opacity-90',
-    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    ghost: 'ps-control-surface text-ink hover:border-primary/40',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
-    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
-    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    secondary: 'ps-control-surface text-ink hover:border-primary/40 hover:text-primary dark:hover:text-white',
+    surface: 'ps-control-surface text-ink hover:border-primary/40',
 };

package/dist/constants/ps-flag-param-value.d.ts

@@ -0,0 +1,3 @@
+export declare const PsFlagParamValue: {
+    readonly on: "1";
+};

package/dist/constants/ps-flag-param-value.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFlagParamValue = void 0;
+exports.PsFlagParamValue = {
+    on: '1',
+};

package/dist/constants/ps-query-param-config.d.ts

@@ -0,0 +1,4 @@
+import type { PsSearchParamsSetOptions } from '../models/ps-search-params-set-options';
+export declare const PsQueryParamConfig: {
+    setOptions: PsSearchParamsSetOptions;
+};

package/dist/constants/ps-query-param-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsQueryParamConfig = void 0;
+exports.PsQueryParamConfig = {
+    setOptions: { preventScrollReset: true, replace: true },
+};

package/dist/constants/ps-rerender-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsRerenderConfig: {
+    readonly maxTimerMs: 2147483647;
+};

package/dist/constants/ps-rerender-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRerenderConfig = void 0;
+exports.PsRerenderConfig = {
+    maxTimerMs: 2147483647,
+};

package/dist/constants/ps-skeleton-config.d.ts

@@ -14,6 +14,8 @@ export declare const PsSkeletonConfig: {
     readonly tabWidthClassName: "w-24";
     readonly tabCount: 4;
     readonly tableFrameClassName: "rounded-[0.875rem]";
+    readonly tableIndentRem: 1.25;
+    readonly tableSectionMarkerClassName: "h-5 w-5 shrink-0 rounded-md";
     readonly shapeClassNames: Record<PsSkeletonShape, string>;
     readonly shapeSizes: Record<PsSkeletonShape, PsSkeletonSize>;
 };

package/dist/constants/ps-skeleton-config.js

@@ -20,6 +20,8 @@ exports.PsSkeletonConfig = {
     tabWidthClassName: 'w-24',
     tabCount: 4,
     tableFrameClassName: 'rounded-[0.875rem]',
+    tableIndentRem: 1.25,
+    tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
     shapeClassNames: {
         [ps_skeleton_shape_1.PsSkeletonShape.Badge]: controlRadius,
         [ps_skeleton_shape_1.PsSkeletonShape.Block]: controlRadius,

package/dist/esm/components/ps-skeleton-table.js

@@ -4,7 +4,8 @@ import { PsSkeletonConfig } from '../constants/ps-skeleton-config.js';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
+export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
+    const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
     const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
     const isRight = (columnIndex) => alignments !== undefined
         ? alignments[columnIndex] === 'right'
@@ -14,5 +15,17 @@ export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter
             : PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
     return (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? (_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx(PsSkeleton, { className: 'max-w-sm', shape: PsSkeletonShape.Control }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: PsSkeletonShape.Button })] })) : null, _jsxs("div", { className: isFramed
                     ? PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', PsSkeletonConfig.tableFrameClassName)
-                    : 'overflow-hidden', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rowIndex, columnIndex, false)) }, rowIndex))), hasFooter ? (_jsx("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rows, columnIndex, true)) })) : null] })] }));
+                    : 'overflow-hidden', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), layout.map((row, rowIndex) => {
+                        const isSection = row.isSection === true;
+                        const depth = row.depth === undefined ? 0 : row.depth;
+                        return (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => {
+                                if (isSection && columnIndex > 0 && !isRight(columnIndex))
+                                    return _jsx("span", {}, columnIndex);
+                                if (columnIndex > 0 || (depth === 0 && !isSection))
+                                    return cell(rowIndex, columnIndex, isSection);
+                                return (_jsxs("div", { className: 'flex min-w-0 items-center gap-3', style: {
+                                        paddingInlineStart: `${depth * PsSkeletonConfig.tableIndentRem}rem`,
+                                    }, children: [isSection ? (_jsx(PsSkeleton, { className: PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
+                            }) }, rowIndex));
+                    }), hasFooter ? (_jsx("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(layout.length, columnIndex, true)) })) : null] })] }));
 };

package/dist/esm/constants/ps-button-classes.js

@@ -6,15 +6,15 @@ export const PsButtonSizeClassNames = {
 };
 export const PsButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
-    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    ghost: 'ps-control-surface text-ink enabled:hover:border-primary/40',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
-    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
-    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    secondary: 'ps-control-surface text-ink enabled:hover:border-primary/40 enabled:hover:text-primary dark:enabled:hover:text-white',
+    surface: 'ps-control-surface text-ink enabled:hover:border-primary/40',
 };
 export const PsLinkButtonVariantClassNames = {
     danger: 'border-danger bg-danger text-white hover:opacity-90',
-    ghost: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    ghost: 'ps-control-surface text-ink hover:border-primary/40',
     primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
-    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
-    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    secondary: 'ps-control-surface text-ink hover:border-primary/40 hover:text-primary dark:hover:text-white',
+    surface: 'ps-control-surface text-ink hover:border-primary/40',
 };

package/dist/esm/constants/ps-flag-param-value.js

@@ -0,0 +1,3 @@
+export const PsFlagParamValue = {
+    on: '1',
+};

package/dist/esm/constants/ps-query-param-config.js

@@ -0,0 +1,3 @@
+export const PsQueryParamConfig = {
+    setOptions: { preventScrollReset: true, replace: true },
+};

package/dist/esm/constants/ps-rerender-config.js

@@ -0,0 +1,3 @@
+export const PsRerenderConfig = {
+    maxTimerMs: 2147483647,
+};

package/dist/esm/constants/ps-skeleton-config.js

@@ -17,6 +17,8 @@ export const PsSkeletonConfig = {
     tabWidthClassName: 'w-24',
     tabCount: 4,
     tableFrameClassName: 'rounded-[0.875rem]',
+    tableIndentRem: 1.25,
+    tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
     shapeClassNames: {
         [PsSkeletonShape.Badge]: controlRadius,
         [PsSkeletonShape.Block]: controlRadius,

package/dist/esm/hooks/use-ps-choice-param.js

@@ -0,0 +1,6 @@
+import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
+import { PsQueryParamService } from '../services/ps-query-param-service.js';
+export const usePsChoiceParam = ([searchParams, setSearchParams], { fallback, name, options, resetParams }) => ({
+    onChange: (value) => setSearchParams((current) => PsQueryParamService.withChoice(current, name, value, fallback, resetParams), PsQueryParamConfig.setOptions),
+    value: PsQueryParamService.choice(searchParams.get(name), options, fallback),
+});

package/dist/esm/hooks/use-ps-flag-param.js

@@ -0,0 +1,6 @@
+import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
+import { PsQueryParamService } from '../services/ps-query-param-service.js';
+export const usePsFlagParam = ([searchParams, setSearchParams], { name, resetParams }) => ({
+    isOn: PsQueryParamService.flag(searchParams.get(name)),
+    onChange: (isOn) => setSearchParams((current) => PsQueryParamService.withFlag(current, name, isOn, resetParams), PsQueryParamConfig.setOptions),
+});

package/dist/esm/hooks/use-ps-rerender-at.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { PsRerenderConfig } from '../constants/ps-rerender-config.js';
+export const usePsRerenderAt = (atMs) => {
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (atMs === null || typeof window === 'undefined')
+            return;
+        let timer = 0;
+        const arm = () => {
+            const remaining = atMs - Date.now();
+            if (remaining <= 0) {
+                setTick((tick) => tick + 1);
+                return;
+            }
+            timer = window.setTimeout(arm, Math.min(remaining, PsRerenderConfig.maxTimerMs));
+        };
+        arm();
+        return () => window.clearTimeout(timer);
+    }, [atMs]);
+    return Date.now();
+};

package/dist/esm/index.js

@@ -59,6 +59,7 @@ export * from './components/ps-skeleton.js';
 export * from './services/ps-scroll-lock-service.js';
 export * from './services/ps-skeleton-class-service.js';
 export * from './models/ps-skeleton-size.js';
+export * from './models/ps-skeleton-table-row.js';
 export * from './constants/ps-skeleton-shape.js';
 export * from './components/ps-skeleton-card.js';
 export * from './components/ps-skeleton-group.js';
@@ -202,3 +203,17 @@ export * from './hooks/use-ps-scroll-restoration.js';
 export * from './components/ps-scroll-restoration.js';
 export * from './hooks/use-ps-browser-layout-effect.js';
 export * from './models/ps-scroll-pending-save-data.js';
+export * from './constants/ps-flag-param-value.js';
+export * from './constants/ps-query-param-config.js';
+export * from './models/ps-search-params-set-options.js';
+export * from './models/ps-search-params-setter.js';
+export * from './models/ps-search-params-state.js';
+export * from './models/ps-choice-param-data.js';
+export * from './models/ps-flag-param-data.js';
+export * from './models/ps-choice-param-options.js';
+export * from './models/ps-flag-param-options.js';
+export * from './services/ps-query-param-service.js';
+export * from './hooks/use-ps-choice-param.js';
+export * from './hooks/use-ps-flag-param.js';
+export * from './constants/ps-rerender-config.js';
+export * from './hooks/use-ps-rerender-at.js';

package/dist/esm/models/ps-choice-param-data.js

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

package/dist/esm/models/ps-choice-param-options.js

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

package/dist/esm/models/ps-flag-param-data.js

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

package/dist/esm/models/ps-flag-param-options.js

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

package/dist/esm/models/ps-search-params-set-options.js

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

package/dist/esm/models/ps-search-params-setter.js

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

package/dist/esm/models/ps-search-params-state.js

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

package/dist/esm/models/ps-skeleton-table-row.js

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

package/dist/esm/services/ps-query-param-service.js

@@ -0,0 +1,32 @@
+import { PsFlagParamValue } from '../constants/ps-flag-param-value.js';
+export class PsQueryParamService {
+    static choice(value, options, fallback) {
+        const match = options.find((option) => option === value);
+        return match === undefined ? fallback : match;
+    }
+    static withChoice(params, name, value, fallback, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (value === fallback)
+            next.delete(name);
+        else
+            next.set(name, value);
+        return next;
+    }
+    static flag(value) {
+        return value === PsFlagParamValue.on;
+    }
+    static withFlag(params, name, isOn, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (isOn)
+            next.set(name, PsFlagParamValue.on);
+        else
+            next.delete(name);
+        return next;
+    }
+    static cleared(params, resetParams) {
+        const next = new URLSearchParams(params);
+        for (const name of resetParams)
+            next.delete(name);
+        return next;
+    }
+}

package/dist/hooks/use-ps-choice-param.d.ts

@@ -0,0 +1,4 @@
+import type { PsChoiceParamData } from '../models/ps-choice-param-data';
+import type { PsChoiceParamOptions } from '../models/ps-choice-param-options';
+import type { PsSearchParamsState } from '../models/ps-search-params-state';
+export declare const usePsChoiceParam: <Value extends string>([searchParams, setSearchParams]: PsSearchParamsState, { fallback, name, options, resetParams }: PsChoiceParamOptions<Value>) => PsChoiceParamData<Value>;

package/dist/hooks/use-ps-choice-param.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsChoiceParam = void 0;
+const ps_query_param_config_1 = require("../constants/ps-query-param-config");
+const ps_query_param_service_1 = require("../services/ps-query-param-service");
+const usePsChoiceParam = ([searchParams, setSearchParams], { fallback, name, options, resetParams }) => ({
+    onChange: (value) => setSearchParams((current) => ps_query_param_service_1.PsQueryParamService.withChoice(current, name, value, fallback, resetParams), ps_query_param_config_1.PsQueryParamConfig.setOptions),
+    value: ps_query_param_service_1.PsQueryParamService.choice(searchParams.get(name), options, fallback),
+});
+exports.usePsChoiceParam = usePsChoiceParam;

package/dist/hooks/use-ps-flag-param.d.ts

@@ -0,0 +1,4 @@
+import type { PsFlagParamData } from '../models/ps-flag-param-data';
+import type { PsFlagParamOptions } from '../models/ps-flag-param-options';
+import type { PsSearchParamsState } from '../models/ps-search-params-state';
+export declare const usePsFlagParam: ([searchParams, setSearchParams]: PsSearchParamsState, { name, resetParams }: PsFlagParamOptions) => PsFlagParamData;

package/dist/hooks/use-ps-flag-param.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsFlagParam = void 0;
+const ps_query_param_config_1 = require("../constants/ps-query-param-config");
+const ps_query_param_service_1 = require("../services/ps-query-param-service");
+const usePsFlagParam = ([searchParams, setSearchParams], { name, resetParams }) => ({
+    isOn: ps_query_param_service_1.PsQueryParamService.flag(searchParams.get(name)),
+    onChange: (isOn) => setSearchParams((current) => ps_query_param_service_1.PsQueryParamService.withFlag(current, name, isOn, resetParams), ps_query_param_config_1.PsQueryParamConfig.setOptions),
+});
+exports.usePsFlagParam = usePsFlagParam;

package/dist/hooks/use-ps-rerender-at.d.ts

@@ -0,0 +1 @@
+export declare const usePsRerenderAt: (atMs: number | null) => number;

package/dist/hooks/use-ps-rerender-at.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsRerenderAt = void 0;
+const react_1 = require("react");
+const ps_rerender_config_1 = require("../constants/ps-rerender-config");
+const usePsRerenderAt = (atMs) => {
+    const [, setTick] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (atMs === null || typeof window === 'undefined')
+            return;
+        let timer = 0;
+        const arm = () => {
+            const remaining = atMs - Date.now();
+            if (remaining <= 0) {
+                setTick((tick) => tick + 1);
+                return;
+            }
+            timer = window.setTimeout(arm, Math.min(remaining, ps_rerender_config_1.PsRerenderConfig.maxTimerMs));
+        };
+        arm();
+        return () => window.clearTimeout(timer);
+    }, [atMs]);
+    return Date.now();
+};
+exports.usePsRerenderAt = usePsRerenderAt;

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export * from './components/ps-skeleton';
 export * from './services/ps-scroll-lock-service';
 export * from './services/ps-skeleton-class-service';
 export * from './models/ps-skeleton-size';
+export * from './models/ps-skeleton-table-row';
 export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
 export * from './components/ps-skeleton-group';
@@ -202,3 +203,17 @@ export * from './hooks/use-ps-scroll-restoration';
 export * from './components/ps-scroll-restoration';
 export * from './hooks/use-ps-browser-layout-effect';
 export * from './models/ps-scroll-pending-save-data';
+export * from './constants/ps-flag-param-value';
+export * from './constants/ps-query-param-config';
+export * from './models/ps-search-params-set-options';
+export * from './models/ps-search-params-setter';
+export * from './models/ps-search-params-state';
+export * from './models/ps-choice-param-data';
+export * from './models/ps-flag-param-data';
+export * from './models/ps-choice-param-options';
+export * from './models/ps-flag-param-options';
+export * from './services/ps-query-param-service';
+export * from './hooks/use-ps-choice-param';
+export * from './hooks/use-ps-flag-param';
+export * from './constants/ps-rerender-config';
+export * from './hooks/use-ps-rerender-at';

package/dist/index.js

@@ -75,6 +75,7 @@ __exportStar(require("./components/ps-skeleton"), exports);
 __exportStar(require("./services/ps-scroll-lock-service"), exports);
 __exportStar(require("./services/ps-skeleton-class-service"), exports);
 __exportStar(require("./models/ps-skeleton-size"), exports);
+__exportStar(require("./models/ps-skeleton-table-row"), exports);
 __exportStar(require("./constants/ps-skeleton-shape"), exports);
 __exportStar(require("./components/ps-skeleton-card"), exports);
 __exportStar(require("./components/ps-skeleton-group"), exports);
@@ -218,3 +219,17 @@ __exportStar(require("./hooks/use-ps-scroll-restoration"), exports);
 __exportStar(require("./components/ps-scroll-restoration"), exports);
 __exportStar(require("./hooks/use-ps-browser-layout-effect"), exports);
 __exportStar(require("./models/ps-scroll-pending-save-data"), exports);
+__exportStar(require("./constants/ps-flag-param-value"), exports);
+__exportStar(require("./constants/ps-query-param-config"), exports);
+__exportStar(require("./models/ps-search-params-set-options"), exports);
+__exportStar(require("./models/ps-search-params-setter"), exports);
+__exportStar(require("./models/ps-search-params-state"), exports);
+__exportStar(require("./models/ps-choice-param-data"), exports);
+__exportStar(require("./models/ps-flag-param-data"), exports);
+__exportStar(require("./models/ps-choice-param-options"), exports);
+__exportStar(require("./models/ps-flag-param-options"), exports);
+__exportStar(require("./services/ps-query-param-service"), exports);
+__exportStar(require("./hooks/use-ps-choice-param"), exports);
+__exportStar(require("./hooks/use-ps-flag-param"), exports);
+__exportStar(require("./constants/ps-rerender-config"), exports);
+__exportStar(require("./hooks/use-ps-rerender-at"), exports);

package/dist/models/ps-choice-param-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsChoiceParamData<Value extends string> {
+    onChange: (value: Value) => void;
+    value: Value;
+}

package/dist/models/ps-choice-param-data.js

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

package/dist/models/ps-choice-param-options.d.ts

@@ -0,0 +1,6 @@
+export interface PsChoiceParamOptions<Value extends string> {
+    fallback: Value;
+    name: string;
+    options: readonly Value[];
+    resetParams?: readonly string[];
+}

package/dist/models/ps-choice-param-options.js

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

package/dist/models/ps-flag-param-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsFlagParamData {
+    isOn: boolean;
+    onChange: (isOn: boolean) => void;
+}

package/dist/models/ps-flag-param-data.js

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

package/dist/models/ps-flag-param-options.d.ts

@@ -0,0 +1,4 @@
+export interface PsFlagParamOptions {
+    name: string;
+    resetParams?: readonly string[];
+}

package/dist/models/ps-flag-param-options.js

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

package/dist/models/ps-search-params-set-options.d.ts

@@ -0,0 +1,4 @@
+export interface PsSearchParamsSetOptions {
+    preventScrollReset?: boolean;
+    replace?: boolean;
+}

package/dist/models/ps-search-params-set-options.js

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

package/dist/models/ps-search-params-setter.d.ts

@@ -0,0 +1,2 @@
+import type { PsSearchParamsSetOptions } from './ps-search-params-set-options';
+export type PsSearchParamsSetter = (update: (current: URLSearchParams) => URLSearchParams, options?: PsSearchParamsSetOptions) => void;

package/dist/models/ps-search-params-setter.js

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

package/dist/models/ps-search-params-state.d.ts

@@ -0,0 +1,2 @@
+import type { PsSearchParamsSetter } from './ps-search-params-setter';
+export type PsSearchParamsState = readonly [URLSearchParams, PsSearchParamsSetter];

package/dist/models/ps-search-params-state.js

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

package/dist/models/ps-skeleton-table-row.d.ts

@@ -0,0 +1,4 @@
+export interface PsSkeletonTableRow {
+    depth?: number;
+    isSection?: boolean;
+}

package/dist/models/ps-skeleton-table-row.js

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

package/dist/services/ps-query-param-service.d.ts

@@ -0,0 +1,7 @@
+export declare class PsQueryParamService {
+    static choice<Value extends string>(value: string | null, options: readonly Value[], fallback: Value): Value;
+    static withChoice<Value extends string>(params: URLSearchParams, name: string, value: Value, fallback: Value, resetParams?: readonly string[]): URLSearchParams;
+    static flag(value: string | null): boolean;
+    static withFlag(params: URLSearchParams, name: string, isOn: boolean, resetParams?: readonly string[]): URLSearchParams;
+    private static cleared;
+}

package/dist/services/ps-query-param-service.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsQueryParamService = void 0;
+const ps_flag_param_value_1 = require("../constants/ps-flag-param-value");
+class PsQueryParamService {
+    static choice(value, options, fallback) {
+        const match = options.find((option) => option === value);
+        return match === undefined ? fallback : match;
+    }
+    static withChoice(params, name, value, fallback, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (value === fallback)
+            next.delete(name);
+        else
+            next.set(name, value);
+        return next;
+    }
+    static flag(value) {
+        return value === ps_flag_param_value_1.PsFlagParamValue.on;
+    }
+    static withFlag(params, name, isOn, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (isOn)
+            next.set(name, ps_flag_param_value_1.PsFlagParamValue.on);
+        else
+            next.delete(name);
+        return next;
+    }
+    static cleared(params, resetParams) {
+        const next = new URLSearchParams(params);
+        for (const name of resetParams)
+            next.delete(name);
+        return next;
+    }
+}
+exports.PsQueryParamService = PsQueryParamService;

package/package.json

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