@pallasoft/ps-core-components 2.44.1 → 2.45.0

package/dist/components/ps-drag-overlay.js

@@ -4,8 +4,10 @@ exports.PsDragOverlay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const core_1 = require("@dnd-kit/core");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const react_dom_1 = require("react-dom");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
+const use_ps_layer_z_index_1 = require("../hooks/use-ps-layer-z-index");
 const use_ps_reduced_motion_1 = require("../hooks/use-ps-reduced-motion");
 const dropAnimation = {
     duration: ps_drag_config_1.PsDragConfig.dropDuration,
@@ -17,10 +19,9 @@ const dropAnimation = {
 const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
+    const zIndex = (0, use_ps_layer_z_index_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Popover);
     (0, react_1.useEffect)(() => setIsMounted(true), []);
-    if (!isMounted)
-        return null;
-    const lift = (element) => {
+    const lift = (0, react_1.useCallback)((element) => {
         if (element === null || isReduced || typeof element.animate !== 'function')
             return;
         element.animate(frames, {
@@ -28,7 +29,9 @@ const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
             easing: ps_drag_config_1.PsDragConfig.liftEasing,
             fill: 'forwards',
         });
-    };
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, children: children === null ? null : ((0, jsx_runtime_1.jsx)("div", { className: className, ref: lift, children: children })) }), document.body);
+    }, [frames, isReduced]);
+    if (!isMounted)
+        return null;
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, zIndex: zIndex, children: children === null ? null : ((0, jsx_runtime_1.jsx)("div", { className: className, ref: lift, children: children })) }), document.body);
 };
 exports.PsDragOverlay = PsDragOverlay;

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

@@ -9,11 +9,13 @@ const utilities_1 = require("@dnd-kit/utilities");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
 const ps_draggable_grid_1 = require("../constants/ps-draggable-grid");
 const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
+const use_ps_drag_transition_1 = require("../hooks/use-ps-drag-transition");
 const ps_drag_grip_1 = require("./ps-drag-grip");
 const ps_drag_overlay_1 = require("./ps-drag-overlay");
 const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: ps_draggable_grid_1.PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id });
+    const dragTransition = (0, use_ps_drag_transition_1.usePsDragTransition)();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: ((0, jsx_runtime_1.jsx)(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,

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

@@ -8,13 +8,13 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
 const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
-const use_ps_reduced_motion_1 = require("../hooks/use-ps-reduced-motion");
+const use_ps_drag_transition_1 = require("../hooks/use-ps-drag-transition");
 const ps_drag_grip_1 = require("./ps-drag-grip");
 const ps_drag_overlay_1 = require("./ps-drag-overlay");
 const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? ps_drag_config_1.PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) : icon }));
 const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
