@nexub/react 6.4.0 → 6.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.4.0",
+  "version": "6.5.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
@@ -622,6 +622,18 @@
         "Visible focus ring on `:focus-visible`. Pair with a `<Label htmlFor>` so clicking the label moves focus into the field."
       ]
     },
+    {
+      "slug": "kanban",
+      "name": "Kanban",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the card within its column.",
+        "Alt+ArrowLeft / Alt+ArrowRight: Moves the card to the previous or next column. Mirrored in RTL."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "kbd",
       "name": "Kbd",
@@ -1050,6 +1062,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "sortable",
+      "name": "Sortable",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the item; focus stays on its handle."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "sparkline",
       "name": "Sparkline",

package/dist/components/DataTable/DataTable.d.ts

@@ -84,5 +84,12 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     expanded?: ExpandedState;
     defaultExpanded?: ExpandedState;
     onExpandedChange?: (expanded: ExpandedState) => void;
+    /**
+     * Lets people reorder rows: a handle column (drag, or Alt+ArrowUp/Down on the
+     * handle). Called with the reordered data. Hidden while a column is sorted.
+     */
+    onRowOrderChange?: (data: TData[]) => void;
+    /** Names a row in "Move ‹label›" and the move announcements. @default its position */
+    getRowLabel?: (row: TData) => string;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -22,6 +22,7 @@ import { Checkbox } from "../Checkbox/Checkbox.js";
 import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
+import { useReorder } from "../Sortable/reorder.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -167,6 +168,8 @@ function DataTable({
   expanded: expandedProp,
   defaultExpanded,
   onExpandedChange,
+  onRowOrderChange,
+  getRowLabel,
   caption,
   captionHidden = false,
   className,
@@ -221,12 +224,34 @@ function DataTable({
     pageSize: pagination?.pageSize ?? 20
   });
   const withSelectColumn = enableRowSelection && selectionColumn;
+  const reorderRows = Boolean(onRowOrderChange) && sorting.length === 0;
+  const rowReorder = useReorder({
+    lists: [data],
+    getId: (r) => getRowId ? getRowId(r, data.indexOf(r)) : String(data.indexOf(r)),
+    getLabel: (r) => getRowLabel?.(r) ?? String(data.indexOf(r) + 1),
+    onMove: (next) => onRowOrderChange?.(next[0])
+  });
   const columnPinning = React.useMemo(
     () => withSelectColumn && pinningIn.left?.length && !pinningIn.left.includes("__select") ? { ...pinningIn, left: ["__select", ...pinningIn.left] } : pinningIn,
     [withSelectColumn, pinningIn]
   );
+  const withRowHandles = React.useCallback(
+    (cols) => reorderRows ? [
+      {
+        id: "__drag",
+        enableSorting: false,
+        enableHiding: false,
+        header: () => null,
+        cell: ({ row }) => row.depth === 0 ? rowReorder.handle([0, row.index]) : null
+      },
+      ...cols
+    ] : cols,
+    // rowReorder changes every render; the handle reads fresh data through it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reorderRows, data]
+  );
   const allColumns = React.useMemo(
-    () => withSelectColumn ? [
+    () => withRowHandles(withSelectColumn ? [
       {
         id: "__select",
         enableSorting: false,
@@ -250,8 +275,8 @@ function DataTable({
         )
       },
       ...columns
-    ] : columns,
-    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow]
+    ] : columns),
+    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow, withRowHandles]
   );
   const tableState = React.useMemo(
     () => ({
@@ -396,6 +421,7 @@ function DataTable({
       /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: () => table.toggleAllRowsSelected(true), children: messages.selectAllRows(fmt(totalRows)) })
     ] }) }),
     /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement }),
