@mirror-physics/fractal-ui 0.2.0-next.63 → 0.2.0-next.65
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.
- package/dist/index.cjs +105 -53
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +11 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +18 -2
- package/dist/index.d.ts +18 -2
- package/dist/index.js +105 -53
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1444,6 +1444,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
|
1444
1444
|
function SortableTable({
|
|
1445
1445
|
columns,
|
|
1446
1446
|
data,
|
|
1447
|
+
"aria-label": ariaLabel,
|
|
1447
1448
|
emptyMessage,
|
|
1448
1449
|
header,
|
|
1449
1450
|
size = "md",
|
|
@@ -1457,6 +1458,8 @@ function SortableTable({
|
|
|
1457
1458
|
onSortChange,
|
|
1458
1459
|
pagination,
|
|
1459
1460
|
highlightRow,
|
|
1461
|
+
selection,
|
|
1462
|
+
isRowDisabled,
|
|
1460
1463
|
onRowClick,
|
|
1461
1464
|
onRowDoubleClick,
|
|
1462
1465
|
rowAction
|
|
@@ -1504,6 +1507,10 @@ function SortableTable({
|
|
|
1504
1507
|
const startIndex = (page - 1) * pageSize;
|
|
1505
1508
|
return sorted.slice(startIndex, startIndex + pageSize);
|
|
1506
1509
|
}, [pagination, sorted]);
|
|
1510
|
+
const selectableRows = selection ? data.filter((row) => !isRowDisabled?.(row)) : [];
|
|
1511
|
+
const selectedRowCount = selection ? selectableRows.filter(selection.isSelected).length : 0;
|
|
1512
|
+
const allRowsSelected = selectableRows.length > 0 && selectedRowCount === selectableRows.length;
|
|
1513
|
+
const someRowsSelected = selectedRowCount > 0 && !allRowsSelected;
|
|
1507
1514
|
const handleSortClick = (key) => {
|
|
1508
1515
|
let nextDirection;
|
|
1509
1516
|
if (!activeKey || !activeDirection) {
|
|
@@ -1528,62 +1535,92 @@ function SortableTable({
|
|
|
1528
1535
|
};
|
|
1529
1536
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
1530
1537
|
header && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1531
|
-
visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { className: "fractal-sortable-table-table", children: [
|
|
1532
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.
|
|
1533
|
-
|
|
1534
|
-
|
|
1538
|
+
visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
|
|
1540
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1541
|
+
"th",
|
|
1542
|
+
{
|
|
1543
|
+
className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
|
|
1544
|
+
scope: "col",
|
|
1545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1546
|
+
Checkbox,
|
|
1547
|
+
{
|
|
1548
|
+
"aria-label": selection.selectAllLabel ?? "Select all rows",
|
|
1549
|
+
checked: allRowsSelected,
|
|
1550
|
+
disabled: selectableRows.length === 0,
|
|
1551
|
+
indeterminate: someRowsSelected,
|
|
1552
|
+
onCheckedChange: (checked) => {
|
|
1553
|
+
selectableRows.forEach((row) => {
|
|
1554
|
+
if (selection.isSelected(row) !== checked) {
|
|
1555
|
+
selection.onSelectedChange(row, checked);
|
|
1556
|
+
}
|
|
1557
|
+
});
|
|
1558
|
+
}
|
|
1559
|
+
}
|
|
1560
|
+
)
|
|
1561
|
+
}
|
|
1562
|
+
),
|
|
1563
|
+
columns.map((col) => {
|
|
1564
|
+
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1565
|
+
if (!col.sortable) {
|
|
1566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1567
|
+
"th",
|
|
1568
|
+
{
|
|
1569
|
+
className: "fractal-sortable-table-th",
|
|
1570
|
+
scope: "col",
|
|
1571
|
+
style: { width: col.width },
|
|
1572
|
+
children: col.header
|
|
1573
|
+
},
|
|
1574
|
+
col.key
|
|
1575
|
+
);
|
|
1576
|
+
}
|
|
1535
1577
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1536
1578
|
"th",
|
|
1537
1579
|
{
|
|
1538
|
-
className: "fractal-sortable-table-th",
|
|
1580
|
+
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1581
|
+
scope: "col",
|
|
1539
1582
|
style: { width: col.width },
|
|
1540
|
-
children:
|
|
1583
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1584
|
+
"button",
|
|
1585
|
+
{
|
|
1586
|
+
type: "button",
|
|
1587
|
+
className: cn(
|
|
1588
|
+
"fractal-sortable-table-sort-button",
|
|
1589
|
+
isActive && "fractal-sortable-table-sort-button--active"
|
|
1590
|
+
),
|
|
1591
|
+
onClick: () => handleSortClick(col.key),
|
|
1592
|
+
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1593
|
+
children: [
|
|
1594
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: col.header }),
|
|
1595
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowsUpDown, { size: 14 }) })
|
|
1596
|
+
]
|
|
1597
|
+
}
|
|
1598
|
+
)
|
|
1541
1599
|
},
|
|
1542
1600
|
col.key
|
|
1543
1601
|
);
|
|
1544
|
-
}
|
|
1545
|
-
|
|
1546
|
-
"th",
|
|
1547
|
-
{
|
|
1548
|
-
className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
|
|
1549
|
-
style: { width: col.width },
|
|
1550
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1551
|
-
"button",
|
|
1552
|
-
{
|
|
1553
|
-
type: "button",
|
|
1554
|
-
className: cn(
|
|
1555
|
-
"fractal-sortable-table-sort-button",
|
|
1556
|
-
isActive && "fractal-sortable-table-sort-button--active"
|
|
1557
|
-
),
|
|
1558
|
-
onClick: () => handleSortClick(col.key),
|
|
1559
|
-
"aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
|
|
1560
|
-
children: [
|
|
1561
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: col.header }),
|
|
1562
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.ArrowsUpDown, { size: 14 }) })
|
|
1563
|
-
]
|
|
1564
|
-
}
|
|
1565
|
-
)
|
|
1566
|
-
},
|
|
1567
|
-
col.key
|
|
1568
|
-
);
|
|
1569
|
-
}) }) }),
|
|
1602
|
+
})
|
|
1603
|
+
] }) }),
|
|
1570
1604
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1571
1605
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1572
|
-
const
|
|
1573
|
-
const
|
|
1606
|
+
const disabled = isRowDisabled?.(row) ?? false;
|
|
1607
|
+
const interactive = !disabled && Boolean(onRowClick || onRowDoubleClick);
|
|
1608
|
+
const action = !disabled && rowAction ? {
|
|
1574
1609
|
label: rowAction.label(row, rowIndex),
|
|
1575
1610
|
icon: rowAction.icon(row, rowIndex)
|
|
1576
1611
|
} : null;
|
|
1577
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.
|
|
1612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1578
1613
|
"tr",
|
|
1579
1614
|
{
|
|
1580
1615
|
className: cn(
|
|
1581
1616
|
"fractal-sortable-table-row",
|
|
1582
1617
|
highlighted && "fractal-sortable-table-row--highlighted",
|
|
1583
|
-
interactive && "fractal-sortable-table-row--interactive"
|
|
1618
|
+
interactive && "fractal-sortable-table-row--interactive",
|
|
1619
|
+
disabled && "fractal-sortable-table-row--disabled"
|
|
1584
1620
|
),
|
|
1585
|
-
|
|
1586
|
-
|
|
1621
|
+
"data-disabled": disabled || void 0,
|
|
1622
|
+
onClick: !disabled && onRowClick ? () => onRowClick(row, rowIndex) : void 0,
|
|
1623
|
+
onDoubleClick: !disabled && onRowDoubleClick ? () => onRowDoubleClick(row, rowIndex) : void 0,
|
|
1587
1624
|
onKeyDown: interactive ? (event) => {
|
|
1588
1625
|
if (event.key === "Enter" || event.key === " ") {
|
|
1589
1626
|
event.preventDefault();
|
|
@@ -1592,23 +1629,38 @@ function SortableTable({
|
|
|
1592
1629
|
}
|
|
1593
1630
|
} : void 0,
|
|
1594
1631
|
"aria-label": action?.label,
|
|
1632
|
+
"aria-disabled": disabled || void 0,
|
|
1595
1633
|
role: interactive ? "button" : void 0,
|
|
1596
1634
|
tabIndex: interactive ? 0 : void 0,
|
|
1597
|
-
children:
|
|
1598
|
-
"td",
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
"
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
},
|
|
1610
|
-
col.
|
|
1611
|
-
|
|
1635
|
+
children: [
|
|
1636
|
+
selection && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1637
|
+
Checkbox,
|
|
1638
|
+
{
|
|
1639
|
+
"aria-label": selection.getRowLabel(row),
|
|
1640
|
+
checked: !disabled && selection.isSelected(row),
|
|
1641
|
+
disabled,
|
|
1642
|
+
onClick: (event) => event.stopPropagation(),
|
|
1643
|
+
onCheckedChange: (checked) => {
|
|
1644
|
+
if (!disabled) selection.onSelectedChange(row, checked);
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
) }),
|
|
1648
|
+
columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1649
|
+
"td",
|
|
1650
|
+
{
|
|
1651
|
+
className: cn(
|
|
1652
|
+
"fractal-sortable-table-td",
|
|
1653
|
+
action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
|
|
1654
|
+
),
|
|
1655
|
+
style: { width: col.width, textAlign: col.align ?? "left" },
|
|
1656
|
+
children: [
|
|
1657
|
+
col.render(row, rowIndex),
|
|
1658
|
+
action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
|
|
1659
|
+
]
|
|
1660
|
+
},
|
|
1661
|
+
col.key
|
|
1662
|
+
))
|
|
1663
|
+
]
|
|
1612
1664
|
},
|
|
1613
1665
|
rowIndex
|
|
1614
1666
|
);
|