-    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled, id: item.id });
+    const dragTransition = (0, use_ps_drag_transition_1.usePsDragTransition)();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled, id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,
@@ -27,7 +27,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
     return ((0, jsx_runtime_1.jsx)("div", { className: `${ps_drag_config_1.PsDragClasses.listItem} ${className} ${isDragging ? ps_drag_config_1.PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
             opacity: isDragging ? ps_drag_config_1.PsDragConfig.placeholderOpacity : undefined,
             transform: utilities_1.CSS.Translate.toString(transform),
-            transition: isReduced ? undefined : transition,
+            transition,
         }, children: rendered }));
 };
 const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
@@ -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: 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
+    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.PsDragRowLiftFrames, 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-drag-config.d.ts

@@ -5,6 +5,8 @@ export declare const PsDragConfig: {
     readonly liftDuration: 200;
     readonly liftEasing: "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
     readonly placeholderOpacity: "0.4";
+    readonly sortDuration: 250;
+    readonly sortEasing: "ease";
     readonly touchDelay: 180;
     readonly touchTolerance: 6;
 };
@@ -15,4 +17,5 @@ export declare const PsDragClasses: {
     readonly placeholder: "outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";
 };
 export declare const PsDragLiftFrames: Keyframe[];
+export declare const PsDragRowLiftFrames: Keyframe[];
 export declare const PsDragListLiftFrames: Keyframe[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PsDragListLiftFrames = exports.PsDragLiftFrames = exports.PsDragClasses = exports.PsDragConfig = void 0;
+exports.PsDragListLiftFrames = exports.PsDragRowLiftFrames = exports.PsDragLiftFrames = exports.PsDragClasses = exports.PsDragConfig = void 0;
 exports.PsDragConfig = {
     activationDistance: 6,
     dropDuration: 220,
@@ -8,6 +8,8 @@ exports.PsDragConfig = {
     liftDuration: 200,
     liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
     placeholderOpacity: '0.4',
+    sortDuration: 250,
+    sortEasing: 'ease',
     touchDelay: 180,
     touchTolerance: 6,
 };
@@ -24,7 +26,11 @@ exports.PsDragLiftFrames = [
         transform: 'scale(1.035) rotate(-1.2deg)',
     },
 ];
-exports.PsDragListLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
-    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+exports.PsDragRowLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-0.25deg)',
+    },
 ];
+exports.PsDragListLiftFrames = exports.PsDragRowLiftFrames;

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

@@ -5,6 +5,8 @@ export declare const PsDraggableGridConfig: {
     readonly liftDuration: 200;
     readonly liftEasing: "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
     readonly placeholderOpacity: "0.4";
+    readonly sortDuration: 250;
+    readonly sortEasing: "ease";
     readonly touchDelay: 180;
     readonly touchTolerance: 6;
 };

package/dist/esm/components/ps-drag-overlay.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { createPortal } from 'react-dom';
 import { PsDragConfig } from '../constants/ps-drag-config.js';
+import { usePsLayerZIndex } from '../hooks/use-ps-layer-z-index.js';
 import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion.js';
 const dropAnimation = {
     duration: PsDragConfig.dropDuration,
@@ -14,10 +16,9 @@ const dropAnimation = {
 export const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
     const [isMounted, setIsMounted] = useState(false);
     const isReduced = usePsReducedMotion();
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Popover);
     useEffect(() => setIsMounted(true), []);
-    if (!isMounted)
-        return null;
-    const lift = (element) => {
+    const lift = useCallback((element) => {
         if (element === null || isReduced || typeof element.animate !== 'function')
             return;
         element.animate(frames, {
@@ -25,6 +26,8 @@ export const PsDragOverlay = ({ children, className, frames, isDropAnimated, })
             easing: PsDragConfig.liftEasing,
             fill: 'forwards',
         });
-    };
-    return createPortal(_jsx(DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, children: children === null ? null : (_jsx("div", { className: className, ref: lift, children: children })) }), document.body);
+    }, [frames, isReduced]);
+    if (!isMounted)
+        return null;
+    return createPortal(_jsx(DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, zIndex: zIndex, children: children === null ? null : (_jsx("div", { className: className, ref: lift, children: children })) }), document.body);
 };

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

@@ -6,11 +6,13 @@ import { CSS } from '@dnd-kit/utilities';
 import { PsDragConfig } from '../constants/ps-drag-config.js';
 import { PsDraggableGridClasses, PsDraggableGridLiftFrames } from '../constants/ps-draggable-grid.js';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors.js';
+import { usePsDragTransition } from '../hooks/use-ps-drag-transition.js';
 import { PsDragGrip } from './ps-drag-grip.js';
 import { PsDragOverlay } from './ps-drag-overlay.js';
 const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: _jsx(PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id });
+    const dragTransition = usePsDragTransition();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: (_jsx(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,

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

@@ -3,15 +3,15 @@ import { useState } from 'react';
 import { DndContext, closestCenter, } from '@dnd-kit/core';
 import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { PsDragClasses, PsDragConfig, PsDragListLiftFrames } from '../constants/ps-drag-config.js';
+import { PsDragClasses, PsDragConfig, PsDragRowLiftFrames } from '../constants/ps-drag-config.js';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors.js';
-import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion.js';
+import { usePsDragTransition } from '../hooks/use-ps-drag-transition.js';
 import { PsDragGrip } from './ps-drag-grip.js';
 import { PsDragOverlay } from './ps-drag-overlay.js';
 const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? _jsx(PsDragGrip, {}) : icon }));
 const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
-    const isReduced = usePsReducedMotion();
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled, id: item.id });
+    const dragTransition = usePsDragTransition();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled, id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: (_jsx(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,
@@ -24,7 +24,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
     return (_jsx("div", { className: `${PsDragClasses.listItem} ${className} ${isDragging ? PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
             opacity: isDragging ? PsDragConfig.placeholderOpacity : undefined,
             transform: CSS.Translate.toString(transform),
-            transition: isReduced ? undefined : transition,
+            transition,
         }, children: rendered }));
 };
 export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
