@nexub/react 7.6.0 → 7.7.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.6.0",
+  "version": "7.7.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.",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
+import { type ColumnDef, type SortingState, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState, type ExpandedState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -75,6 +75,20 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     pagination?: {
         pageSize?: number;
     };
+    /** Controlled sort (with `enableSorting`): `[{ id: 'name', desc: false }]`. */
+    sort?: SortingState;
+    onSortChange?: (sort: SortingState) => void;
+    /** Rows arrive sorted (server-side): headers still toggle `sort`, but rows aren't reordered. */
+    manualSort?: boolean;
+    /** Controlled page, zero-based. Turns pagination on. */
+    page?: number;
+    /** Rows per page; overrides `pagination.pageSize`. Turns pagination on. @default 20 */
+    pageSize?: number;
+    onPageChange?: (page: number) => void;
+    /** `data` is the current page only (server-side); set `rowCount` for the page count. Turns pagination on. */
+    manualPagination?: boolean;
+    /** Total rows across all pages, with `manualPagination`. */
+    rowCount?: number;
     /**
      * Nested rows (a tree table): return a row's children. The first column gets
      * an expand toggle and indents each level. Sorting sorts within each level.
@@ -96,4 +110,4 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     /** Shown in a full-width row when there are no rows. @default messages.noResults */
     emptyState?: React.ReactNode;
 }
-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, loading, emptyState, 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: paginationProp, sort, onSortChange, manualSort, page, pageSize: pageSizeProp, onPageChange, manualPagination, rowCount, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -20,7 +20,6 @@ import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Table } from "../Table/Table.js";
 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";
 import { Skeleton } from "../Skeleton/Skeleton.js";
@@ -134,6 +133,67 @@ function TreeCell({
   ] });
 }
 const px = (n) => typeof n === "number" ? `${n}px` : n;