+    reorderRows && rowReorder.live,
     /* @__PURE__ */ jsxs(
       TableRoot,
       {
@@ -421,7 +447,7 @@ function DataTable({
                 className: cn(
                   alignText[align],
                   compact && "h-8",
-                  col.id === "__select" && "w-10",
+                  (col.id === "__select" || col.id === "__drag") && "w-10",
                   // Anchors the resize handle; sticky (below) wins when set and anchors it too.
                   (enableColumnResizing || reorderable) && "relative",
                   maxHeight != null && "sticky top-0 z-[2] bg-[var(--color-surface)]",
@@ -513,6 +539,7 @@ function DataTable({
                   "data-index": i,
                   "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
                   "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+                  ...reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : {},
                   children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
                     TableCell,
                     {

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface KanbanColumn<T> {
+    id: string;
+    title: string;
+    items: T[];
+}
+export interface KanbanProps<T> {
+    columns: KanbanColumn<T>[];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** Called with the columns after a move; store them to apply it. */
+    onChange: (columns: KanbanColumn<T>[]) => void;
+    renderCard: (item: T) => React.ReactNode;
+    className?: string;
+}
+/**
+ * Columns of cards people can move: drag a card, or focus its handle and press
+ * Alt+Arrow keys (up/down within a column, left/right across columns).
+ */
+export declare function Kanban<T>({ columns, getId, getLabel, onChange, renderCard, className }: KanbanProps<T>): React.JSX.Element;

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "../Sortable/reorder.js";
+function Kanban({ columns, getId, getLabel, onChange, renderCard, className }) {
+  const baseId = React.useId();
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: columns.map((c) => c.items),
+    getId,
+    getLabel,
+    listLabels: columns.map((c) => c.title),
+    onMove: (next) => onChange(columns.map((c, i) => ({ ...c, items: next[i] })))
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4 overflow-x-auto pb-2", className), children: [
+    columns.map((column, c) => {
+      const headingId = `${baseId}-${c}`;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": headingId,
+          className: "flex w-72 shrink-0 flex-col gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] p-3",
+          children: [
+            /* @__PURE__ */ jsxs("h3", { id: headingId, className: "flex items-center justify-between text-title-sm font-semibold text-[var(--color-on-surface)]", children: [
+              column.title,
+              /* @__PURE__ */ jsx("span", { className: "text-label-md font-normal tabular-nums text-[var(--color-on-surface-muted)]", children: column.items.length })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { ...listProps(c), className: "m-0 flex min-h-16 list-none flex-col gap-2 p-0", children: column.items.map((item, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                ...itemProps([c, i]),
+                className: "flex items-start gap-1 rounded-shape-control bg-[var(--color-surface)] p-2 text-body-md shadow-elevation-1",
+                children: [
+                  handle([c, i]),
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 pt-0.5", children: renderCard(item) })
+                ]
+              },
+              getId(item)
+            )) })
+          ]
+        },
+        column.id
+      );
+    }),
+    live
+  ] });
+}
+export {
+  Kanban
+};

package/dist/components/Kanban/index.d.ts

@@ -0,0 +1,2 @@
+export { Kanban } from './Kanban.js';
+export type { KanbanProps, KanbanColumn } from './Kanban.js';

package/dist/components/Kanban/index.js

@@ -0,0 +1,4 @@
+import { Kanban } from "./Kanban.js";
+export {
+  Kanban
+};

package/dist/components/Sortable/Sortable.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface SortableProps<T> {
+    items: T[];
+    getId: (item: T) => string;
+    /** Names the item in "Move ‹label›" and the move announcements. */
+    getLabel: (item: T) => string;
+    /** Called with the reordered items; store them to apply the move. */
+    onReorder: (items: T[]) => void;
+    /** The item's content; the drag handle sits before it. */
+    children: (item: T) => React.ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A list people can reorder: drag an item, or focus its handle and press
+ * Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
+ */
+export declare function Sortable<T>({ items, getId, getLabel, onReorder, children, className, ...aria }: SortableProps<T>): React.JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -0,0 +1,31 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "./reorder.js";
+function Sortable({ items, getId, getLabel, onReorder, children, className, ...aria }) {
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: [items],
+    getId,
+    getLabel,
+    onMove: (next) => onReorder(next[0])
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { ...aria, ...listProps(0), className: cn("m-0 flex list-none flex-col gap-1 p-0", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...itemProps([0, i]),
+        className: "flex items-center gap-2 rounded-shape-control border border-[var(--color-outline-variant)] bg-[var(--color-surface)] py-1.5 pe-3 ps-1.5 text-body-md",
+        children: [
+          handle([0, i]),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: children(item) })
+        ]
+      },
+      getId(item)
+    )) }),
+    live
+  ] });
+}
+export {
+  Sortable
+};

package/dist/components/Sortable/index.d.ts

@@ -0,0 +1,2 @@
+export { Sortable } from './Sortable.js';
+export type { SortableProps } from './Sortable.js';

package/dist/components/Sortable/index.js

@@ -0,0 +1,4 @@
+import { Sortable } from "./Sortable.js";
+export {
+  Sortable
+};

package/dist/components/Sortable/reorder.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/** Internal: lists of items, moved by drag (native) or Alt+Arrow on a handle. */
+export type Pos = [list: number, index: number];
+export declare function moveItem<T>(lists: T[][], [fc, fi]: Pos, [tc, ti]: Pos): T[][];
+interface ReorderOptions<T> {
+    lists: T[][];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** List names, for moves across lists. */
+    listLabels?: string[];
+    onMove: (next: T[][]) => void;
+}
+/** Shared engine: drag state, keyboard moves, focus after a move, announcements. */
+export declare function useReorder<T>({ lists, getId, getLabel, listLabels, onMove }: ReorderOptions<T>): {
+    itemProps: (pos: Pos) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    listProps: (list: number) => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+    handle: (pos: Pos, className?: string) => React.JSX.Element;
+    live: React.JSX.Element;
+};
+export {};