@@ -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: 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
+    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: PsDragRowLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: (_jsx(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

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

@@ -5,6 +5,8 @@ export const PsDragConfig = {
     liftDuration: 200,
     liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
     placeholderOpacity: '0.4',
+    sortDuration: 250,
+    sortEasing: 'ease',
     touchDelay: 180,
     touchTolerance: 6,
 };
@@ -21,7 +23,11 @@ export const PsDragLiftFrames = [
         transform: 'scale(1.035) rotate(-1.2deg)',
     },
 ];
-export const PsDragListLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
-    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+export const PsDragRowLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-0.25deg)',
+    },
 ];
+export const PsDragListLiftFrames = PsDragRowLiftFrames;

package/dist/esm/hooks/use-ps-drag-sensors.js

@@ -1,11 +1,11 @@
 import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { PsDragConfig } from '../constants/ps-drag-config.js';
-export const usePsDragSensors = () => useSensors(useSensor(MouseSensor, {
+export const usePsDragSensors = (coordinateGetter = sortableKeyboardCoordinates) => useSensors(useSensor(MouseSensor, {
     activationConstraint: { distance: PsDragConfig.activationDistance },
 }), useSensor(TouchSensor, {
     activationConstraint: {
         delay: PsDragConfig.touchDelay,
         tolerance: PsDragConfig.touchTolerance,
     },
-}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+}), useSensor(KeyboardSensor, { coordinateGetter }));

package/dist/esm/hooks/use-ps-drag-transition.js

@@ -0,0 +1,10 @@
+import { PsDragConfig } from '../constants/ps-drag-config.js';
+import { usePsReducedMotion } from './use-ps-reduced-motion.js';
+const transition = {
+    duration: PsDragConfig.sortDuration,
+    easing: PsDragConfig.sortEasing,
+};
+export const usePsDragTransition = () => {
+    const isReduced = usePsReducedMotion();
+    return isReduced ? null : transition;
+};

package/dist/esm/hooks/use-ps-list-keys.js

@@ -0,0 +1,17 @@
+import { useCallback, useId, useRef, useState } from 'react';
+import { PsListKeyService } from '../services/ps-list-key-service.js';
+export const usePsListKeys = (count) => {
+    const prefix = useId();
+    const created = useRef(0);
+    const create = useCallback(() => {
+        created.current += 1;
+        return `${prefix}-${created.current}`;
+    }, [prefix]);
+    const [keys, setKeys] = useState(() => PsListKeyService.fit([], count, create));
+    const fitted = PsListKeyService.fit(keys, count, create);
+    if (fitted !== keys)
+        setKeys(fitted);
+    const move = useCallback((from, to) => setKeys((current) => PsListKeyService.move(current, from, to)), []);
+    const remove = useCallback((index) => setKeys((current) => PsListKeyService.remove(current, index)), []);
+    return { keys: fitted, move, remove };
+};

package/dist/esm/index.js

@@ -188,6 +188,11 @@ export * from './models/ps-summary-item.js';
 export * from './components/ps-drag-grip.js';
 export * from './components/ps-drag-overlay.js';
 export * from './hooks/use-ps-drag-sensors.js';
+export * from './hooks/use-ps-drag-transition.js';
+export * from './models/ps-drag-transition.js';
+export * from './hooks/use-ps-list-keys.js';
+export * from './interfaces/ps-list-keys-result.js';
+export * from './services/ps-list-key-service.js';
 export * from './hooks/use-ps-reduced-motion.js';
 export * from './components/ps-divider.js';
 export * from './models/ps-divider-orientation.js';

package/dist/esm/interfaces/ps-list-keys-result.js

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

package/dist/esm/models/ps-drag-transition.js

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

package/dist/esm/services/ps-list-key-service.js

@@ -0,0 +1,20 @@
+export class PsListKeyService {
+    static fit(keys, count, create) {
+        if (keys.length === count)
+            return keys;
+        if (keys.length > count)
+            return keys.slice(0, count);
+        return [...keys, ...Array.from({ length: count - keys.length }, create)];
+    }
+    static move(keys, from, to) {
+        if (from === to || from < 0 || to < 0 || from >= keys.length || to >= keys.length)
+            return keys;
+        const next = [...keys];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    }
+    static remove(keys, index) {
+        return index < 0 || index >= keys.length ? keys : keys.filter((_key, at) => at !== index);
+    }
+}

package/dist/hooks/use-ps-drag-sensors.d.ts

@@ -1,2 +1,2 @@
-import { type SensorDescriptor, type SensorOptions } from '@dnd-kit/core';
-export declare const usePsDragSensors: () => SensorDescriptor<SensorOptions>[];
+import { type KeyboardCoordinateGetter, type SensorDescriptor, type SensorOptions } from '@dnd-kit/core';
+export declare const usePsDragSensors: (coordinateGetter?: KeyboardCoordinateGetter) => SensorDescriptor<SensorOptions>[];

package/dist/hooks/use-ps-drag-sensors.js

@@ -4,12 +4,12 @@ exports.usePsDragSensors = void 0;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
-const usePsDragSensors = () => (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
+const usePsDragSensors = (coordinateGetter = sortable_1.sortableKeyboardCoordinates) => (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
     activationConstraint: { distance: ps_drag_config_1.PsDragConfig.activationDistance },
 }), (0, core_1.useSensor)(core_1.TouchSensor, {
     activationConstraint: {
         delay: ps_drag_config_1.PsDragConfig.touchDelay,
         tolerance: ps_drag_config_1.PsDragConfig.touchTolerance,
     },
-}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter }));
 exports.usePsDragSensors = usePsDragSensors;

