@pallasoft/ps-table-components 1.8.0 → 1.9.0

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

@@ -18,6 +18,7 @@ export interface PsDataTableProps<RowData> {
     onPageChange?: (page: number) => void;
     onQueryChange?: (query: PsTableQuery) => void;
     onRowClick?: (row: RowData) => void;
+    onRowHover?: (row: RowData) => void;
     page?: number;
     pageSize?: number;
     query?: PsTableQuery;
@@ -27,4 +28,4 @@ export interface PsDataTableProps<RowData> {
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -30,7 +30,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -104,7 +104,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsx)("div", { className: 'sm:hidden', children: (0, jsx_runtime_1.jsx)(ps_table_card_list_1.PsTableCardList, { columns: visibleColumns, emptyContent: visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: visibleRows, selectedIds: selectedIds }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsx)("div", { className: 'sm:hidden', children: (0, jsx_runtime_1.jsx)(ps_table_card_list_1.PsTableCardList, { columns: visibleColumns, emptyContent: visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: visibleRows, selectedIds: selectedIds }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
@@ -118,7 +118,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                             const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
                                             return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition-colors', onRowClick
                                                             ? 'ps-focus-ring cursor-pointer hover:bg-mist/60'
-                                                            : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                                                            : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                                                             ? (event) => {
                                                                 if (event.target !== event.currentTarget)
                                                                     return;

package/dist/components/ps-table-card-list.d.ts

@@ -9,9 +9,10 @@ export interface PsTableCardListProps<RowData> {
     getRowLabel: (row: RowData) => string;
     isSelectable: boolean;
     onRowClick?: (row: RowData) => void;
+    onRowHover?: (row: RowData) => void;
     onToggleRow: (rowId: string) => void;
     renderExpandedRow?: (row: RowData) => ReactNode;
     rows: RowData[];
     selectedIds: string[];
 }
-export declare const PsTableCardList: <RowData>({ columns, emptyContent, expandedRowIds, footerColumns, getRowId, getRowLabel, isSelectable, onRowClick, onToggleRow, renderExpandedRow, rows, selectedIds, }: PsTableCardListProps<RowData>) => import("react").JSX.Element;
+export declare const PsTableCardList: <RowData>({ columns, emptyContent, expandedRowIds, footerColumns, getRowId, getRowLabel, isSelectable, onRowClick, onRowHover, onToggleRow, renderExpandedRow, rows, selectedIds, }: PsTableCardListProps<RowData>) => import("react").JSX.Element;

package/dist/components/ps-table-card-list.js

@@ -5,14 +5,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
-const PsTableCardList = ({ columns, emptyContent, expandedRowIds, footerColumns, getRowId, getRowLabel, isSelectable, onRowClick, onToggleRow, renderExpandedRow, rows, selectedIds, }) => {
+const table_card_role_1 = require("../constants/table-card-role");
+const PsTableCardList = ({ columns, emptyContent, expandedRowIds, footerColumns, getRowId, getRowLabel, isSelectable, onRowClick, onRowHover, onToggleRow, renderExpandedRow, rows, selectedIds, }) => {
     const [primary, ...details] = columns.filter((column) => !column.hideOnCards);
     const trailing = details.find((column) => column.align === 'right');
-    const rest = details.filter((column) => column !== trailing);
+    const others = details.filter((column) => column !== trailing);
+    const subtitles = others.filter((column) => column.cardRole === table_card_role_1.PsTableCardRole.subtitle);
+    const metas = others.filter((column) => column.cardRole === table_card_role_1.PsTableCardRole.meta);
+    const rest = others.filter((column) => column.cardRole === undefined || column.cardRole === table_card_role_1.PsTableCardRole.detail);
+    const hasValue = (value) => value !== null && value !== undefined && value !== '';
     return ((0, jsx_runtime_1.jsxs)("ul", { className: 'divide-y divide-line', children: [rows.length === 0 ? (0, jsx_runtime_1.jsx)("li", { children: emptyContent }) : null, rows.map((row) => {
                 const rowId = getRowId(row);
                 const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
-                return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsxs)("div", { "aria-label": onRowClick ? getRowLabel(row) : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('flex gap-3 px-4 py-3.5 transition-colors', onRowClick ? 'ps-focus-ring cursor-pointer active:bg-mist/70' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                return ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsxs)("div", { "aria-label": onRowClick ? getRowLabel(row) : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('flex gap-3 px-4 py-3 transition-colors', onRowClick ? 'ps-focus-ring cursor-pointer active:bg-mist/70' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                                 ? (event) => {
                                     if (event.target !== event.currentTarget)
                                         return;
@@ -21,12 +26,15 @@ const PsTableCardList = ({ columns, emptyContent, expandedRowIds, footerColumns,
                                     event.preventDefault();
                                     onRowClick(row);
                                 }
-                                : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("div", { className: 'pt-0.5', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${getRowLabel(row)}`, onChange: () => onToggleRow(rowId) }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 text-sm font-semibold text-ink', children: primary ? primary.render(row) : null }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'shrink-0 text-right text-sm font-semibold tabular-nums text-ink', children: trailing.render(row) })) : null] }), rest.length > 0 ? ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5', children: rest
+                                : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("div", { className: 'pt-0.5', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${getRowLabel(row)}`, onChange: () => onToggleRow(rowId) }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-2', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 text-sm font-semibold text-ink', children: primary ? primary.render(row) : null }), subtitles.map((column) => ((0, jsx_runtime_1.jsx)("div", { className: 'truncate text-sm text-ink/65', children: column.render(row) }, column.id)))] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'shrink-0 text-right text-sm font-semibold tabular-nums text-ink', children: trailing.render(row) })) : null] }), rest.length > 0 ? ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5', children: rest
                                                 .map((column) => ({ column, value: column.render(row) }))
-                                                .filter(({ value }) => value !== null && value !== undefined && value !== '')
+                                                .filter(({ value }) => hasValue(value))
                                                 .map(({ column, value }) => ((0, jsx_runtime_1.jsxs)("div", { className: column.cardFullWidth ? 'col-span-2 min-w-0' : 'min-w-0', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-ink/40', children: column.label }), (0, jsx_runtime_1.jsx)("dd", { className: column.cardFullWidth
                                                             ? 'text-sm text-ink/80'
-                                                            : 'truncate text-sm text-ink/80', children: value })] }, column.id))) })) : null] })] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'border-t border-line bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) })) : null] }, rowId));
+                                                            : 'truncate text-sm text-ink/80', children: value })] }, column.id))) })) : null, metas.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-ink/70', children: metas
+                                                .map((column) => ({ column, value: column.render(row) }))
+                                                .filter(({ value }) => hasValue(value))
+                                                .map(({ column, value }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 items-center gap-1.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-ink/40', children: column.label }), (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 truncate', children: value })] }, column.id))) })) : null] })] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'border-t border-line bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) })) : null] }, rowId));
             }), footerColumns.length > 0 ? ((0, jsx_runtime_1.jsx)("li", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5 bg-mist/50 px-4 py-3', children: footerColumns.map((column) => ((0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-ink/40', children: column.label }), (0, jsx_runtime_1.jsx)("p", { className: 'truncate text-sm font-semibold text-ink', children: column.footer })] }, column.id))) })) : null] }));
 };
 exports.PsTableCardList = PsTableCardList;

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

