@pallasoft/ps-core-components 2.28.0 → 2.30.0

package/dist/components/ps-rating-display.d.ts

@@ -0,0 +1,9 @@
+import { PsRatingDisplaySize } from '../constants/ps-rating-display-size';
+export interface PsRatingDisplayProps {
+    className?: string;
+    label: string;
+    max?: number;
+    score: number;
+    size?: PsRatingDisplaySize;
+}
+export declare const PsRatingDisplay: ({ className, label, max, score, size, }: PsRatingDisplayProps) => import("react").JSX.Element;

package/dist/components/ps-rating-display.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_rating_display_config_1 = require("../constants/ps-rating-display-config");
+const ps_rating_display_size_1 = require("../constants/ps-rating-display-size");
+const PsRatingDisplay = ({ className, label, max = ps_rating_display_config_1.PsRatingDisplayConfig.defaultMax, score, size = ps_rating_display_size_1.PsRatingDisplaySize.Medium, }) => ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('flex items-center gap-1', className), role: 'img', children: Array.from({ length: max }, (_, index) => index + 1).map((value) => ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_rating_display_config_1.PsRatingDisplayConfig.iconClassNames[size], value <= score
+            ? ps_rating_display_config_1.PsRatingDisplayConfig.filledClassName
+            : ps_rating_display_config_1.PsRatingDisplayConfig.emptyClassName), iconKey: ps_icons_1.PsIconKey.Star }, value))) }));
+exports.PsRatingDisplay = PsRatingDisplay;

package/dist/components/ps-sortable-list.d.ts

@@ -19,4 +19,4 @@ export interface PsSortableListRowProps<TItem extends PsSortableListItem> {
     item: TItem;
     renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
 }
-export declare const PsSortableList: <TItem extends PsSortableListItem>({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }: PsSortableListProps<TItem>) => JSX.Element;
+export declare const PsSortableList: <TItem extends PsSortableListItem>({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal, role, items, onMove, renderItem, }: PsSortableListProps<TItem>) => JSX.Element;

package/dist/components/ps-sortable-list.js

@@ -30,7 +30,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
             transition: isReduced ? undefined : transition,
         }, children: rendered }));
 };
-const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
     const [activeId, setActiveId] = (0, react_1.useState)(null);
     const sensors = (0, use_ps_drag_sensors_1.usePsDragSensors)();
     const activeIndex = items.findIndex((item) => item.id === activeId);
@@ -66,7 +66,7 @@ const PsSortableList = ({ announcements: texts, className, getHandleLabel, getIt
         onMove(String(active.id), from, to);
     };
     const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
-    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: className, role: role, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_drag_config_1.PsDragClasses.lifted, frames: ps_drag_config_1.PsDragListLiftFrames, children: activeItem !== null
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? sortable_1.horizontalListSortingStrategy : sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: className, role: role, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_drag_config_1.PsDragClasses.lifted, frames: ps_drag_config_1.PsDragListLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

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

@@ -0,0 +1,3 @@
+export declare const PsOptimisticConfig: {
+    readonly pendingPrefix: "pending-";
+};

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

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

package/dist/constants/ps-rating-display-config.d.ts

@@ -0,0 +1,10 @@
+export declare const PsRatingDisplayConfig: {
+    readonly defaultMax: 5;
+    readonly filledClassName: "fill-current text-primary";
+    readonly emptyClassName: "text-ink/30 dark:text-white/30";
+    readonly iconClassNames: {
+        readonly large: "h-8 w-8";
+        readonly medium: "h-6 w-6";
+        readonly small: "h-4 w-4";
+    };
+};

package/dist/constants/ps-rating-display-config.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplayConfig = void 0;
+const ps_rating_display_size_1 = require("./ps-rating-display-size");
+exports.PsRatingDisplayConfig = {
+    defaultMax: 5,
+    filledClassName: 'fill-current text-primary',
+    emptyClassName: 'text-ink/30 dark:text-white/30',
+    iconClassNames: {
+        [ps_rating_display_size_1.PsRatingDisplaySize.Large]: 'h-8 w-8',
+        [ps_rating_display_size_1.PsRatingDisplaySize.Medium]: 'h-6 w-6',
+        [ps_rating_display_size_1.PsRatingDisplaySize.Small]: 'h-4 w-4',
+    },
+};

package/dist/constants/ps-rating-display-size.d.ts

@@ -0,0 +1,5 @@
+export declare enum PsRatingDisplaySize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}