package/dist/hooks/use-ps-drag-transition.d.ts

@@ -0,0 +1,2 @@
+import type { PsDragTransition } from '../models/ps-drag-transition';
+export declare const usePsDragTransition: () => PsDragTransition | null;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsDragTransition = void 0;
+const ps_drag_config_1 = require("../constants/ps-drag-config");
+const use_ps_reduced_motion_1 = require("./use-ps-reduced-motion");
+const transition = {
+    duration: ps_drag_config_1.PsDragConfig.sortDuration,
+    easing: ps_drag_config_1.PsDragConfig.sortEasing,
+};
+const usePsDragTransition = () => {
+    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
+    return isReduced ? null : transition;
+};
+exports.usePsDragTransition = usePsDragTransition;

package/dist/hooks/use-ps-list-keys.d.ts

@@ -0,0 +1,2 @@
+import type { PsListKeysResult } from '../interfaces/ps-list-keys-result';
+export declare const usePsListKeys: (count: number) => PsListKeysResult;

package/dist/hooks/use-ps-list-keys.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsListKeys = void 0;
+const react_1 = require("react");
+const ps_list_key_service_1 = require("../services/ps-list-key-service");
+const usePsListKeys = (count) => {
+    const prefix = (0, react_1.useId)();
+    const created = (0, react_1.useRef)(0);
+    const create = (0, react_1.useCallback)(() => {
+        created.current += 1;
+        return `${prefix}-${created.current}`;
+    }, [prefix]);
+    const [keys, setKeys] = (0, react_1.useState)(() => ps_list_key_service_1.PsListKeyService.fit([], count, create));
+    const fitted = ps_list_key_service_1.PsListKeyService.fit(keys, count, create);
+    if (fitted !== keys)
+        setKeys(fitted);
+    const move = (0, react_1.useCallback)((from, to) => setKeys((current) => ps_list_key_service_1.PsListKeyService.move(current, from, to)), []);
+    const remove = (0, react_1.useCallback)((index) => setKeys((current) => ps_list_key_service_1.PsListKeyService.remove(current, index)), []);
+    return { keys: fitted, move, remove };
+};
+exports.usePsListKeys = usePsListKeys;