+const ViewOptions = React.lazy(() => import("./ViewOptions.js").then((m) => ({ default: m.ViewOptions })));
+const placeCell = (column, resizable) => (el) => {
+  if (!el) return;
+  el.style.width = resizable ? px(column.getSize()) : "";
+  const side = column.getIsPinned();
+  el.style.insetInlineStart = side === "left" ? px(column.getStart("left")) : "";
+  el.style.insetInlineEnd = side === "right" ? px(column.getAfter("right")) : "";
+};
+const pinClass = (column) => {
+  const side = column.getIsPinned();
+  if (!side) return void 0;
+  return cn(
+    "sticky z-[1] bg-[var(--color-surface)]",
+    "[tr:hover>&]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,var(--color-surface))]",
+    "[tr[data-state=selected]>&]:bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-surface))]",
+    side === "left" && column.getIsLastColumn("left") && "border-e border-[var(--color-outline-variant)]",
+    side === "right" && column.getIsFirstColumn("right") && "border-s border-[var(--color-outline-variant)]"
+  );
+};
+function RowViewImpl({
+  row,
+  index,
+  selected,
+  compact,
+  pinned,
+  resizable,
+  selectable,
+  tree,
+  virtual,
+  measure,
+  expandLabel,
+  collapseLabel,
+  dragProps
+}) {
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      ref: measure,
+      "data-index": index,
+      "aria-rowindex": virtual ? index + 2 : void 0,
+      "data-state": selectable && selected ? "selected" : void 0,
+      ...dragProps,
+      children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          ref: pinned || resizable ? placeCell(cell.column, resizable) : void 0,
+          className: cn(
+            alignText[cell.column.columnDef.meta?.align ?? "start"],
+            compact && "py-1.5",
+            pinClass(cell.column),
+            resizable && "truncate"
+          ),
+          children: tree && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel, collapseLabel, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
+        },
+        cell.id
+      ))
+    }
+  );
+}
+const sameRow = (a, b) => Object.keys(a).every((k) => k === "row" || a[k] === b[k]) && a.row.id === b.row.id && a.row.original === b.row.original && a.row.index === b.row.index && a.row.depth === b.row.depth;
+const RowView = React.memo(RowViewImpl, sameRow);
 const apply = (u, prev) => typeof u === "function" ? u(prev) : u;
 const columnLabel = (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id;
 function DataTable({
@@ -164,7 +224,15 @@ function DataTable({
   maxHeight,
   grid = false,
   rowWindow,
-  pagination,
+  pagination: paginationProp,
+  sort,
+  onSortChange,
+  manualSort = false,
+  page,
+  pageSize: pageSizeProp,
+  onPageChange,
+  manualPagination = false,
+  rowCount,
   getSubRows,
   expanded: expandedProp,
   defaultExpanded,
@@ -182,7 +250,11 @@ function DataTable({
 }) {
   const messages = useNexubMessages();
   const { locale, dir } = useLocale();
-  const [sorting, setSorting] = React.useState([]);
+  const [sorting = [], setSorting] = useControllableState({
+    value: sort,
+    defaultValue: [],
+    onChange: onSortChange
+  });
   const [rowSelection = {}, setRowSelection] = useControllableState({
     value: rowSelectionProp,
     defaultValue: {},
@@ -222,10 +294,14 @@ function DataTable({
   const tableRef = React.useRef(null);
   const gridNav = React.useMemo(() => createGridNavigation(dir), [dir]);
   const dragged = React.useRef(null);
-  const [paginationState, setPaginationState] = React.useState({
-    pageIndex: 0,
-    pageSize: pagination?.pageSize ?? 20
+  const pagination = !!paginationProp || page !== void 0 || pageSizeProp !== void 0 || manualPagination;
+  const [pageIndex = 0, setPageIndex] = useControllableState({
+    value: page,
+    defaultValue: 0,
+    onChange: onPageChange
   });
+  const pageSize = pageSizeProp ?? paginationProp?.pageSize ?? 20;
+  const paginationState = React.useMemo(() => ({ pageIndex, pageSize }), [pageIndex, pageSize]);
   const withSelectColumn = enableRowSelection && selectionColumn;
   const reorderRows = Boolean(onRowOrderChange) && sorting.length === 0;
   const rowReorder = useReorder({
@@ -312,7 +388,8 @@ function DataTable({
     columns: allColumns,
     state: tableState,
     getRowId,
-    onSortingChange: enableSorting ? setSorting : void 0,
+    onSortingChange: enableSorting ? (u) => setSorting(apply(u, sorting)) : void 0,
+    manualSorting: manualSort,
     onRowSelectionChange: enableRowSelection ? (u) => setRowSelection(apply(u, rowSelection)) : void 0,
     onColumnVisibilityChange: (u) => setColumnVisibility(apply(u, columnVisibility)),
     onColumnSizingChange: (u) => setColumnSizing(apply(u, columnSizing)),
@@ -321,11 +398,15 @@ function DataTable({
     enableColumnResizing,
     columnResizeMode: "onChange",
     columnResizeDirection: dir,
-    onPaginationChange: pagination ? setPaginationState : void 0,
+    onPaginationChange: pagination ? (u) => {
+      const next = apply(u, paginationState).pageIndex;
+      if (next !== pageIndex) setPageIndex(next);
+    } : void 0,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
+    getSortedRowModel: enableSorting && !manualSort ? getSortedRowModel() : void 0,
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    getPaginationRowModel: pagination && !manualPagination ? getPaginationRowModel() : void 0,
+    rowCount,
     getSubRows,
     getExpandedRowModel: getSubRows ? getExpandedRowModel() : void 0,
     onExpandedChange: getSubRows ? (u) => setExpanded(apply(u, expanded)) : void 0,
@@ -333,7 +414,7 @@ function DataTable({
     // (TanStack then expands inside the page model; without pages it must not).
     paginateExpandedRows: !pagination,
     enableRowSelection,
-    manualPagination: false
+    manualPagination
   });
   const compact = density === "compact";
   const selectedRows = enableRowSelection ? table.getSelectedRowModel().rows : [];
@@ -354,24 +435,11 @@ function DataTable({
     if (scroller) scroller.style.maxHeight = maxHeight == null ? "" : px(maxHeight);
     if (grid) gridNav.sync(t);
   });
-  const placeCell = (column) => (el) => {
-    if (!el) return;
-    el.style.width = enableColumnResizing ? px(column.getSize()) : "";
-    const side = column.getIsPinned();
-    el.style.insetInlineStart = side === "left" ? px(column.getStart("left")) : "";
-    el.style.insetInlineEnd = side === "right" ? px(column.getAfter("right")) : "";
-  };
-  const pinClass = (column) => {
-    const side = column.getIsPinned();
-    if (!side) return void 0;
-    return cn(
-      "sticky z-[1] bg-[var(--color-surface)]",
-      "[tr:hover>&]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,var(--color-surface))]",
-      "[tr[data-state=selected]>&]:bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-surface))]",
-      side === "left" && column.getIsLastColumn("left") && "border-e border-[var(--color-outline-variant)]",
-      side === "right" && column.getIsFirstColumn("right") && "border-s border-[var(--color-outline-variant)]"
-    );
-  };
+  const visibleColumns = table.getVisibleLeafColumns();
+  const viewButton = /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
+    /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
+    messages.view
+  ] });
   const moveColumn = (id, to) => {
     const ids = table.getAllLeafColumns().map((c) => c.id);
     const order = (columnOrder.length ? columnOrder : ids).filter((c) => c !== "__select" && ids.includes(c));
@@ -390,31 +458,21 @@ function DataTable({
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-density": density, ...props, children: [
     (toolbar != null || viewOptions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       toolbar,
-      viewOptions && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
-          /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
-          messages.view
-        ] }) }),
-        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.density }),
-          /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value: density, onValueChange: (v) => setDensity(v), children: [
-            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "comfortable", children: messages.comfortable }),
-            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "compact", children: messages.compact })
-          ] }),
-          /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.columns }),
-          table.getAllLeafColumns().filter((c) => c.getCanHide()).map((c) => /* @__PURE__ */ jsx(
-            DropdownMenu.CheckboxItem,
-            {
-              checked: c.getIsVisible(),
-              onCheckedChange: (v) => c.toggleVisibility(v === true),
-              onSelect: (e) => e.preventDefault(),
-              children: columnLabel(c)
-            },
-            c.id
-          ))
-        ] })
-      ] })
+      viewOptions && // The plain button stands in (same size, no layout shift) until the menu loads.
+      /* @__PURE__ */ jsx(React.Suspense, { fallback: viewButton, children: /* @__PURE__ */ jsx(
+        ViewOptions,
+        {
+          trigger: viewButton,
+          density,
+          onDensityChange: setDensity,
+          columns: table.getAllLeafColumns().filter((c) => c.getCanHide()).map((c) => ({
+            id: c.id,
+            label: columnLabel(c),
+            visible: c.getIsVisible(),
+            toggle: (v) => c.toggleVisibility(v)
+          }))
+        }
+      ) })
     ] }),
     offerAll && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] px-4 py-2 text-body-sm", children: table.getIsAllRowsSelected() ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { children: messages.selectedCount(fmt(totalRows)) }),
