@pallasoft/ps-table-components 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/ps-data-table.d.ts +1 -2
  2. package/dist/components/ps-data-table.js +9 -9
  3. package/dist/components/ps-table-column-picker.js +12 -6
  4. package/dist/components/ps-table-toolbar.js +3 -1
  5. package/dist/index.d.ts +0 -1
  6. package/dist/index.js +0 -1
  7. package/package.json +4 -3
  8. package/dist/components/ps-table-row-actions.d.ts +0 -6
  9. package/dist/components/ps-table-row-actions.js +0 -9
package/dist/components/ps-data-table.d.ts CHANGED
@@ -11,7 +11,6 @@ export interface PsDataTableProps<RowData> {
11
11
  density?: 'compact' | 'normal';
12
12
  expandedRowIds?: string[];
13
13
  getBulkActions?: (rows: RowData[]) => PsTableRowAction[];
14
- getRowActions?: (row: RowData) => PsTableRowAction[];
15
14
  getRowId: (row: RowData) => string;
16
15
  getRowLabel?: (row: RowData) => string;
17
16
  getSearchText?: (row: RowData) => string;
@@ -27,4 +26,4 @@ export interface PsDataTableProps<RowData> {
27
26
  toolbarActions?: ReactNode;
28
27
  totalRows?: number;
29
28
  }
30
- export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, getBulkActions, getRowActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
29
+ export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
package/dist/components/ps-data-table.js CHANGED
@@ -4,13 +4,13 @@ exports.PsDataTable = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const ps_design_system_1 = require("@pallasoft/ps-design-system");
7
+ const ps_input_components_1 = require("@pallasoft/ps-input-components");
7
8
  const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
8
9
  const table_config_1 = require("../constants/table-config");
9
10
  const ps_table_query_service_1 = require("../services/ps-table-query-service");
10
11
  const ps_table_bulk_bar_1 = require("./ps-table-bulk-bar");
11
12
  const ps_table_column_picker_1 = require("./ps-table-column-picker");
12
13
  const ps_table_pagination_1 = require("./ps-table-pagination");
13
- const ps_table_row_actions_1 = require("./ps-table-row-actions");
14
14
  const ps_table_sort_header_1 = require("./ps-table-sort-header");
15
15
  const ps_table_toolbar_1 = require("./ps-table-toolbar");
16
16
  const densityClassNames = {
@@ -29,7 +29,7 @@ const alignClassNames = {
29
29
  left: 'text-left',
30
30
  right: 'text-right tabular-nums',
31
31
  };
32
- const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, getBulkActions, getRowActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
32
+ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
33
33
  const containerRef = (0, react_1.useRef)(null);
34
34
  const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
35
35
  const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -49,7 +49,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
49
49
  const hasFilters = columns.some((column) => column.filter) && !isServerPaginated;
50
50
  const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
51
51
  const isSelectable = Boolean(getBulkActions);
52
- const columnCount = visibleColumns.length + (getRowActions ? 1 : 0) + (isSelectable ? 1 : 0);
52
+ const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
53
53
  const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
54
54
  ? rows
55
55
  : ps_table_query_service_1.PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
@@ -95,7 +95,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
95
95
  ? current.filter((rowId) => !pageIds.includes(rowId))
96
96
  : [...new Set([...current, ...pageIds])]);
97
97
  const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
98
- return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : null, hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
98
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
99
99
  .filter((column) => column.canHide)
100
100
  .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) => {
101
101
  updateQuery({ filters: { ...filters, [columnId]: value } });
@@ -103,7 +103,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
103
103
  }, onSearchChange: (next) => {
104
104
  updateQuery({ search: next });
105
105
  resetPage();
106
- }, 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: [(0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar overflow-x-auto', 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)("input", { "aria-label": 'Select all rows on this page', checked: isPageSelected, className: 'h-4 w-4 cursor-pointer accent-[rgb(var(--ps-color-primary-rgb))]', onChange: togglePage, type: 'checkbox' }) })) : null, visibleColumns.map((column) => {
106
+ }, 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: [(0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar overflow-x-auto', 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) => {
107
107
  const align = column.align !== null && column.align !== undefined ? column.align : 'left';
108
108
  const isSorted = sort !== null && sort.columnId === column.id;
109
109
  return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
@@ -111,7 +111,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
111
111
  : column.sortValue && !isServerPaginated
112
112
  ? 'none'
113
113
  : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && !isServerPaginated ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
114
- }), getRowActions ? ((0, jsx_runtime_1.jsx)("th", { className: densityClassNames[density].head, scope: 'col', style: { width: '3.5rem' }, children: (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: "Actions" }) })) : null] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, 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)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.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) => {
114
+ })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, 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)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.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) => {
115
115
  const rowId = getRowId(row);
116
116
  const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
117
117
  const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
@@ -126,11 +126,11 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
126
126
  event.preventDefault();
127
127
  onRowClick(row);
128
128
  }
