@apliteni/apliteni-ui 0.25.3 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.25.3",
+  "version": "0.26.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -64,3 +64,32 @@ The bare `@apliteni/apliteni-ui` specifier in this source resolves to the kit it
 once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` points
 vitest and Storybook straight at `../src/` — which is why the class-name parity tests
 now compare against the working tree rather than the last published release.
+
+### Tables with another presentation of the same rows
+
+Pass `selectable={false}` to omit selection controls and their callbacks. Existing callers
+that supply selection callbacks retain the checkbox column by default.
+
+`sort` and `onSortChange` make sorting controlled. Both presentations can use the exported
+`sortTableRows` helper, so initial order, stable ties and later changes agree:
+
+```tsx
+const [sort, setSort] = useState<TableSort<Row>>({ key: 'name', dir: -1 });
+const ordered = sortTableRows(rows, sort);
+
+<DataTable columns={columns} rows={rows} selectable={false}
+  sort={sort} onSortChange={setSort} />
+```
+
+Render the sibling list from `ordered`. Omit `sort` to keep the table's own state;
+`onSortChange` can also observe that uncontrolled state. Set `key: undefined` to preserve
+input order. Import `TableSort` and `sortTableRows` from `@apliteni/apliteni-ui/react`.
+
+Changing the sort returns the table to its first page. The comparator uses JavaScript
+`<` and `>`; use consistently typed, comparable values in sortable columns. Ordering of
+mixed types, missing values and `NaN` is not guaranteed. `sortTableRows` always returns
+a new array, including when `key` is `undefined`.
+
+Choose controlled or uncontrolled once per table. Passing `sort` for a while and then
+dropping it is not supported: the table falls back to the sort state it started with, not to
+the one it was last given.

package/react/dist/index.d.ts

@@ -45,17 +45,36 @@ type Column<T> = {
     sortable?: boolean;
     render?: (row: T) => ReactNode;
 };
-type DataTableProps<T> = {
-    columns: Column<T>[];
-    rows: T[];
-    pageSize?: number;
+type TableSort<T> = {
+    key: (keyof T & string) | undefined;
+    dir: 1 | -1;
+};
+type SelectionProps = {
+    selectable: false;
+    selected?: Set<string>;
+    onToggle?: (name: string) => void;
+    onTogglePage?: (names: string[]) => void;
+} | {
+    selectable?: true;
     selected: Set<string>;
     onToggle: (name: string) => void;
     onTogglePage: (names: string[]) => void;
 };
+type DataTableProps<T> = {
+    columns: Column<T>[];
+    rows: T[];
+    pageSize?: number;
+} & SelectionProps & ({
+    sort?: never;
+    onSortChange?: (sort: TableSort<T>) => void;
+} | {
+    sort: TableSort<T>;
+    onSortChange: (sort: TableSort<T>) => void;
+});
+declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
 declare function DataTable<T extends {
     name: string;
-}>({ columns, rows, pageSize, selected, onToggle, onTogglePage, }: DataTableProps<T>): react.JSX.Element;
+}>({ columns, rows, pageSize, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, }: DataTableProps<T>): react.JSX.Element;
 
 type SkeletonProps = {
     /** A count of bars, or explicit widths when a ragged prose edge matters. */
@@ -96,4 +115,4 @@ type DeniedProps = {
 };
 declare function Denied({ title, sub, need, icon, className, children, }: DeniedProps): react.JSX.Element;
 
-export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Denied, type DeniedProps, Icon, Modal, type ModalProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps };
+export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Denied, type DeniedProps, Icon, Modal, type ModalProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, type TableSort, sortTableRows };

package/react/dist/index.js

@@ -172,36 +172,50 @@ function Modal({ open, title, onClose, footer, children }) {
 // src/DataTable.tsx
 import { useMemo, useState } from "react";
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function sortTableRows(rows, sort) {
+  if (sort.key === void 0) return [...rows];
+  const key = sort.key;
+  return [...rows].sort((a, b) => (a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0) * sort.dir);
+}
 function DataTable({
   columns,
   rows,
   pageSize = 4,
-  selected,
-  onToggle,
-  onTogglePage
+  selectable = true,
+  selected = /* @__PURE__ */ new Set(),
+  onToggle = () => {
+  },
+  onTogglePage = () => {
+  },
+  sort: controlledSort,
+  onSortChange
 }) {
-  const [sort, setSort] = useState(
+  const [localSort, setLocalSort] = useState(
     { key: columns.find((c) => c.sortable)?.key, dir: -1 }
   );
+  const sort = controlledSort ?? localSort;
   const [page, setPage] = useState(0);
-  const sorted = useMemo(() => {
-    if (!sort.key) return rows;
-    const k = sort.key;
-    return [...rows].sort((a, b) => (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0) * sort.dir);
-  }, [rows, sort]);
+  const [pagedSort, setPagedSort] = useState(sort);
+  if (pagedSort.key !== sort.key || pagedSort.dir !== sort.dir) {
+    setPagedSort(sort);
+    setPage(0);
+  }
+  const sorted = useMemo(() => sortTableRows(rows, sort), [rows, sort.key, sort.dir]);
   const pages = Math.max(1, Math.ceil(sorted.length / pageSize));
   const safePage = Math.min(page, pages - 1);
   const slice = sorted.slice(safePage * pageSize, safePage * pageSize + pageSize);
-  const onSort = (k) => {
-    setSort((s) => s.key === k ? { key: k, dir: s.dir === 1 ? -1 : 1 } : { key: k, dir: -1 });
+  const onSort = (key) => {
+    const next = sort.key === key ? { key, dir: sort.dir === 1 ? -1 : 1 } : { key, dir: -1 };
+    if (controlledSort === void 0) setLocalSort(next);
+    onSortChange?.(next);
     setPage(0);
   };
   const caret = (k) => sort.key === k ? sort.dir === 1 ? " \u25B2" : " \u25BC" : " \u2195";
-  const pageAllOn = slice.length > 0 && slice.every((r) => selected.has(r.name));
+  const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsxs4("table", { className: "ui-table ui-table--hover ui-table--zebra", children: [
       /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
-        /* @__PURE__ */ jsx6("th", { scope: "col", children: /* @__PURE__ */ jsx6(
+        selectable ? /* @__PURE__ */ jsx6("th", { scope: "col", children: /* @__PURE__ */ jsx6(
           "input",
           {
             type: "checkbox",
@@ -209,7 +223,7 @@ function DataTable({
             "aria-label": "Select all rows on this page",
             onChange: () => onTogglePage(slice.map((r) => r.name))
           }
-        ) }),
+        ) }) : null,
         columns.map((c) => (
           // The sort control is a real <button> inside the header cell. It used to be
           // role="button" ON the <th>, which threw away the columnheader role and put
@@ -219,7 +233,7 @@ function DataTable({
             {
               scope: "col",
               className: [c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
-              "aria-sort": c.sortable ? sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : "none" : void 0,
+              "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable ? "none" : void 0,
               children: c.sortable ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
                 c.label,
                 /* @__PURE__ */ jsx6("span", { className: "rx-caret", "aria-hidden": "true", children: caret(c.key) })
@@ -230,7 +244,7 @@ function DataTable({
         ))
       ] }) }),
       /* @__PURE__ */ jsx6("tbody", { children: slice.map((r) => /* @__PURE__ */ jsxs4("tr", { children: [
-        /* @__PURE__ */ jsx6("td", { children: /* @__PURE__ */ jsx6(
+        selectable ? /* @__PURE__ */ jsx6("td", { children: /* @__PURE__ */ jsx6(
           "input",
           {
             type: "checkbox",
@@ -238,7 +252,7 @@ function DataTable({
             "aria-label": `Select ${r.name}`,
             onChange: () => onToggle(r.name)
           }
-        ) }),
+        ) }) : null,
         columns.map((c) => /* @__PURE__ */ jsx6("td", { className: c.num ? "ui-table__num" : void 0, children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
       ] }, r.name)) })
     ] }),
@@ -357,5 +371,6 @@ export {
   Icon,
   Modal,
   Skeleton,
-  SkeletonTable
+  SkeletonTable,
+  sortTableRows
 };