@@ -447,7 +505,7 @@ function DataTable({
             return /* @__PURE__ */ jsxs(
               TableHead,
               {
-                ref: placeCell(col),
+                ref: placeCell(col, enableColumnResizing),
                 className: cn(
                   alignText[align],
                   compact && "h-8",
@@ -532,32 +590,29 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination?.pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination ? pageSize : 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
             rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
             rowWin.indexes.map((i) => {
               const row = rows[i];
               return /* @__PURE__ */ jsx(
-                TableRow,
+                RowView,
                 {
-                  ref: rowWin.measure,
-                  "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,
-                    {
-                      ref: pinned || enableColumnResizing ? placeCell(cell.column) : void 0,
-                      className: cn(
-                        alignText[cell.column.columnDef.meta?.align ?? "start"],
-                        compact && "py-1.5",
-                        pinClass(cell.column),
-                        enableColumnResizing && "truncate"
-                      ),
-                      children: getSubRows && cell === cells.find((c) => c.column.id !== "__select") ? /* @__PURE__ */ jsx(TreeCell, { row, expandLabel: messages.expandRow, collapseLabel: messages.collapseRow, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) : flexRender(cell.column.columnDef.cell, cell.getContext())
-                    },
-                    cell.id
-                  ))
+                  row,
+                  index: i,
+                  selected: enableRowSelection && row.getIsSelected(),
+                  expanded: !!getSubRows && row.getIsExpanded(),
+                  columns: visibleColumns,
+                  columnSizing,
+                  compact,
+                  pinned,
+                  resizable: enableColumnResizing,
+                  selectable: enableRowSelection,
+                  tree: !!getSubRows,
+                  virtual: rowWin.virtual,
+                  measure: rowWin.measure,
+                  expandLabel: messages.expandRow,
+                  collapseLabel: messages.collapseRow,
+                  dragProps: reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : void 0
                 },
                 row.id
               );

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DataTableDensity } from './DataTable.js';
+export interface ViewOptionsProps {
+    trigger: React.ReactElement;
+    density: DataTableDensity;
+    onDensityChange: (density: DataTableDensity) => void;
+    /** Hideable columns. */
+    columns: {
+        id: string;
+        label: string;
+        visible: boolean;
+        toggle: (visible: boolean) => void;
+    }[];
+}
+export declare function ViewOptions({ trigger, density, onDensityChange, columns }: ViewOptionsProps): React.JSX.Element;

package/dist/components/DataTable/ViewOptions.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+function ViewOptions({ trigger, density, onDensityChange, columns }) {
+  const messages = useNexubMessages();
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.density }),
+      /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value: density, onValueChange: (v) => onDensityChange(v), children: [
+        /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "comfortable", children: messages.comfortable }),
+        /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "compact", children: messages.compact })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.columns }),
+      columns.map((c) => /* @__PURE__ */ jsx(
+        DropdownMenu.CheckboxItem,
+        {
+          checked: c.visible,
+          onCheckedChange: (v) => c.toggle(v === true),
+          onSelect: (e) => e.preventDefault(),
+          children: c.label
+        },
+        c.id
+      ))
+    ] })
+  ] });
+}
+export {
+  ViewOptions
+};