129
- : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)("input", { "aria-label": `Select ${rowLabel}`, checked: selectedIds.includes(rowId), className: 'h-4 w-4 cursor-pointer accent-[rgb(var(--ps-color-primary-rgb))]', onChange: () => toggleRow(rowId), type: 'checkbox' }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
129
+ : undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', 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 ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
130
130
  ? column.align
131
- : 'left'], column.wrap ? '' : 'whitespace-nowrap', 'text-sm text-ink'), style: columnStyle(column), children: column.render(row) }, column.id))), getRowActions ? ((0, jsx_runtime_1.jsx)("td", { className: 'px-2 py-1.5 text-right', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: getRowActions(row).length > 0 ? ((0, jsx_runtime_1.jsx)(ps_table_row_actions_1.PsTableRowActions, { actions: getRowActions(row), label: `Actions for ${rowLabel}` })) : null })) : null] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { className: isExpanded ? '' : 'border-t-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
131
+ : 'left'], column.wrap ? '' : 'whitespace-nowrap', 'text-sm text-ink'), style: columnStyle(column), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { className: isExpanded ? '' : 'border-t-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
132
132
  })] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
133
133
  ? column.align
134
- : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id))), getRowActions ? (0, jsx_runtime_1.jsx)("td", {}) : null] }) })) : null] }) }), pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
134
+ : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
135
135
  };
136
136
  exports.PsDataTable = PsDataTable;
package/dist/components/ps-table-column-picker.js CHANGED
@@ -2,13 +2,19 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PsTableColumnPicker = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const ps_core_components_1 = require("@pallasoft/ps-core-components");
6
+ const ps_design_system_1 = require("@pallasoft/ps-design-system");
5
7
  const ps_icons_1 = require("@pallasoft/ps-icons");
8
+ const ps_input_components_1 = require("@pallasoft/ps-input-components");
6
9
  const react_aria_components_1 = require("react-aria-components");
7
- const PsTableColumnPicker = ({ columns, hiddenColumnIds, onChange, }) => ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 items-center gap-2 rounded-full px-4 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40', children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Settings }), (0, jsx_runtime_1.jsx)("span", { children: "Columns" })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-2 outline-none', children: columns.map((column) => {
8
- const isVisible = !hiddenColumnIds.includes(column.id);
9
- const visibleCount = columns.length - hiddenColumnIds.length;
10
- return ((0, jsx_runtime_1.jsxs)("label", { className: 'ps-floating-option cursor-pointer gap-3 text-ink hover:bg-primary/10', children: [(0, jsx_runtime_1.jsx)("input", { checked: isVisible, className: 'h-4 w-4 accent-[rgb(var(--ps-color-primary-rgb))]', disabled: isVisible && visibleCount <= 1, onChange: () => onChange(isVisible
10
+ const PsTableColumnPicker = ({ columns, hiddenColumnIds, onChange, }) => {
11
+ const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
12
+ const visibleCount = columns.filter((column) => !hiddenColumnIds.includes(column.id)).length;
13
+ return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 items-center gap-2 rounded-full px-4 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40', children: [(0, jsx_runtime_1.jsx)("span", { children: "Columns" }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-1.5 outline-none', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: columns.map((column) => {
14
+ const isVisible = !hiddenColumnIds.includes(column.id);
15
+ return ((0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { className: 'ps-floating-option w-full', isDisabled: isVisible && visibleCount <= 1, isSelected: isVisible, label: column.label, onChange: () => onChange(isVisible
11
16
  ? [...hiddenColumnIds, column.id]
12
- : hiddenColumnIds.filter((hiddenId) => hiddenId !== column.id)), type: 'checkbox' }), (0, jsx_runtime_1.jsx)("span", { children: column.label })] }, column.id));
13
- }) }) })] }));
17
+ : hiddenColumnIds.filter((hiddenId) => hiddenId !== column.id)), children: column.label }, column.id));
18
+ }) }) }) })] }));
19
+ };
14
20
  exports.PsTableColumnPicker = PsTableColumnPicker;