package/dist/index.d.ts

@@ -188,6 +188,11 @@ export * from './models/ps-summary-item';
 export * from './components/ps-drag-grip';
 export * from './components/ps-drag-overlay';
 export * from './hooks/use-ps-drag-sensors';
+export * from './hooks/use-ps-drag-transition';
+export * from './models/ps-drag-transition';
+export * from './hooks/use-ps-list-keys';
+export * from './interfaces/ps-list-keys-result';
+export * from './services/ps-list-key-service';
 export * from './hooks/use-ps-reduced-motion';
 export * from './components/ps-divider';
 export * from './models/ps-divider-orientation';

package/dist/index.js

@@ -204,6 +204,11 @@ __exportStar(require("./models/ps-summary-item"), exports);
 __exportStar(require("./components/ps-drag-grip"), exports);
 __exportStar(require("./components/ps-drag-overlay"), exports);
 __exportStar(require("./hooks/use-ps-drag-sensors"), exports);
+__exportStar(require("./hooks/use-ps-drag-transition"), exports);
+__exportStar(require("./models/ps-drag-transition"), exports);
+__exportStar(require("./hooks/use-ps-list-keys"), exports);
+__exportStar(require("./interfaces/ps-list-keys-result"), exports);
+__exportStar(require("./services/ps-list-key-service"), exports);
 __exportStar(require("./hooks/use-ps-reduced-motion"), exports);
 __exportStar(require("./components/ps-divider"), exports);
 __exportStar(require("./models/ps-divider-orientation"), exports);

package/dist/interfaces/ps-list-keys-result.d.ts

@@ -0,0 +1,5 @@
+export interface PsListKeysResult {
+    keys: string[];
+    move: (from: number, to: number) => void;
+    remove: (index: number) => void;
+}

package/dist/interfaces/ps-list-keys-result.js

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

package/dist/models/ps-drag-transition.d.ts

@@ -0,0 +1,4 @@
+export interface PsDragTransition {
+    duration: number;
+    easing: string;
+}

package/dist/models/ps-drag-transition.js

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

package/dist/services/ps-list-key-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsListKeyService {
+    static fit(keys: string[], count: number, create: () => string): string[];
+    static move(keys: string[], from: number, to: number): string[];
+    static remove(keys: string[], index: number): string[];
+}

package/dist/services/ps-list-key-service.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsListKeyService = void 0;
+class PsListKeyService {
+    static fit(keys, count, create) {
+        if (keys.length === count)
+            return keys;
+        if (keys.length > count)
+            return keys.slice(0, count);
+        return [...keys, ...Array.from({ length: count - keys.length }, create)];
+    }
+    static move(keys, from, to) {
+        if (from === to || from < 0 || to < 0 || from >= keys.length || to >= keys.length)
+            return keys;
+        const next = [...keys];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    }
+    static remove(keys, index) {
+        return index < 0 || index >= keys.length ? keys : keys.filter((_key, at) => at !== index);
+    }
+}
+exports.PsListKeyService = PsListKeyService;

package/package.json

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