package/dist/components/DataTableVirtual/DataTableVirtual.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type DataTableProps } from '../DataTable/DataTable.js';
-export interface DataTableVirtualProps<TData> extends Omit<DataTableProps<TData>, 'pagination' | 'rowWindow'> {
+export interface DataTableVirtualProps<TData> extends Omit<DataTableProps<TData>, 'pagination' | 'rowWindow' | 'page' | 'pageSize' | 'onPageChange' | 'manualPagination' | 'rowCount'> {
     /** Height of the scrolling area. Required: rows are windowed within it. */
     maxHeight: number | string;
     /** Row height before measuring, in px. Default 49, or 37 when compact. */

package/dist/components/FilterBuilder/FilterBuilder.js

@@ -12,6 +12,7 @@ import {
 } from "@nexub/core";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Button } from "../Button/Button.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -24,14 +25,20 @@ function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange,
     defaultValue: defaultValue ?? emptyFilter(),
     onChange: onValueChange
   });
+  const latest = React.useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    latest.current = value;
+  });
+  const update = React.useCallback((fn) => setValue(fn(latest.current)), [setValue]);
+  const deferred = React.useDeferredValue(value);
   return /* @__PURE__ */ jsx(
-    GroupView,
+    MemoGroupView,
     {
-      group: value,
+      group: deferred,
       fields,
       depth: 0,
       maxDepth,
-      onChange: setValue,
+      onChange: update,
       className
     }
   );
@@ -40,7 +47,7 @@ FilterBuilder.displayName = "FilterBuilder";
 function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, className }) {
   const t = useNexubMessages();
   const first = fields[0];
-  const setRules = (rules) => onChange({ ...group, rules });
+  const setRules = (fn) => onChange((g) => ({ ...g, rules: fn(g.rules) }));
   const newRule = () => newFilterRule(first);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -60,7 +67,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
               size: "sm",
               "aria-label": t.filterGroup(group.combinator),
               value: group.combinator,
-              onValueChange: (v) => v && onChange({ ...group, combinator: v }),
+              onValueChange: (v) => v && onChange((g) => ({ ...g, combinator: v })),
               children: [
                 /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "and", children: t.matchAll }),
                 /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "or", children: t.matchAny })
@@ -69,13 +76,13 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
           ),
           onRemove && /* @__PURE__ */ jsx(IconButton, { label: t.removeGroup, variant: "ghost", size: "sm", className: "ms-auto", onClick: onRemove, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
         ] }),