package/dist/components/Sortable/reorder.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+function moveItem(lists, [fc, fi], [tc, ti]) {
+  const next = lists.map((l) => [...l]);
+  const [item] = next[fc].splice(fi, 1);
+  if (item === void 0) return lists;
+  next[tc].splice(Math.min(ti, next[tc].length), 0, item);
+  return next;
+}
+function useReorder({ lists, getId, getLabel, listLabels, onMove }) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const dragged = React.useRef(null);
+  const handles = React.useRef(/* @__PURE__ */ new Map());
+  const refocus = React.useRef(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const hintId = React.useId();
+  React.useEffect(() => {
+    if (refocus.current) handles.current.get(refocus.current)?.focus();
+    refocus.current = null;
+  });
+  const move = (from, to, keepFocus) => {
+    if (from[0] === to[0] && from[1] === to[1]) return;
+    const item = lists[from[0]][from[1]];
+    const next = moveItem(lists, from, to);
+    const [tc] = to;
+    const ti = next[tc].indexOf(item);
+    if (keepFocus) refocus.current = getId(item);
+    onMove(next);
+    const total = next[tc].length;
+    setAnnouncement(
+      from[0] !== tc && listLabels?.[tc] ? t.itemMovedToColumn(getLabel(item), listLabels[tc], ti + 1, total) : t.itemMoved(getLabel(item), ti + 1, total)
+    );
+  };
+  const itemProps = (pos) => ({
+    draggable: true,
+    onDragStart: (e) => {
+      dragged.current = pos;
+      e.dataTransfer.effectAllowed = "move";
+    },
+    onDragOver: (e) => {
+      if (dragged.current) e.preventDefault();
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dragged.current) move(dragged.current, pos, false);
+      dragged.current = null;
+    },
+    onDragEnd: () => {
+      dragged.current = null;
+    }
+  });
+  const listProps = (list) => ({
+    onDragOver: (e) => {
+      if (dragged.current) e.preventDefault();
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      if (dragged.current) move(dragged.current, [list, lists[list].length], false);
+      dragged.current = null;
+    }
+  });
+  const handle = (pos, className) => {
+    const item = lists[pos[0]][pos[1]];
+    const id = getId(item);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: (el) => {
+          if (el) handles.current.set(id, el);
+          else handles.current.delete(id);
+        },
+        "aria-label": t.moveItem(getLabel(item)),
+        "aria-describedby": hintId,
+        onKeyDown: (e) => {
+          if (!e.altKey) return;
+          const [c, i] = pos;
+          const sideways = lists.length > 1;
+          const toNext = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+          const toPrev = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+          let to = null;
+          if (e.key === "ArrowUp" && i > 0) to = [c, i - 1];
+          else if (e.key === "ArrowDown" && i < lists[c].length - 1) to = [c, i + 1];
+          else if (sideways && e.key === toNext && c < lists.length - 1) to = [c + 1, i];
+          else if (sideways && e.key === toPrev && c > 0) to = [c - 1, i];
+          if (!to) return;
+          e.preventDefault();
+          move(pos, to, true);
+        },
+        className: cn(
+          "inline-flex size-7 shrink-0 cursor-grab items-center justify-center rounded-shape-min text-[var(--color-on-surface-variant)]",
+          "hover:bg-[var(--color-surface-container-high)] active:cursor-grabbing",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(GripVertical, { size: "sm", "aria-hidden": "true" })
+      }
+    );
+  };
+  const live = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: t.reorderHint }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement })
+  ] });
+  return { itemProps, listProps, handle, live };
+}
+export {
+  moveItem,
+  useReorder
+};

package/dist/index.d.ts

@@ -234,6 +234,10 @@ export { Stepper } from './components/Stepper/index.js';
 export type { StepperProps, StepperStep } from './components/Stepper/index.js';
 export { ActionBar } from './components/ActionBar/index.js';
 export type { ActionBarProps } from './components/ActionBar/index.js';
+export { Sortable } from './components/Sortable/index.js';
+export type { SortableProps } from './components/Sortable/index.js';
+export { Kanban } from './components/Kanban/index.js';
+export type { KanbanProps, KanbanColumn } from './components/Kanban/index.js';
 export type { OTPInputProps } from './components/OTPInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';

package/dist/index.js

@@ -131,6 +131,8 @@ import { TreeView } from "./components/TreeView/index.js";
 import { ResizablePanels } from "./components/ResizablePanels/index.js";
 import { Stepper } from "./components/Stepper/index.js";
 import { ActionBar } from "./components/ActionBar/index.js";
+import { Sortable } from "./components/Sortable/index.js";
+import { Kanban } from "./components/Kanban/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -211,6 +213,7 @@ export {
   IconButton,
   InlineEdit,
   Input,
+  Kanban,
   Kbd,
   KeyboardShortcut,
   KpiTile,
@@ -261,6 +264,7 @@ export {
   SkeletonSwap,
   Slide,
   Slider,
+  Sortable,
   SourceChip,
   SourceList,
   Sparkline,