@apliteni/apliteni-ui 0.25.2 → 0.26.0

package/package.json

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

package/react/README.md

@@ -31,6 +31,14 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 
 Components: `DataTable`, `Modal`, `Button`, `Badge`, `Card`, `Icon`.
 
+## What the Modal does with focus
+
+Opening moves focus to the first eligible control in the body, in DOM order, or to
+the dialog itself if none exists. Links and disclosure summaries are eligible; hidden
+controls, disabled controls, controls inside a closed disclosure and elements with a
+negative tabindex are skipped. Tab and Shift+Tab wrap at the ends of the same list.
+Escape and a click on the scrim dismiss the dialog and return focus to its opener.
+
 ## Work on them
 
 From the repo root — one `npm install` covers the workspace:
@@ -56,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

@@ -84,7 +84,25 @@ function Card({ title, sub, children }) {
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary:first-of-type';
+function tabbable(el) {
+  const tabindex = el.getAttribute("tabindex");
+  if (tabindex !== null && Number(tabindex) < 0) return false;
+  if (el.matches(":disabled")) return false;
+  for (let node = el; node; node = node.parentElement) {
+    if (node.inert || node.hasAttribute("inert") || node.hasAttribute("hidden")) return false;
+    const holder = node.parentElement;
+    const folded = holder?.tagName === "DETAILS" && !holder.open;
+    if (folded && node !== holder.querySelector(":scope > summary")) return false;
+  }
+  return typeof el.checkVisibility !== "function" || el.checkVisibility({ visibilityProperty: true });
+}
+var tabbablesIn = (root) => Array.from(root.querySelectorAll(FOCUSABLE)).filter(tabbable);
+var dismissOnScrim = (onClose) => (e) => {
+  if (e.target !== e.currentTarget) return;
+  e.preventDefault();
+  onClose();
+};
 function Modal({ open, title, onClose, footer, children }) {
   const panel = useRef(null);
   useEffect(() => {
@@ -95,7 +113,7 @@ function Modal({ open, title, onClose, footer, children }) {
         return;
       }
       if (e.key !== "Tab" || !panel.current) return;
-      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      const items = tabbablesIn(panel.current);
       if (items.length === 0) {
         e.preventDefault();
         panel.current.focus();
@@ -112,7 +130,7 @@ function Modal({ open, title, onClose, footer, children }) {
       if (!e.shiftKey && active === last) {
         e.preventDefault();
         first.focus();
-      } else if (e.shiftKey && active === first) {
+      } else if (e.shiftKey && (active === first || active === panel.current)) {
         e.preventDefault();
         last.focus();
       }
@@ -133,16 +151,13 @@ function Modal({ open, title, onClose, footer, children }) {
   }, [open]);
   useEffect(() => {
     if (!open) return;
-    const target = panel.current?.querySelector(
-      ".rx-modal__body input, .rx-modal__body select, .rx-modal__body textarea, .rx-modal__body button"
-    ) || panel.current;
+    const body = panel.current?.querySelector(".rx-modal__body");
+    const target = (body ? tabbablesIn(body) : [])[0] || panel.current;
     target?.focus();
   }, [open]);
   if (!open) return null;
   return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: (e) => {
-      if (e.target === e.currentTarget) onClose();
-    }, children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
+    /* @__PURE__ */ jsx5("div", { className: "rx-scrim", onMouseDown: dismissOnScrim(onClose), children: /* @__PURE__ */ jsxs3("div", { className: "rx-modal", role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, ref: panel, children: [
       /* @__PURE__ */ jsxs3("div", { className: "rx-modal__head", children: [
         /* @__PURE__ */ jsx5("div", { className: "rx-modal__title", children: title }),
         /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
@@ -157,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",
@@ -194,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
@@ -204,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) })
@@ -215,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",
@@ -223,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)) })
     ] }),
@@ -342,5 +371,6 @@ export {
   Icon,
   Modal,
   Skeleton,
-  SkeletonTable
+  SkeletonTable,
+  sortTableRows
 };