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