package/dist/constants/ps-rating-display-size.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplaySize = void 0;
+var PsRatingDisplaySize;
+(function (PsRatingDisplaySize) {
+    PsRatingDisplaySize["Large"] = "large";
+    PsRatingDisplaySize["Medium"] = "medium";
+    PsRatingDisplaySize["Small"] = "small";
+})(PsRatingDisplaySize || (exports.PsRatingDisplaySize = PsRatingDisplaySize = {}));

package/dist/esm/components/ps-rating-display.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsRatingDisplayConfig } from '../constants/ps-rating-display-config';
+import { PsRatingDisplaySize } from '../constants/ps-rating-display-size';
+export const PsRatingDisplay = ({ className, label, max = PsRatingDisplayConfig.defaultMax, score, size = PsRatingDisplaySize.Medium, }) => (_jsx("div", { "aria-label": label, className: PallasoftClassNameService.merge('flex items-center gap-1', className), role: 'img', children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx(PsIcon, { className: PallasoftClassNameService.merge(PsRatingDisplayConfig.iconClassNames[size], value <= score
+            ? PsRatingDisplayConfig.filledClassName
+            : PsRatingDisplayConfig.emptyClassName), iconKey: PsIconKey.Star }, value))) }));

package/dist/esm/components/ps-sortable-list.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DndContext, closestCenter, } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { PsDragClasses, PsDragConfig, PsDragListLiftFrames } from '../constants/ps-drag-config';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors';
@@ -27,7 +27,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
             transition: isReduced ? undefined : transition,
         }, children: rendered }));
 };
-export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
     const [activeId, setActiveId] = useState(null);
     const sensors = usePsDragSensors();
     const activeIndex = items.findIndex((item) => item.id === activeId);