package/dist/components/ps-table-toolbar.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.PsTableToolbar = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const ps_core_components_1 = require("@pallasoft/ps-core-components");
5
6
  const ps_design_system_1 = require("@pallasoft/ps-design-system");
6
7
  const ps_icons_1 = require("@pallasoft/ps-icons");
7
8
  const react_aria_components_1 = require("react-aria-components");
@@ -10,7 +11,8 @@ const ps_table_filter_field_1 = require("./ps-table-filter-field");
10
11
  const toolbarButtonClassName = 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 items-center gap-2 rounded-full px-4 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40';
11
12
  const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilters, onFilterChange, onSearchChange, rows, search, searchPlaceholder, }) => {
12
13
  const filterableColumns = columns.filter((column) => column.filter);
14
+ const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
13
15
  const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
14
- 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 min-w-[12rem] flex-1 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", { 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', children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', 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 flex-wrap items-center gap-2', children: actions }) : null] }));
16
+ 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 min-w-[12rem] flex-1 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", { 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 flex-wrap items-center gap-2', children: actions }) : null] }));
15
17
  };
16
18
  exports.PsTableToolbar = PsTableToolbar;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  export * from './components/ps-data-table';
2
2
  export * from './components/ps-table-pagination';
3
- export * from './components/ps-table-row-actions';
4
3
  export * from './constants/table-filter-kind';
5
4
  export * from './interfaces/table-column';
6
5
  export * from './interfaces/table-column-filter';
package/dist/index.js CHANGED
@@ -16,7 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./components/ps-data-table"), exports);
18
18
  __exportStar(require("./components/ps-table-pagination"), exports);
19
- __exportStar(require("./components/ps-table-row-actions"), exports);
20
19
  __exportStar(require("./constants/table-filter-kind"), exports);
21
20
  __exportStar(require("./interfaces/table-column"), exports);
22
21
  __exportStar(require("./interfaces/table-column-filter"), exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pallasoft/ps-table-components",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -68,9 +68,10 @@
68
68
  "url": "git+https://github.com/pallasoft/ps-table-components.git"
69
69
  },
70
70
  "dependencies": {
71
- "@pallasoft/ps-design-system": "^1.2.2",
71
+ "@pallasoft/ps-core-components": "^2.2.0",
72
+ "@pallasoft/ps-design-system": "^1.3.0",
72
73
  "@pallasoft/ps-icons": "^1.3.0",
73
- "@pallasoft/ps-input-components": "^1.3.0",
74
+ "@pallasoft/ps-input-components": "^1.4.1",
74
75
  "@pallasoft/ps-motion-components": "^1.1.0",
75
76
  "react-aria-components": "^1.21.1"
76
77
  }
package/dist/components/ps-table-row-actions.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import type { PsTableRowAction } from '../interfaces/table-row-action';
2
- export interface PsTableRowActionsProps {
3
- actions: PsTableRowAction[];
4
- label: string;
5
- }
6
- export declare const PsTableRowActions: ({ actions, label }: PsTableRowActionsProps) => import("react").JSX.Element;
package/dist/components/ps-table-row-actions.js DELETED
@@ -1,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.PsTableRowActions = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const ps_design_system_1 = require("@pallasoft/ps-design-system");
6
- const ps_icons_1 = require("@pallasoft/ps-icons");
7
- const react_aria_components_1 = require("react-aria-components");
8
- const PsTableRowActions = ({ actions, label }) => ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuTrigger, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { "aria-label": label, className: 'ps-focus-ring inline-flex h-9 w-9 items-center justify-center rounded-xl text-ink/55 outline-none transition-colors hover:bg-ink/5 hover:text-ink data-[pressed]:bg-ink/10', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-5 w-5', iconKey: ps_icons_1.PsIconKey.More }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel min-w-44 p-1.5 outline-none', offset: 4, placement: 'bottom end', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: 'outline-none', disabledKeys: actions.filter((action) => action.isDisabled).map((action) => action.id), onAction: (key) => actions.find((action) => action.id === key)?.onSelect(), children: actions.map((action) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-floating-option', action.isDanger ? 'text-danger' : 'text-ink'), id: action.id, textValue: action.label, children: action.label }, action.id))) }) })] }));
9
- exports.PsTableRowActions = PsTableRowActions;