-        group.rules.map((r, i) => {
-          const replace = (next) => setRules(group.rules.map((x, j) => j === i ? next : x));
-          const remove = () => setRules(group.rules.filter((_, j) => j !== i));
+        group.rules.map((r) => {
+          const replace = (fn) => setRules((rules) => rules.map((x) => x.id === r.id ? fn(x) : x));
+          const remove = () => setRules((rules) => rules.filter((x) => x.id !== r.id));
           return isFilterGroup(r) ? /* @__PURE__ */ jsx(GroupView, { group: r, fields, depth: depth + 1, maxDepth, onChange: replace, onRemove: remove }, r.id) : /* @__PURE__ */ jsx(RuleRow, { rule: r, fields, onChange: replace, onRemove: remove }, r.id);
         }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules([...group.rules, newRule()]), disabled: !first, children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules((rules) => [...rules, newRule()]), disabled: !first, children: [
             /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
             t.addFilter
           ] }),
@@ -84,7 +91,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
             {
               variant: "ghost",
               size: "sm",
-              onClick: () => setRules([...group.rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
+              onClick: () => setRules((rules) => [...rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
               disabled: !first,
               children: [
                 /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
@@ -97,6 +104,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
     }
   );
 }
+const MemoGroupView = React.memo(GroupView);
 function RuleRow({
   rule,
   fields,
@@ -104,6 +112,12 @@ function RuleRow({
   onRemove
 }) {
   const t = useNexubMessages();
+  const [draft, setDraft] = React.useState(rule.value);
+  const [seen, setSeen] = React.useState(rule.value);
+  if (rule.value !== seen) {
+    setSeen(rule.value);
+    setDraft(rule.value);
+  }
   const field = fields.find((f) => f.id === rule.field) ?? fields[0];
   const ops = filterOperators[field?.type ?? "text"];
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
@@ -114,7 +128,7 @@ function RuleRow({
         onValueChange: (id) => {
           const f = fields.find((x) => x.id === id);
           const nextOps = filterOperators[f?.type ?? "text"];
-          onChange({ ...rule, field: id, operator: nextOps.includes(rule.operator) ? rule.operator : nextOps[0], value: "" });
+          onChange((r) => ({ ...r, field: id, operator: nextOps.includes(r.operator) ? r.operator : nextOps[0], value: "" }));
         },
         children: [
           /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterField, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
@@ -122,11 +136,11 @@ function RuleRow({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Select.Root, { value: rule.operator, onValueChange: (op) => onChange({ ...rule, operator: op }), children: [
+    /* @__PURE__ */ jsxs(Select.Root, { value: rule.operator, onValueChange: (op) => onChange((r) => ({ ...r, operator: op })), children: [
       /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterOperator, className: "w-auto min-w-32", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
       /* @__PURE__ */ jsx(Select.Content, { children: ops.map((op) => /* @__PURE__ */ jsx(Select.Item, { value: op, children: t.filterOperators[op] }, op)) })
     ] }),
-    rule.operator !== "isEmpty" && (field?.type === "select" ? /* @__PURE__ */ jsxs(Select.Root, { value: rule.value || void 0, onValueChange: (v) => onChange({ ...rule, value: v }), children: [
+    rule.operator !== "isEmpty" && (field?.type === "select" ? /* @__PURE__ */ jsxs(Select.Root, { value: rule.value || void 0, onValueChange: (v) => onChange((r) => ({ ...r, value: v })), children: [
       /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterValue, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
       /* @__PURE__ */ jsx(Select.Content, { children: field.options?.map((o) => /* @__PURE__ */ jsx(Select.Item, { value: o.value, children: o.label }, o.value)) })
     ] }) : /* @__PURE__ */ jsx(
@@ -134,8 +148,12 @@ function RuleRow({
       {
         "aria-label": t.filterValue,
         type: field?.type === "number" ? "number" : field?.type === "date" ? "date" : "text",
-        value: rule.value,
-        onChange: (e) => onChange({ ...rule, value: e.target.value }),
+        value: draft,
+        onChange: (e) => {
+          const v = e.target.value;
+          setDraft(v);
+          onChange((r) => ({ ...r, value: v }));
+        },
         wrapperClassName: "w-auto min-w-36 flex-1"
       }
     )),

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

@@ -14,7 +14,7 @@ export interface KanbanProps<T> {
     className?: string;
 }
 /**
- * Columns of cards people can move: drag a card, or focus its handle and press
+ * Columns of cards people can move: drag a card's handle (Escape cancels), or focus it 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/Sortable/Sortable.d.ts

@@ -12,7 +12,7 @@ export interface SortableProps<T> {
     className?: string;
 }
 /**
- * A list people can reorder: drag an item, or focus its handle and press
- * Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
+ * A list people can reorder: drag an item's handle (mouse, pen or touch; Escape
+ * cancels), or focus the 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/reorder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-/** Internal: lists of items, moved by drag (native) or Alt+Arrow on a handle. */
+/** Internal: lists of items, moved by dragging a handle (Pointer Events) or Alt+Arrow on it. */
 export type Pos = [list: number, index: number];
 export declare function moveItem<T>(lists: T[][], [fc, fi]: Pos, [tc, ti]: Pos): T[][];
 interface ReorderOptions<T> {
@@ -10,18 +10,17 @@ interface ReorderOptions<T> {
     listLabels?: string[];
     onMove: (next: T[][]) => void;
 }
-/** Shared engine: drag state, keyboard moves, focus after a move, announcements. */
+type ItemProps = {
+    'data-nx-reorder-item': '';
+    'data-nx-dragging'?: '';
+    'data-nx-drop'?: 'before' | 'after';
+};
+/** Shared engine: pointer drag, keyboard moves, focus after a move, FLIP settle, 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;
-    };
+    itemProps: (pos: Pos) => ItemProps;
     listProps: (list: number) => {
-        onDragOver: (e: React.DragEvent) => void;
-        onDrop: (e: React.DragEvent) => void;
+        ref: (el: HTMLElement | null) => void;
+        'data-nx-drop': string | undefined;
     };
     handle: (pos: Pos, className?: string) => React.JSX.Element;
     live: React.JSX.Element;