@pallasoft/ps-core-components 2.28.0 → 2.29.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-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-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/index.js

@@ -154,3 +154,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.d.ts

@@ -154,3 +154,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

@@ -170,3 +170,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/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/package.json

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