@@ -63,7 +63,7 @@ export const PsSortableList = ({ announcements: texts, className, getHandleLabel
         onMove(String(active.id), from, to);
     };
     const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
-    return (_jsxs(DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: verticalListSortingStrategy, children: _jsx("div", { className: className, role: role, children: items.map((item, index) => (_jsx(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeItem !== null
+    return (_jsxs(DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? horizontalListSortingStrategy : verticalListSortingStrategy, children: _jsx("div", { className: className, role: role, children: items.map((item, index) => (_jsx(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: (_jsx(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

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

@@ -0,0 +1,3 @@
+export const PsOptimisticConfig = {
+    pendingPrefix: 'pending-',
+};

package/dist/esm/constants/ps-rating-display-config.js

@@ -0,0 +1,11 @@
+import { PsRatingDisplaySize } from './ps-rating-display-size';
+export const PsRatingDisplayConfig = {
+    defaultMax: 5,
+    filledClassName: 'fill-current text-primary',
+    emptyClassName: 'text-ink/30 dark:text-white/30',
+    iconClassNames: {
+        [PsRatingDisplaySize.Large]: 'h-8 w-8',
+        [PsRatingDisplaySize.Medium]: 'h-6 w-6',
+        [PsRatingDisplaySize.Small]: 'h-4 w-4',
+    },
+};

package/dist/esm/constants/ps-rating-display-size.js

@@ -0,0 +1,6 @@
+export var PsRatingDisplaySize;
+(function (PsRatingDisplaySize) {
+    PsRatingDisplaySize["Large"] = "large";
+    PsRatingDisplaySize["Medium"] = "medium";
+    PsRatingDisplaySize["Small"] = "small";
+})(PsRatingDisplaySize || (PsRatingDisplaySize = {}));

package/dist/esm/hooks/use-ps-optimistic-fetcher.js

@@ -33,7 +33,7 @@ export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSu
         settle.current = resolve;
         sawBusy.current = false;
         dataBefore.current = dataSeen.current;
-        void fetcher.submit(values, { method: 'post' });
+        void fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' });
     }), [fetcher]);
     const send = useCallback(async (queued) => {
         for (const submission of merge === undefined ? queued : merge(queued)) {

package/dist/esm/hooks/use-ps-optimistic-save.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { PsOptimisticSaveService } from '../services/ps-optimistic-save-service';
+import { usePsOptimisticFetcher } from './use-ps-optimistic-fetcher';
+export const usePsOptimisticSave = ({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }) => {
+    const apply = useCallback((base, changes) => PsOptimisticSaveService.apply(base, changes, spec), [spec]);
+    const optimistic = usePsOptimisticFetcher({
+        apply,
+        fetcher,
+        isSuccess,
+        revalidator,
+        rows,
+    });
+    const { submit } = optimistic;
+    const save = useCallback((values, existingId) => submit(PsOptimisticSaveService.saveValues(spec, values, existingId, scopeId)), [scopeId, spec, submit]);
+    const remove = useCallback((ids) => submit(PsOptimisticSaveService.removeValues(spec, ids)), [spec, submit]);
+    return { remove, rows: optimistic.rows, save };
+};

package/dist/esm/index.js

@@ -76,6 +76,14 @@ export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
 export * from './hooks/use-ps-optimistic-fetcher';
+export * from './hooks/use-ps-optimistic-save';
+export * from './constants/ps-optimistic-config';
+export * from './interfaces/ps-optimistic-save-input';
+export * from './interfaces/ps-optimistic-save-result';
+export * from './interfaces/ps-optimistic-save-spec';
+export * from './interfaces/ps-revalidation-args';
+export * from './services/ps-optimistic-save-service';
+export * from './services/ps-client-param-revalidation-service';
 export * from './interfaces/ps-fetcher-like';
 export * from './interfaces/ps-fetcher-submit-options';
 export * from './interfaces/ps-optimistic-fetcher-input';
@@ -154,3 +162,5 @@ export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
 export * from './components/ps-divider';
 export * from './models/ps-divider-orientation';
+export * from './components/ps-rating-display';
+export * from './constants/ps-rating-display-size';

package/dist/esm/interfaces/ps-optimistic-save-input.js

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

package/dist/esm/interfaces/ps-optimistic-save-result.js

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

package/dist/esm/interfaces/ps-optimistic-save-spec.js

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

package/dist/esm/interfaces/ps-revalidation-args.js

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

package/dist/esm/services/ps-client-param-revalidation-service.js

@@ -0,0 +1,26 @@
+export class PsClientParamRevalidationService {
+    static isClientOnlyChange(currentUrl, nextUrl, clientParams) {
+        if (currentUrl.href === nextUrl.href)
+            return false;
+        const without = (url) => {
+            const params = new URLSearchParams(url.search);
+            for (const name of clientParams)
+                params.delete(name);
+            params.sort();
+            return `${url.pathname}?${params.toString()}`;
+        };
+        return without(currentUrl) === without(nextUrl);
+    }
+    static shouldRevalidate({ currentUrl, defaultShouldRevalidate, formMethod, nextUrl }, clientParams) {
+        if (formMethod === undefined &&
+            PsClientParamRevalidationService.isClientOnlyChange(currentUrl, nextUrl, clientParams))
+            return false;
+        return defaultShouldRevalidate;
+    }
+    static shouldRevalidateAfterAction(args, quietPaths) {
+        if (args.formMethod === undefined || args.formAction === undefined)
+            return args.defaultShouldRevalidate;
+        const path = new URL(args.formAction, args.currentUrl).pathname;
+        return quietPaths.includes(path) ? false : args.defaultShouldRevalidate;
+    }
+}

package/dist/esm/services/ps-optimistic-save-service.js

@@ -0,0 +1,64 @@
+import { PsOptimisticConfig } from '../constants/ps-optimistic-config';
+export class PsOptimisticSaveService {
+    static isPending(id) {
+        return id.startsWith(PsOptimisticConfig.pendingPrefix);
+    }
+    static pendingId() {
+        return `${PsOptimisticConfig.pendingPrefix}${crypto.randomUUID()}`;
+    }
+    static saveValues(spec, values, existingId, scopeId) {
+        const fields = spec.isFlat
+            ? Object.fromEntries(Object.entries(values).map(([key, value]) => [key, String(value)]))
+            : { values: JSON.stringify(values) };
+        return {
+            ...fields,
+            [spec.idField]: existingId,
+            intent: spec.intent,
+            pendingId: PsOptimisticSaveService.pendingId(),
+            scopeId,
+        };
+    }
+    static removeValues(spec, ids) {
+        return spec.remove === undefined
+            ? {}
+            : { [spec.remove.idsField]: JSON.stringify(ids), intent: spec.remove.intent };
+    }
+    static apply(rows, changes, spec) {
+        return changes.reduce((current, change) => {
+            if (change.intent === spec.intent)
+                return PsOptimisticSaveService.saved(current, change, spec);
+            if (spec.remove !== undefined && change.intent === spec.remove.intent)
+                return PsOptimisticSaveService.removed(current, change, spec, spec.remove.idsField);
+            return current;
+        }, rows);
+    }
+    static read(raw) {
+        if (raw === undefined)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    static saved(rows, change, spec) {
+        const parsed = spec.isFlat ? change : PsOptimisticSaveService.read(change.values);
+        if (parsed === null || typeof parsed !== 'object')
+            return rows;
+        const existingId = change[spec.idField];
+        const id = existingId === '' ? change.pendingId : existingId;
+        const previous = rows.find((row) => spec.getId(row) === existingId);
+        const built = spec.build(parsed, id, previous === undefined ? null : previous, change.scopeId);
+        if (built === null)
+            return rows;
+        return previous === undefined
+            ? [...rows, built]
+            : rows.map((row) => (spec.getId(row) === existingId ? built : row));
+    }
+    static removed(rows, change, spec, idsField) {
+        const parsed = PsOptimisticSaveService.read(change[idsField]);
+        const ids = new Set(Array.isArray(parsed) ? parsed : []);
+        return rows.filter((row) => !ids.has(spec.getId(row)));
+    }
+}

package/dist/hooks/use-ps-optimistic-fetcher.js

@@ -36,7 +36,7 @@ const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess,
         settle.current = resolve;
         sawBusy.current = false;
         dataBefore.current = dataSeen.current;
-        void fetcher.submit(values, { method: 'post' });
+        void fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' });
     }), [fetcher]);
     const send = (0, react_1.useCallback)(async (queued) => {
         for (const submission of merge === undefined ? queued : merge(queued)) {

package/dist/hooks/use-ps-optimistic-save.d.ts

@@ -0,0 +1,3 @@
+import type { PsOptimisticSaveInput } from '../interfaces/ps-optimistic-save-input';
+import type { PsOptimisticSaveResult } from '../interfaces/ps-optimistic-save-result';
+export declare const usePsOptimisticSave: <Row, Values, Data>({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }: PsOptimisticSaveInput<Row, Values, Data>) => PsOptimisticSaveResult<Row, Values>;

package/dist/hooks/use-ps-optimistic-save.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsOptimisticSave = void 0;
+const react_1 = require("react");
+const ps_optimistic_save_service_1 = require("../services/ps-optimistic-save-service");
+const use_ps_optimistic_fetcher_1 = require("./use-ps-optimistic-fetcher");
+const usePsOptimisticSave = ({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }) => {
+    const apply = (0, react_1.useCallback)((base, changes) => ps_optimistic_save_service_1.PsOptimisticSaveService.apply(base, changes, spec), [spec]);
+    const optimistic = (0, use_ps_optimistic_fetcher_1.usePsOptimisticFetcher)({
+        apply,
+        fetcher,
+        isSuccess,
+        revalidator,
+        rows,
+    });
+    const { submit } = optimistic;
+    const save = (0, react_1.useCallback)((values, existingId) => submit(ps_optimistic_save_service_1.PsOptimisticSaveService.saveValues(spec, values, existingId, scopeId)), [scopeId, spec, submit]);
+    const remove = (0, react_1.useCallback)((ids) => submit(ps_optimistic_save_service_1.PsOptimisticSaveService.removeValues(spec, ids)), [spec, submit]);
+    return { remove, rows: optimistic.rows, save };
+};
+exports.usePsOptimisticSave = usePsOptimisticSave;

package/dist/index.d.ts

@@ -76,6 +76,14 @@ export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
 export * from './hooks/use-ps-optimistic-fetcher';
+export * from './hooks/use-ps-optimistic-save';
+export * from './constants/ps-optimistic-config';
+export * from './interfaces/ps-optimistic-save-input';
+export * from './interfaces/ps-optimistic-save-result';
+export * from './interfaces/ps-optimistic-save-spec';
+export * from './interfaces/ps-revalidation-args';
+export * from './services/ps-optimistic-save-service';
+export * from './services/ps-client-param-revalidation-service';
 export * from './interfaces/ps-fetcher-like';
 export * from './interfaces/ps-fetcher-submit-options';
 export * from './interfaces/ps-optimistic-fetcher-input';
@@ -154,3 +162,5 @@ export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
 export * from './components/ps-divider';
 export * from './models/ps-divider-orientation';
+export * from './components/ps-rating-display';
+export * from './constants/ps-rating-display-size';

package/dist/index.js

@@ -92,6 +92,14 @@ __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("./hooks/use-ps-optimistic-fetcher"), exports);
+__exportStar(require("./hooks/use-ps-optimistic-save"), exports);
+__exportStar(require("./constants/ps-optimistic-config"), exports);
+__exportStar(require("./interfaces/ps-optimistic-save-input"), exports);
+__exportStar(require("./interfaces/ps-optimistic-save-result"), exports);
+__exportStar(require("./interfaces/ps-optimistic-save-spec"), exports);
+__exportStar(require("./interfaces/ps-revalidation-args"), exports);
+__exportStar(require("./services/ps-optimistic-save-service"), exports);
+__exportStar(require("./services/ps-client-param-revalidation-service"), exports);
 __exportStar(require("./interfaces/ps-fetcher-like"), exports);
 __exportStar(require("./interfaces/ps-fetcher-submit-options"), exports);
 __exportStar(require("./interfaces/ps-optimistic-fetcher-input"), exports);
@@ -170,3 +178,5 @@ __exportStar(require("./hooks/use-ps-drag-sensors"), exports);
 __exportStar(require("./hooks/use-ps-reduced-motion"), exports);
 __exportStar(require("./components/ps-divider"), exports);
 __exportStar(require("./models/ps-divider-orientation"), exports);
+__exportStar(require("./components/ps-rating-display"), exports);
+__exportStar(require("./constants/ps-rating-display-size"), exports);

package/dist/interfaces/ps-fetcher-submit-options.d.ts

@@ -1,3 +1,4 @@
 export interface PsFetcherSubmitOptions {
+    defaultShouldRevalidate: boolean;
     method: 'post';
 }

package/dist/interfaces/ps-optimistic-save-input.d.ts

@@ -0,0 +1,11 @@
+import type { PsFetcherLike } from './ps-fetcher-like';
+import type { PsOptimisticSaveSpec } from './ps-optimistic-save-spec';
+import type { PsRevalidatorLike } from './ps-revalidator-like';
+export interface PsOptimisticSaveInput<Row, Values, Data> {
+    fetcher: PsFetcherLike<Data>;
+    isSuccess: (data: Data | undefined) => boolean;
+    revalidator: PsRevalidatorLike;
+    rows: Row[];
+    scopeId: string;
+    spec: PsOptimisticSaveSpec<Row, Values>;
+}

package/dist/interfaces/ps-optimistic-save-input.js

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

package/dist/interfaces/ps-optimistic-save-result.d.ts

@@ -0,0 +1,5 @@
+export interface PsOptimisticSaveResult<Row, Values> {
+    remove: (ids: string[]) => void;
+    rows: Row[];
+    save: (values: Values, existingId: string) => void;
+}

package/dist/interfaces/ps-optimistic-save-result.js

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

package/dist/interfaces/ps-optimistic-save-spec.d.ts

@@ -0,0 +1,11 @@
+export interface PsOptimisticSaveSpec<Row, Values> {
+    build: (values: Values, id: string, previous: Row | null, scopeId: string) => Row | null;
+    getId: (row: Row) => string;
+    idField: string;
+    intent: string;
+    isFlat: boolean;
+    remove?: {
+        idsField: string;
+        intent: string;
+    };
+}

package/dist/interfaces/ps-optimistic-save-spec.js

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

package/dist/interfaces/ps-revalidation-args.d.ts

@@ -0,0 +1,7 @@
+export interface PsRevalidationArgs {
+    currentUrl: URL;
+    defaultShouldRevalidate: boolean;
+    formAction?: string;
+    formMethod?: string;
+    nextUrl: URL;
+}

package/dist/interfaces/ps-revalidation-args.js

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

package/dist/models/ps-sortable-list.d.ts

@@ -27,6 +27,7 @@ export interface PsSortableListProps<TItem extends PsSortableListItem> {
     handleIcon?: JSX.Element;
     instructions: string;
     items: TItem[];
+    isHorizontal?: boolean;
     onMove: (itemId: string, fromIndex: number, toIndex: number) => void;
     renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
 }

package/dist/services/ps-client-param-revalidation-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsRevalidationArgs } from '../interfaces/ps-revalidation-args';
+export declare class PsClientParamRevalidationService {
+    static isClientOnlyChange(currentUrl: URL, nextUrl: URL, clientParams: readonly string[]): boolean;
+    static shouldRevalidate({ currentUrl, defaultShouldRevalidate, formMethod, nextUrl }: PsRevalidationArgs, clientParams: readonly string[]): boolean;
+    static shouldRevalidateAfterAction(args: PsRevalidationArgs, quietPaths: readonly string[]): boolean;
+}

package/dist/services/ps-client-param-revalidation-service.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsClientParamRevalidationService = void 0;
+class PsClientParamRevalidationService {
+    static isClientOnlyChange(currentUrl, nextUrl, clientParams) {
+        if (currentUrl.href === nextUrl.href)
+            return false;
+        const without = (url) => {
+            const params = new URLSearchParams(url.search);
+            for (const name of clientParams)
+                params.delete(name);
+            params.sort();
+            return `${url.pathname}?${params.toString()}`;
+        };
+        return without(currentUrl) === without(nextUrl);
+    }
+    static shouldRevalidate({ currentUrl, defaultShouldRevalidate, formMethod, nextUrl }, clientParams) {
+        if (formMethod === undefined &&
+            PsClientParamRevalidationService.isClientOnlyChange(currentUrl, nextUrl, clientParams))
+            return false;
+        return defaultShouldRevalidate;
+    }
+    static shouldRevalidateAfterAction(args, quietPaths) {
+        if (args.formMethod === undefined || args.formAction === undefined)
+            return args.defaultShouldRevalidate;
+        const path = new URL(args.formAction, args.currentUrl).pathname;
+        return quietPaths.includes(path) ? false : args.defaultShouldRevalidate;
+    }
+}
+exports.PsClientParamRevalidationService = PsClientParamRevalidationService;

package/dist/services/ps-optimistic-save-service.d.ts

@@ -0,0 +1,11 @@
+import type { PsOptimisticSaveSpec } from '../interfaces/ps-optimistic-save-spec';
+export declare class PsOptimisticSaveService {
+    static isPending(id: string): boolean;
+    static pendingId(): string;
+    static saveValues<Row, Values>(spec: PsOptimisticSaveSpec<Row, Values>, values: Values, existingId: string, scopeId: string): Record<string, string>;
+    static removeValues<Row, Values>(spec: PsOptimisticSaveSpec<Row, Values>, ids: string[]): Record<string, string>;
+    static apply<Row, Values>(rows: Row[], changes: Record<string, string>[], spec: PsOptimisticSaveSpec<Row, Values>): Row[];
+    private static read;
+    private static saved;
+    private static removed;
+}

package/dist/services/ps-optimistic-save-service.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOptimisticSaveService = void 0;
+const ps_optimistic_config_1 = require("../constants/ps-optimistic-config");
+class PsOptimisticSaveService {
+    static isPending(id) {
+        return id.startsWith(ps_optimistic_config_1.PsOptimisticConfig.pendingPrefix);
+    }
+    static pendingId() {
+        return `${ps_optimistic_config_1.PsOptimisticConfig.pendingPrefix}${crypto.randomUUID()}`;
+    }
+    static saveValues(spec, values, existingId, scopeId) {
+        const fields = spec.isFlat
+            ? Object.fromEntries(Object.entries(values).map(([key, value]) => [key, String(value)]))
+            : { values: JSON.stringify(values) };
+        return {
+            ...fields,
+            [spec.idField]: existingId,
+            intent: spec.intent,
+            pendingId: PsOptimisticSaveService.pendingId(),
+            scopeId,
+        };
+    }
+    static removeValues(spec, ids) {
+        return spec.remove === undefined
+            ? {}
+            : { [spec.remove.idsField]: JSON.stringify(ids), intent: spec.remove.intent };
+    }
+    static apply(rows, changes, spec) {
+        return changes.reduce((current, change) => {
+            if (change.intent === spec.intent)
+                return PsOptimisticSaveService.saved(current, change, spec);
+            if (spec.remove !== undefined && change.intent === spec.remove.intent)
+                return PsOptimisticSaveService.removed(current, change, spec, spec.remove.idsField);
+            return current;
+        }, rows);
+    }
+    static read(raw) {
+        if (raw === undefined)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
+    static saved(rows, change, spec) {
+        const parsed = spec.isFlat ? change : PsOptimisticSaveService.read(change.values);
+        if (parsed === null || typeof parsed !== 'object')
+            return rows;
+        const existingId = change[spec.idField];
+        const id = existingId === '' ? change.pendingId : existingId;
+        const previous = rows.find((row) => spec.getId(row) === existingId);
+        const built = spec.build(parsed, id, previous === undefined ? null : previous, change.scopeId);
+        if (built === null)
+            return rows;
+        return previous === undefined
+            ? [...rows, built]
+            : rows.map((row) => (spec.getId(row) === existingId ? built : row));
+    }
+    static removed(rows, change, spec, idsField) {
+        const parsed = PsOptimisticSaveService.read(change[idsField]);
+        const ids = new Set(Array.isArray(parsed) ? parsed : []);
+        return rows.filter((row) => !ids.has(spec.getId(row)));
+    }
+}
+exports.PsOptimisticSaveService = PsOptimisticSaveService;

package/package.json

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