@paroicms/react-ui 0.5.5 → 0.5.7

package/dist/Button.js

@@ -2,18 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import "../styles/Button.css";
 import { clsx } from "clsx";
 import { Check, Loader2 } from "lucide-react";
-import { useCallback, useEffect, useState, } from "react";
+import { useCallback, useEffect, useRef, useState, } from "react";
 import { useReactUIConfig } from "./react-ui-provider.js";
 export function Button(props) {
     const { children, className, disabled, outlined, icon, severity = "primary", ref, ...rest } = props;
     const { autoDismissInsideFeedbackDurationMs } = useReactUIConfig();
     const [loading, setLoading] = useState(false);
     const [showFeedback, setShowFeedback] = useState(false);
-    // Cancel feedback when button becomes enabled
+    const prevDisabledRef = useRef(disabled);
+    // Clear feedback only when disabled transitions from true to false
     useEffect(() => {
-        if (!disabled && showFeedback) {
+        if (prevDisabledRef.current && !disabled && showFeedback) {
             setShowFeedback(false);
         }
+        prevDisabledRef.current = disabled;
     }, [disabled, showFeedback]);
     const classNames = clsx("PaBtn", severity, outlined && "outlined", disabled && "disabled", showFeedback && "feedback", className);
     const handleAsyncClick = useCallback(async (e) => {

package/dist/DataTable.d.ts

@@ -6,7 +6,8 @@ export interface DataTableColumn<T = unknown> {
     body?: (rowData: T) => ReactNode;
     style?: CSSProperties;
     sortable?: boolean;
-    bodyClassName?: string;
+    thClassName?: string;
+    tdClassName?: string;
 }
 export interface DataTableProps<T> {
     value: T[];

package/dist/DataTable.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/DataTable.css";
 import { clsx } from "clsx";
-import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsUpDown } from "lucide-react";
+import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsUpDown, CircleSlash2, } from "lucide-react";
 import { Select } from "./Select.js";
 import { Spinner } from "./Spinner.js";
-export function DataTable({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage = "No data available", paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
+export function DataTable({ value, dataKey, columns, size, loading, className, tableClassName, emptyMessage, paginator, rows = 10, totalRecords, first = 0, onPage, rowsPerPageOptions, sortField, sortOrder, onSort, onRowClick, rowClassName, totalLabel, }) {
     const total = totalRecords ?? value.length;
     const pageCount = Math.ceil(total / rows);
     const currentPage = Math.floor(first / rows) + 1;
@@ -14,5 +14,5 @@ export function DataTable({ value, dataKey, columns, size, loading, className, t
         const newOrder = sortField === field && sortOrder === 1 ? -1 : 1;
         onSort({ field, order: newOrder });
     };
-    return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable"), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.bodyClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
+    return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable", col.thClassName), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage ?? _jsx(CircleSlash2, { size: 24 }) }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.tdClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",

package/styles/Button.css

@@ -13,12 +13,17 @@
   font-weight: var(--font-medium);
   line-height: 1;
   white-space: nowrap;
-  text-decoration: none;
   cursor: pointer;
   border: none;
   border-radius: var(--radius);
   transition: all var(--transition);
 
+  &,
+  &:visited,
+  &:hover {
+    text-decoration: none;
+  }
+
   &:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;

package/styles/DataTable.css

@@ -25,6 +25,7 @@
   padding: var(--space-3) var(--space-4);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
+  vertical-align: middle;
   color: var(--color-text-muted);
   text-align: left;
   text-transform: uppercase;

package/styles/theme/field.css

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
+  width: 100%;
 
   &:not(:last-child) {
     margin-bottom: var(--space-4);