@pallasoft/ps-core-components 2.44.0 → 2.44.2

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,6 +19,7 @@ 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;
@@ -29,6 +32,6 @@ const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
             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);
+    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/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/esm/components/ps-drag-overlay.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { 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,6 +16,7 @@ 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;
@@ -26,5 +29,5 @@ export const PsDragOverlay = ({ children, className, frames, isDropAnimated, })
             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);
+    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/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/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,9 @@ 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-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/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-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,9 @@ 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-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,9 @@ __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-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/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.0",
+	"version": "2.44.2",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",