@@ -13,6 +13,6 @@ const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilter
     const filterableColumns = columns.filter((column) => column.filter);
     const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
     const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2', children: actions })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2', children: actions })) : null] }));
 };
 exports.PsTableToolbar = PsTableToolbar;

package/dist/constants/ps-table-search-config.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableSearchConfig = void 0;
 exports.PsTableSearchConfig = {
     currencySymbols: /[$€£¥]/g,
-    diacritics: /[̀-ͯ]/g,
+    diacritics: /[\u0300-\u036f]/g,
     thousandsSeparator: /(\d),(?=\d{3}\b)/g,
     whitespace: /\s+/g,
 };

package/dist/constants/table-card-role.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTableCardRole: {
+    readonly detail: "detail";
+    readonly meta: "meta";
+    readonly subtitle: "subtitle";
+};
+export type PsTableCardRole = (typeof PsTableCardRole)[keyof typeof PsTableCardRole];

package/dist/constants/table-card-role.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableCardRole = void 0;
+exports.PsTableCardRole = {
+    detail: 'detail',
+    meta: 'meta',
+    subtitle: 'subtitle',
+};

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

@@ -0,0 +1,133 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo, useRef, useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsCheckbox } from '@pallasoft/ps-input-components';
+import { PsCollapse } from '@pallasoft/ps-motion-components';
+import { PsTableConfig } from '../constants/table-config';
+import { PsTableQueryService } from '../services/ps-table-query-service';
+import { PsTableBulkBar } from './ps-table-bulk-bar';
+import { PsTableCardList } from './ps-table-card-list';
+import { PsTableColumnPicker } from './ps-table-column-picker';
+import { PsTablePagination } from './ps-table-pagination';
+import { PsTableSortHeader } from './ps-table-sort-header';
+import { PsTableToolbar } from './ps-table-toolbar';
+const densityClassNames = {
+    compact: {
+        cell: 'px-3 py-1.5 text-[0.8125rem] leading-5',
+        head: 'px-3 py-2',
+    },
+    normal: {
+        cell: 'px-5 py-4',
+        head: 'px-5 py-3.5',
+    },
+};
+const columnStyle = (column) => column.width || column.minWidth ? { minWidth: column.minWidth, width: column.width } : undefined;
+const alignClassNames = {
+    center: 'text-center',
+    left: 'text-left',
+    right: 'text-right tabular-nums',
+};
+export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+    const containerRef = useRef(null);
+    const [uncontrolledPage, setUncontrolledPage] = useState(1);
+    const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
+    const [selectedIds, setSelectedIds] = useState([]);
+    const currentQuery = query ? query : uncontrolledQuery;
+    const { filters, hiddenColumnIds, search, sort } = currentQuery;
+    const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const updateQuery = (patch) => {
+        const next = { ...currentQuery, ...patch };
+        if (!query)
+            setUncontrolledQuery(next);
+        onQueryChange?.(next);
+    };
+    const isServerPaginated = totalRows !== undefined;
+    const hasFooter = columns.some((column) => column.footer !== undefined);
+    const isSearchable = Boolean(getSearchText) && !isServerPaginated;
+    const hasFilters = columns.some((column) => column.filter) && !isServerPaginated;
+    const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
+    const isSelectable = Boolean(getBulkActions);
+    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const queriedRows = useMemo(() => isServerPaginated
+        ? rows
+        : PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
+    const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
+    const rowCount = isServerPaginated ? totalRows : queriedRows.length;
+    const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
+    const safePage = Math.min(Math.max(currentPage, 1), pageCount);
+    const isQueried = search.trim() !== '' ||
+        Object.values(filters).some((value) => PsTableQueryService.isActive(value));
+    const visibleRows = useMemo(() => {
+        if (!pageSize || isServerPaginated)
+            return queriedRows;
+        return queriedRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    }, [isServerPaginated, pageSize, queriedRows, safePage]);
+    const changePage = (next) => {
+        if (onPageChange) {
+            onPageChange(next);
+            return;
+        }
+        containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        setUncontrolledPage(next);
+    };
+    const resetPage = () => {
+        if (safePage === 1)
+            return;
+        if (onPageChange)
+            onPageChange(1);
+        else
+            setUncontrolledPage(1);
+    };
+    const updateSort = (columnId) => {
+        updateQuery({ sort: PsTableQueryService.nextSort(sort, columnId) });
+        resetPage();
+    };
+    const clearFilters = () => {
+        updateQuery({ filters: {}, search: '' });
+        resetPage();
+    };
+    const selectedRows = queriedRows.filter((row) => selectedIds.includes(getRowId(row)));
+    const pageIds = visibleRows.map((row) => getRowId(row));
+    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIds.includes(rowId));
+    const togglePage = () => setSelectedIds((current) => isPageSelected
+        ? current.filter((rowId) => !pageIds.includes(rowId))
+        : [...new Set([...current, ...pageIds])]);
+    const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
+    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? (_jsx(PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? (_jsx(PsTableToolbar, { actions: _jsxs(_Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? (_jsx(PsTableColumnPicker, { columns: columns
+                                .filter((column) => column.canHide)
+                                .map((column) => ({ id: column.id, label: column.label })), hiddenColumnIds: hiddenColumnIds, onChange: (nextHidden) => updateQuery({ hiddenColumnIds: nextHidden }) })) : null] }), columns: hasFilters ? columns : [], filters: filters, isSearchable: isSearchable, onClearFilters: clearFilters, onFilterChange: (columnId, value) => {
+                    updateQuery({ filters: { ...filters, [columnId]: value } });
+                    resetPage();
+                }, onSearchChange: (next) => {
+                    updateQuery({ search: next });
+                    resetPage();
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsx("div", { className: 'sm:hidden', children: _jsx(PsTableCardList, { columns: visibleColumns, emptyContent: visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: visibleRows, selectedIds: selectedIds }) })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: 'w-full border-collapse text-left', children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                                                const align = column.align !== null && column.align !== undefined ? column.align : 'left';
+                                                const isSorted = sort !== null && sort.columnId === column.id;
+                                                return (_jsx("th", { "aria-sort": isSorted
+                                                        ? sort.direction
+                                                        : column.sortValue && !isServerPaginated
+                                                            ? 'none'
+                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && !isServerPaginated ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, visibleRows.map((row) => {
+                                            const rowId = getRowId(row);
+                                            const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
+                                            const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
+                                            return (_jsxs(Fragment, { children: [_jsxs("tr", { "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', onRowClick
+                                                            ? 'ps-focus-ring cursor-pointer hover:bg-mist/60'
+                                                            : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
+                                                            ? (event) => {
+                                                                if (event.target !== event.currentTarget)
+                                                                    return;
+                                                                if (event.key !== 'Enter' && event.key !== ' ')
+                                                                    return;
+                                                                event.preventDefault();
+                                                                onRowClick(row);
+                                                            }
+                                                            : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                                    ? column.align
+                                                                    : 'left'], column.wrap ? '' : 'whitespace-nowrap', 'text-sm text-ink'), style: columnStyle(column), children: column.render(row) }, column.id)))] }), renderExpandedRow && isExpanded ? (_jsx("tr", { className: 'border-t-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: true, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
+                                        })] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                    ? column.align
+                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize ? (_jsx(PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+};

package/dist/esm/components/ps-table-bulk-bar.js

@@ -0,0 +1,3 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsTableBulkBar = ({ actions, onClear, selectedCount }) => (_jsxs("div", { "aria-live": 'polite', className: 'flex flex-wrap items-center gap-1 rounded-2xl border border-primary/30 bg-primary/10 px-2 py-1.5 sm:gap-2 sm:rounded-full', children: [_jsxs("span", { className: 'px-2 text-sm font-semibold text-ink', children: [selectedCount, " selected"] }), actions.map((action) => (_jsx("button", { className: PallasoftClassNameService.merge('ps-focus-ring inline-flex min-h-8 items-center rounded-full px-3 text-sm font-semibold transition-colors disabled:opacity-40', action.isDanger ? 'text-danger hover:bg-danger/10' : 'text-ink hover:bg-ink/5'), disabled: action.isDisabled, onClick: action.onSelect, type: 'button', children: action.label }, action.id))), _jsx("button", { className: 'ps-focus-ring ml-auto inline-flex min-h-8 items-center rounded-full px-3 text-sm font-semibold text-ink/65 hover:text-ink', onClick: onClear, type: 'button', children: "Clear selection" })] }));

package/dist/esm/components/ps-table-card-list.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsCheckbox } from '@pallasoft/ps-input-components';
+import { PsCollapse } from '@pallasoft/ps-motion-components';
+import { PsTableCardRole } from '../constants/table-card-role';
+export const PsTableCardList = ({ columns, emptyContent, expandedRowIds, footerColumns, getRowId, getRowLabel, isSelectable, onRowClick, onRowHover, onToggleRow, renderExpandedRow, rows, selectedIds, }) => {
+    const [primary, ...details] = columns.filter((column) => !column.hideOnCards);
+    const trailing = details.find((column) => column.align === 'right');
+    const others = details.filter((column) => column !== trailing);
+    const subtitles = others.filter((column) => column.cardRole === PsTableCardRole.subtitle);
+    const metas = others.filter((column) => column.cardRole === PsTableCardRole.meta);
+    const rest = others.filter((column) => column.cardRole === undefined || column.cardRole === PsTableCardRole.detail);
+    const hasValue = (value) => value !== null && value !== undefined && value !== '';
+    return (_jsxs("ul", { className: 'divide-y divide-line', children: [rows.length === 0 ? _jsx("li", { children: emptyContent }) : null, rows.map((row) => {
+                const rowId = getRowId(row);
+                const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
+                return (_jsxs("li", { children: [_jsxs("div", { "aria-label": onRowClick ? getRowLabel(row) : undefined, className: PallasoftClassNameService.merge('flex gap-3 px-4 py-3 transition-colors', onRowClick ? 'ps-focus-ring cursor-pointer active:bg-mist/70' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
+                                ? (event) => {
+                                    if (event.target !== event.currentTarget)
+                                        return;
+                                    if (event.key !== 'Enter' && event.key !== ' ')
+                                        return;
+                                    event.preventDefault();
+                                    onRowClick(row);
+                                }
+                                : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("div", { className: 'pt-0.5', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${getRowLabel(row)}`, onChange: () => onToggleRow(rowId) }) })) : null, _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-2', children: [_jsxs("div", { className: 'flex items-start justify-between gap-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("div", { className: 'min-w-0 text-sm font-semibold text-ink', children: primary ? primary.render(row) : null }), subtitles.map((column) => (_jsx("div", { className: 'truncate text-sm text-ink/65', children: column.render(row) }, column.id)))] }), trailing ? (_jsx("div", { className: 'shrink-0 text-right text-sm font-semibold tabular-nums text-ink', children: trailing.render(row) })) : null] }), rest.length > 0 ? (_jsx("dl", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5', children: rest
+                                                .map((column) => ({ column, value: column.render(row) }))
+                                                .filter(({ value }) => hasValue(value))
+                                                .map(({ column, value }) => (_jsxs("div", { className: column.cardFullWidth ? 'col-span-2 min-w-0' : 'min-w-0', children: [_jsx("dt", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-ink/40', children: column.label }), _jsx("dd", { className: column.cardFullWidth
+                                                            ? 'text-sm text-ink/80'
+                                                            : 'truncate text-sm text-ink/80', children: value })] }, column.id))) })) : null, metas.length > 0 ? (_jsx("div", { className: 'flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-ink/70', children: metas
+                                                .map((column) => ({ column, value: column.render(row) }))
+                                                .filter(({ value }) => hasValue(value))
+                                                .map(({ column, value }) => (_jsxs("div", { className: 'flex min-w-0 items-center gap-1.5', children: [_jsx("span", { className: 'text-ink/40', children: column.label }), _jsx("span", { className: 'min-w-0 truncate', children: value })] }, column.id))) })) : null] })] }), renderExpandedRow ? (_jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'border-t border-line bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) })) : null] }, rowId));
+            }), footerColumns.length > 0 ? (_jsx("li", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5 bg-mist/50 px-4 py-3', children: footerColumns.map((column) => (_jsxs("div", { className: 'min-w-0', children: [_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.12em] text-ink/40', children: column.label }), _jsx("p", { className: 'truncate text-sm font-semibold text-ink', children: column.footer })] }, column.id))) })) : null] }));
+};

package/dist/esm/components/ps-table-column-picker.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsLayer, usePsLayerZIndex } from '@pallasoft/ps-core-components';
+import { PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsCheckbox } from '@pallasoft/ps-input-components';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+export const PsTableColumnPicker = ({ columns, hiddenColumnIds, onChange, }) => {
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const visibleCount = columns.filter((column) => !hiddenColumnIds.includes(column.id)).length;
+    return (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 min-w-10 items-center justify-center gap-2 rounded-full px-3 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40 sm:px-4', children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4 sm:hidden', iconKey: PsIconKey.Columns }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Columns" }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'hidden h-4 w-4 sm:block', iconKey: PsIconKey.Chevron })] }), _jsx(Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', style: { zIndex }, children: _jsx(Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-1.5 outline-none', children: _jsx(PsLayer, { zIndex: zIndex, children: columns.map((column) => {
+                            const isVisible = !hiddenColumnIds.includes(column.id);
+                            return (_jsx(PsCheckbox, { className: 'ps-floating-option w-full', isDisabled: isVisible && visibleCount <= 1, isSelected: isVisible, label: column.label, onChange: () => onChange(isVisible
+                                    ? [...hiddenColumnIds, column.id]
+                                    : hiddenColumnIds.filter((hiddenId) => hiddenId !== column.id)), children: column.label }, column.id));
+                        }) }) }) })] }));
+};

package/dist/esm/components/ps-table-filter-field.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsDateInput, PsMultiSelectInput, PsTextInput } from '@pallasoft/ps-input-components';
+import { PsTableFilterKind } from '../constants/table-filter-kind';
+export const PsTableFilterField = ({ kind, label, onChange, options, value, }) => {
+    if (kind === PsTableFilterKind.select)
+        return (_jsx(PsMultiSelectInput, { label: label, onChange: (values) => onChange({ values }), options: options, placeholder: 'Any', value: value.values ? value.values : [] }));
+    if (kind === PsTableFilterKind.text)
+        return (_jsx(PsTextInput, { label: label, onChange: (event) => onChange({ text: event.target.value }), placeholder: 'Contains', value: value.text ? value.text : '' }));
+    if (kind === PsTableFilterKind.number)
+        return (_jsxs("fieldset", { className: 'grid grid-cols-2 gap-2', children: [_jsx("legend", { className: 'ps-input-label col-span-2 mb-2', children: label }), _jsx(PsTextInput, { hideLabel: true, inputMode: 'decimal', label: `${label} minimum`, onChange: (event) => onChange({ ...value, from: event.target.value }), placeholder: 'Min', value: value.from ? value.from : '' }), _jsx(PsTextInput, { hideLabel: true, inputMode: 'decimal', label: `${label} maximum`, onChange: (event) => onChange({ ...value, to: event.target.value }), placeholder: 'Max', value: value.to ? value.to : '' })] }));
+    return (_jsxs("fieldset", { className: 'grid grid-cols-2 gap-2', children: [_jsx("legend", { className: 'ps-input-label col-span-2 mb-2', children: label }), _jsx(PsDateInput, { hideLabel: true, label: `${label} from`, onChange: (from) => onChange({ ...value, from }), placeholder: 'From', value: value.from ? value.from : '' }), _jsx(PsDateInput, { hideLabel: true, label: `${label} to`, onChange: (to) => onChange({ ...value, to }), placeholder: 'To', value: value.to ? value.to : '' })] }));
+};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsTablePagination = ({ className, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+    const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
+    const lastRow = Math.min(page * pageSize, totalRows);
+    const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
+    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+};

package/dist/esm/components/ps-table-sort-header.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+export const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) => {
+    const isSorted = sort !== null && sort.columnId === columnId;
+    const iconKey = !isSorted
+        ? PsIconKey.Sort
+        : sort.direction === 'ascending'
+            ? PsIconKey.SortAscending
+            : PsIconKey.SortDescending;
+    return (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring group inline-flex items-center gap-1 rounded-md uppercase tracking-[0.18em] transition-colors hover:text-ink', align === 'right' ? 'flex-row-reverse' : '', isSorted ? 'text-ink' : ''), onClick: () => onSort(columnId), type: 'button', children: [_jsx("span", { children: label }), _jsx(PsIcon, { "aria-hidden": 'true', className: PallasoftClassNameService.merge('block h-3.5 w-3.5 shrink-0', isSorted
+                    ? 'text-primary'
+                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60'), iconKey: iconKey })] }));
+};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsLayer, usePsLayerZIndex } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+import { PsTableQueryService } from '../services/ps-table-query-service';
+import { PsTableFilterField } from './ps-table-filter-field';
+const toolbarButtonClassName = 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 min-w-10 items-center justify-center gap-2 rounded-full px-3 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40 sm:px-4';
+export const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilters, onFilterChange, onSearchChange, rows, search, searchPlaceholder, }) => {
+    const filterableColumns = columns.filter((column) => column.filter);
+    const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
+    const activeCount = filterableColumns.filter((column) => PsTableQueryService.isActive(filters[column.id])).length;
+    return (_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? (_jsxs("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [_jsx("span", { className: 'sr-only', children: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search }), _jsx("input", { className: 'ps-input-control ps-focus-ring min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, filterableColumns.length > 0 ? (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: toolbarButtonClassName, children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Filter }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? (_jsx("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: _jsxs(PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => (_jsx(PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), _jsx("div", { className: 'flex justify-end border-t border-line pt-3', children: _jsx("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? (_jsx("button", { className: PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (_jsx("div", { className: 'ml-auto flex min-w-0 flex-wrap items-center justify-end gap-2', children: actions })) : null] }));
+};

package/dist/esm/constants/ps-table-search-config.js

@@ -0,0 +1,6 @@
+export const PsTableSearchConfig = {
+    currencySymbols: /[$€£¥]/g,
+    diacritics: /[\u0300-\u036f]/g,
+    thousandsSeparator: /(\d),(?=\d{3}\b)/g,
+    whitespace: /\s+/g,
+};

package/dist/esm/constants/table-card-role.js

@@ -0,0 +1,5 @@
+export const PsTableCardRole = {
+    detail: 'detail',
+    meta: 'meta',
+    subtitle: 'subtitle',
+};

package/dist/esm/constants/table-config.js

@@ -0,0 +1,5 @@
+export const PsTableConfig = {
+    noMatchesDescription: 'Try a different search or clear the filters.',
+    noMatchesTitle: 'Nothing matches',
+    searchPlaceholder: 'Search',
+};

package/dist/esm/constants/table-filter-kind.js

@@ -0,0 +1,6 @@
+export const PsTableFilterKind = {
+    date: 'date',
+    number: 'number',
+    select: 'select',
+    text: 'text',
+};

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+export * from './components/ps-data-table';
+export * from './components/ps-table-pagination';
+export * from './constants/table-card-role';
+export * from './constants/table-filter-kind';
+export * from './interfaces/table-column';
+export * from './interfaces/table-column-filter';
+export * from './interfaces/table-filter-option';
+export * from './interfaces/table-filter-value';
+export * from './interfaces/table-query';
+export * from './interfaces/table-row-action';
+export * from './interfaces/table-sort';
+export * from './services/ps-table-query-service';
+export * from './services/ps-table-search-service';

package/dist/esm/interfaces/table-column-filter.js

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

package/dist/esm/interfaces/table-column.js

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

package/dist/esm/interfaces/table-filter-option.js

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

package/dist/esm/interfaces/table-filter-value.js

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

package/dist/esm/interfaces/table-query.js

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

package/dist/esm/interfaces/table-row-action.js

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

package/dist/esm/interfaces/table-sort.js

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

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

@@ -0,0 +1,93 @@
+import { PsTableFilterKind } from '../constants/table-filter-kind';
+import { PsTableSearchService } from './ps-table-search-service';
+export class PsTableQueryService {
+    static isActive(value) {
+        if (!value)
+            return false;
+        return Boolean((value.text && value.text.trim() !== '') ||
+            (value.values && value.values.length > 0) ||
+            (value.from && value.from !== '') ||
+            (value.to && value.to !== ''));
+    }
+    static matchesFilter(row, column, value) {
+        if (!column.filter || !PsTableQueryService.isActive(value))
+            return true;
+        const raw = column.filter.getValue(row);
+        const cell = raw === null ? '' : String(raw);
+        if (column.filter.kind === PsTableFilterKind.text)
+            return cell.toLowerCase().includes((value.text ? value.text : '').trim().toLowerCase());
+        if (column.filter.kind === PsTableFilterKind.select)
+            return value.values ? value.values.includes(cell) : true;
+        if (column.filter.kind === PsTableFilterKind.number) {
+            const amount = Number(cell);
+            if (cell === '' || Number.isNaN(amount))
+                return false;
+            if (value.from && amount < Number(value.from))
+                return false;
+            if (value.to && amount > Number(value.to))
+                return false;
+            return true;
+        }
+        if (cell === '')
+            return false;
+        if (value.from && cell < value.from)
+            return false;
+        if (value.to && cell > value.to)
+            return false;
+        return true;
+    }
+    static apply(rows, columns, filters, search, getSearchText, sort) {
+        const filtered = rows.filter((row) => (!getSearchText || PsTableSearchService.matches(getSearchText(row), search)) &&
+            columns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id] ? filters[column.id] : {})));
+        const sortColumn = sort ? columns.find((column) => column.id === sort.columnId) : undefined;
+        if (!sort || !sortColumn || !sortColumn.sortValue)
+            return filtered;
+        const getValue = sortColumn.sortValue;
+        const direction = sort.direction === 'ascending' ? 1 : -1;
+        return [...filtered].sort((left, right) => {
+            const a = getValue(left);
+            const b = getValue(right);
+            if (a === b)
+                return 0;
+            if (a === null)
+                return 1;
+            if (b === null)
+                return -1;
+            if (typeof a === 'number' && typeof b === 'number')
+                return (a - b) * direction;
+            return String(a).localeCompare(String(b), undefined, { numeric: true }) * direction;
+        });
+    }
+    static options(rows, column) {
+        if (!column.filter)
+            return [];
+        if (column.filter.options)
+            return column.filter.options;
+        const getValue = column.filter.getValue;
+        const values = new Set(rows.map((row) => getValue(row)).filter((value) => value !== null));
+        return [...values]
+            .map((value) => String(value))
+            .sort((a, b) => a.localeCompare(b))
+            .map((value) => ({ label: value, value }));
+    }
+    static empty(sort) {
+        return { filters: {}, hiddenColumnIds: [], search: '', sort };
+    }
+    static isEqual(left, right) {
+        const activeFilters = (query) => Object.entries(query.filters)
+            .filter(([, value]) => PsTableQueryService.isActive(value))
+            .sort(([a], [b]) => a.localeCompare(b));
+        return (left.search.trim() === right.search.trim() &&
+            JSON.stringify(left.sort) === JSON.stringify(right.sort) &&
+            JSON.stringify([...left.hiddenColumnIds].sort()) ===
+                JSON.stringify([...right.hiddenColumnIds].sort()) &&
+            JSON.stringify(activeFilters(left)) === JSON.stringify(activeFilters(right)));
+    }
+    static nextSort(current, columnId) {
+        if (!current || current.columnId !== columnId)
+            return { columnId, direction: 'ascending' };
+        if (current.direction === 'ascending')
+            return { columnId, direction: 'descending' };
+        return null;
+    }
+}

package/dist/esm/services/ps-table-search-service.js

@@ -0,0 +1,24 @@
+import { PsTableSearchConfig } from '../constants/ps-table-search-config';
+export class PsTableSearchService {
+    static normalise(value) {
+        return value
+            .normalize('NFD')
+            .replace(PsTableSearchConfig.diacritics, '')
+            .toLowerCase()
+            .replace(PsTableSearchConfig.thousandsSeparator, '$1')
+            .replace(PsTableSearchConfig.currencySymbols, ' ')
+            .replace(PsTableSearchConfig.whitespace, ' ')
+            .trim();
+    }
+    static tokens(query) {
+        const normalised = PsTableSearchService.normalise(query);
+        return normalised === '' ? [] : normalised.split(' ');
+    }
+    static matches(text, query) {
+        const tokens = PsTableSearchService.tokens(query);
+        if (tokens.length === 0)
+            return true;
+        const haystack = PsTableSearchService.normalise(text);
+        return tokens.every((token) => haystack.includes(token));
+    }
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/ps-data-table';
 export * from './components/ps-table-pagination';
+export * from './constants/table-card-role';
 export * from './constants/table-filter-kind';
 export * from './interfaces/table-column';
 export * from './interfaces/table-column-filter';

package/dist/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-data-table"), exports);
 __exportStar(require("./components/ps-table-pagination"), exports);
+__exportStar(require("./constants/table-card-role"), exports);
 __exportStar(require("./constants/table-filter-kind"), exports);
 __exportStar(require("./interfaces/table-column"), exports);
 __exportStar(require("./interfaces/table-column-filter"), exports);

package/dist/interfaces/table-column.d.ts

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
+import type { PsTableCardRole } from '../constants/table-card-role';
 import type { PsTableColumnFilter } from './table-column-filter';
 export interface PsTableColumn<RowData> {
     align?: 'center' | 'left' | 'right';
     canHide?: boolean;
     cardFullWidth?: boolean;
+    cardRole?: PsTableCardRole;
     filter?: PsTableColumnFilter<RowData>;
     footer?: ReactNode;
     hideOnCards?: boolean;

package/package.json

@@ -1,12 +1,15 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.8.0",
+	"version": "1.9.0",
 	"private": false,
 	"main": "./dist/index.js",
+	"module": "./dist/esm/index.js",
 	"types": "./dist/index.d.ts",
+	"sideEffects": false,
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.js",
 			"require": "./dist/index.js",
 			"default": "./dist/index.js"
 		}
@@ -16,7 +19,7 @@
 	],
 	"scripts": {
 		"husky:prepare": "npx husky",
-		"build": "tsc",
+		"build": "tsc && tsc -p tsconfig.esm.json",
 		"setup:graphify": "sh scripts/graphify-setup.sh",
 		"update:graphify": "sh scripts/graphify-update.sh",
 		"lint": "npm run lint:eslint",