@nexub/react 5.6.0 → 5.8.0

package/accessibility.json

@@ -1,10 +1,10 @@
 {
-  "version": "5.6.0",
+  "version": "5.8.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 on every pull request; a new violation fails the build.",
+    "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.",
     "contrast": "Every colour role pair is tested for 4.5:1 (text) and 3:1 (non-text) at standard, medium and high contrast in light and dark.",
-    "manual": "Keyboard behaviour and screen-reader output are documented per component; recorded VoiceOver, NVDA and TalkBack sessions are not published yet."
+    "manual": "Keyboard behaviour and screen-reader output are documented per component, with step-by-step VoiceOver and NVDA scripts for the complex ones (/foundations/accessibility#screen-reader-scripts); recorded sessions are not published yet."
   },
   "exceptions": [
     {
@@ -310,8 +310,19 @@
       "package": "@nexub/react",
       "automated": "pass",
       "exceptions": [],
-      "keyboard": [],
-      "screenReader": []
+      "keyboard": [
+        "Tab: Without `grid`: every control in the table is a tab stop. With `grid`: the table is one tab stop and remembers the last cell.",
+        "Arrow keys: With `grid`: move between cells, and between the controls inside a cell. Mirrored in RTL.",
+        "Home / End: With `grid`: first or last cell in the row. Ctrl+Home / Ctrl+End: first or last cell in the grid.",
+        "Space: Toggles a focused row checkbox.",
+        "Alt+Arrow: Moves a focused header when `enableColumnReordering` is on."
+      ],
+      "screenReader": [
+        "Name the table with `caption` (or `aria-label`); `captionHidden` keeps it for screen readers only.",
+        "Sorting, selection counts and column moves are announced from a polite live region.",
+        "DataTableVirtual sets aria-rowcount and aria-rowindex so readers report the full row count.",
+        "With `grid`, focus goes to a cell’s first control, or to the cell itself when it has none."
+      ]
     },
     {
       "slug": "date-picker",

package/dist/components/CommandPalette/CommandPalette.js

@@ -9,6 +9,7 @@ import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { overlaySurface, scrim } from "../../utils/surface.js";
 import { useClassScrollLock } from "../../hooks/useClassScrollLock.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
+import { useMergedRefs } from "../../hooks/useMergedRefs.js";
 const overlayClasses = cn("fixed inset-0 z-[var(--z-modal)] nx-motion", scrim);
 function ClassLockOverlay() {
   useClassScrollLock();
@@ -136,7 +137,7 @@ Item.displayName = "CommandPalette.Item";
 const Separator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command.Separator,
   {
-    ref,
+    ref: useMergedRefs(ref, (el) => el?.setAttribute("role", "none")),
     className: cn("-mx-1 my-1 h-px bg-[var(--color-outline-variant)]", className),
     ...props
   }

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

@@ -64,10 +64,15 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     onColumnPinningChange?: (pinning: ColumnPinningState) => void;
     /** Cap the table's height. Rows scroll and the header stays in view. */
     maxHeight?: number | string;
+    /**
+     * ARIA grid keyboard model for tables whose cells hold actions: the table is
+     * one tab stop, and Arrow keys, Home/End and Ctrl+Home/End move between cells.
+     */
+    grid?: boolean;
     /** Rows to render; set by DataTableVirtual. */
     rowWindow?: DataTableRowWindowHook;
     pagination?: {
         pageSize?: number;
     };
 }
-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, rowWindow, pagination, 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, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -20,6 +20,7 @@ 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";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -130,6 +131,7 @@ function DataTable({
   columnPinning: columnPinningProp,
   onColumnPinningChange,
   maxHeight,
+  grid = false,
   rowWindow,
   pagination,
   caption,
@@ -174,6 +176,7 @@ function DataTable({
   });
   const [announcement, setAnnouncement] = React.useState("");
   const tableRef = React.useRef(null);
+  const gridNav = React.useMemo(() => createGridNavigation(dir), [dir]);
   const dragged = React.useRef(null);
   const [paginationState, setPaginationState] = React.useState({
     pageIndex: 0,
@@ -274,6 +277,7 @@ function DataTable({
     t.style.width = enableColumnResizing ? px(table.getTotalSize()) : "";
     const scroller = t.parentElement;
     if (scroller) scroller.style.maxHeight = maxHeight == null ? "" : px(maxHeight);
+    if (grid) gridNav.sync(t);
   });
   const placeCell = (column) => (el) => {
     if (!el) return;
@@ -352,6 +356,9 @@ function DataTable({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-rowcount": rowWin.virtual ? rows.length + 1 : void 0,
+        role: grid ? "grid" : void 0,
+        onKeyDown: grid ? gridNav.onKeyDown : void 0,
+        onFocus: grid ? gridNav.onFocus : void 0,
         className: cn(enableColumnResizing && "table-fixed"),
         children: [
           caption != null && /* @__PURE__ */ jsx(Table.Caption, { className: cn(captionHidden && "sr-only"), children: caption }),

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

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+/**
+ * ARIA grid keyboard model (WAI-ARIA APG "Data Grid"): one tab stop for the
+ * whole table; Arrow keys move between cells (and the controls inside them),
+ * Home/End to the row's ends, Ctrl+Home/End to the grid's corners.
+ */
+export declare function createGridNavigation(dir: 'ltr' | 'rtl'): {
+    sync: (table: HTMLTableElement | null) => void;
+    onFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+};

package/dist/components/DataTable/gridNavigation.js

@@ -0,0 +1,52 @@
+const FOCUSABLE = "a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[role=separator]";
+const TEXT_INPUT = /^(text|search|email|number|tel|url|password|date)$/;
+function stopsByRow(table) {
+  return Array.from(table.rows).filter((r) => !r.hasAttribute("aria-hidden")).map(
+    (r) => Array.from(r.cells).flatMap((cell) => {
+      const inner = Array.from(cell.querySelectorAll(FOCUSABLE));
+      return inner.length ? inner : [cell];
+    })
+  );
+}
+const cellIndex = (el) => el.closest("td,th").cellIndex;
+function createGridNavigation(dir) {
+  let active = null;
+  const sync = (table) => {
+    if (!table) return;
+    const stops = stopsByRow(table).flat();
+    if (!active || !stops.includes(active)) active = stops[0] ?? null;
+    for (const s of stops) s.tabIndex = s === active ? 0 : -1;
+  };
+  const onFocus = (e) => {
+    active = e.target;
+    sync(e.currentTarget);
+  };
+  const onKeyDown = (e) => {
+    if (e.defaultPrevented || e.altKey) return;
+    const target = e.target;
+    const typing = target.matches("textarea,select,[contenteditable=true]") || target instanceof HTMLInputElement && TEXT_INPUT.test(target.type);
+    if (typing && e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+    const rows = stopsByRow(e.currentTarget);
+    const r = rows.findIndex((row2) => row2.includes(target));
+    if (r < 0) return;
+    const row = rows[r];
+    const c = row.indexOf(target);
+    const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const back = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const sameColumn = (to) => to && (to.find((s) => cellIndex(s) >= cellIndex(target)) ?? to.at(-1));
+    let next;
+    if (e.key === forward) next = row[c + 1];
+    else if (e.key === back) next = row[c - 1];
+    else if (e.key === "ArrowDown") next = sameColumn(rows[r + 1]);
+    else if (e.key === "ArrowUp") next = sameColumn(rows[r - 1]);
+    else if (e.key === "Home") next = e.ctrlKey ? rows[0][0] : row[0];
+    else if (e.key === "End") next = e.ctrlKey ? rows.at(-1).at(-1) : row.at(-1);
+    else return;
+    e.preventDefault();
+    next?.focus();
+  };
+  return { sync, onFocus, onKeyDown };
+}
+export {
+  createGridNavigation
+};

package/dist/components/DatePicker/DatePicker.js

@@ -29,7 +29,7 @@ function useCalendarLocale(localeProp) {
   const locale = localeProp ?? dateLocale;
   const labels = React.useMemo(() => {
     const day = (date, modifiers, withSelected) => {
-      let label = format(date, "PPPP", locale ? { locale } : void 0);
+      let label = new Intl.DateTimeFormat(intlLocale, { dateStyle: "full" }).format(date);
       if (modifiers?.today) label = messages.todayDate(label);
       if (withSelected && modifiers?.selected) label = messages.selectedDate(label);
       return label;
@@ -41,7 +41,7 @@ function useCalendarLocale(localeProp) {
       labelDayButton: (date, modifiers) => day(date, modifiers, true),
       labelGridcell: (date, modifiers) => day(date, modifiers, false)
     };
-  }, [messages, locale]);
+  }, [messages, intlLocale]);
   return {
     dayPickerProps: { locale, dir, labels, components: { Chevron: CalendarChevron } },
     format: (date) => formatDate(date, intlLocale, locale)

package/dist/components/FilterBuilder/FilterBuilder.d.ts

@@ -1,36 +1,7 @@
 import * as React from 'react';
-import type { NexubMessages } from '@nexub/core';
-export type FilterFieldType = 'text' | 'number' | 'select' | 'date';
-export type FilterOperator = keyof NexubMessages['filterOperators'];
-export interface FilterField {
-    id: string;
-    label: string;
-    type: FilterFieldType;
-    /** Choices for `type: 'select'`. */
-    options?: {
-        value: string;
-        label: string;
-    }[];
-}
-export interface FilterRule {
-    id: string;
-    field: string;
-    operator: FilterOperator;
-    /** Always a string (dates as YYYY-MM-DD), so the query serialises as-is. */
-    value: string;
-}
-export interface FilterGroup {
-    id: string;
-    combinator: 'and' | 'or';
-    rules: Array<FilterRule | FilterGroup>;
-}
-/** Operators offered for each field type, in menu order. */
-export declare const filterOperators: Record<FilterFieldType, FilterOperator[]>;
-export declare const isFilterGroup: (r: FilterRule | FilterGroup) => r is FilterGroup;
-/** An empty top-level group, a starting `value`. */
-export declare const emptyFilter: () => FilterGroup;
-/** Rules with a field, operator and (unless "is empty") a value. Counts nested groups too. */
-export declare function countFilters(group: FilterGroup): number;
+import { countFilters, emptyFilter, filterOperators, isFilterGroup, type FilterField, type FilterFieldType, type FilterGroup, type FilterOperator, type FilterRule } from '@nexub/core';
+export type { FilterFieldType, FilterOperator, FilterField, FilterRule, FilterGroup };
+export { filterOperators, isFilterGroup, emptyFilter, countFilters };
 export interface FilterBuilderProps {
     fields: FilterField[];
     value?: FilterGroup;

package/dist/components/FilterBuilder/FilterBuilder.js

@@ -2,6 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Plus, X } from "@nexub/icons";
+import {
+  countFilters,
+  emptyFilter,
+  filterId as uid,
+  filterOperators,
+  isFilterGroup,
+  newFilterRule
+} from "@nexub/core";
 import { cn } from "../../utils/cn.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
@@ -10,22 +18,6 @@ import { IconButton } from "../IconButton/IconButton.js";
 import { Input } from "../Input/Input.js";
 import { Select } from "../Select/Select.js";
 import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
-const filterOperators = {
-  text: ["contains", "equals", "notEquals", "startsWith", "isEmpty"],
-  number: ["equals", "notEquals", "greaterThan", "lessThan"],
-  select: ["equals", "notEquals"],
-  date: ["equals", "before", "after"]
-};
-const isFilterGroup = (r) => "rules" in r;
-let seq = 0;
-const uid = () => `f${(++seq).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
-const emptyFilter = () => ({ id: uid(), combinator: "and", rules: [] });
-function countFilters(group) {
-  return group.rules.reduce(
-    (n, r) => n + (isFilterGroup(r) ? countFilters(r) : r.operator === "isEmpty" || r.value !== "" ? 1 : 0),
-    0
-  );
-}
 function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange, maxDepth = 1, className }) {
   const [value = emptyFilter(), setValue] = useControllableState({
     value: valueProp,
@@ -49,12 +41,7 @@ function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, classNa
   const t = useNexubMessages();
   const first = fields[0];
   const setRules = (rules) => onChange({ ...group, rules });
-  const newRule = () => ({
-    id: uid(),
-    field: first?.id ?? "",
-    operator: filterOperators[first?.type ?? "text"][0],
-    value: ""
-  });
+  const newRule = () => newFilterRule(first);
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/react",
-  "version": "5.6.0",
+  "version": "5.8.0",
   "description": "React component library for Nexub Design System — 90+ accessible, themeable UI components built on Radix UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -81,14 +81,14 @@
     "date-fns": "^4.4.0",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
-    "@nexub/core": "5.6.0",
-    "@nexub/icons": "5.6.0"
+    "@nexub/core": "5.8.0",
+    "@nexub/icons": "5.8.0"
   },
   "peerDependencies": {
     "react": ">=19 <20",
     "react-dom": ">=19 <20",
     "@tanstack/react-virtual": "^3.14.22",
-    "@nexub/tokens": "^5.6.0"
+    "@nexub/tokens": "^5.8.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-virtual": {
@@ -120,8 +120,8 @@
     "vaul": "1.1.2",
     "vite": "^8.3.5",
     "vitest": "^5.0.5",
-    "@nexub/themes": "5.6.0",
-    "@nexub/tokens": "5.6.0"
+    "@nexub/themes": "5.8.0",
+    "@nexub/tokens": "5.8.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && rm -f dist/vendor/*.d.ts && node scripts/check-dts.mjs && tailwindcss -i src/styles.css -o dist/styles.css --minify && cp -R ../themes/src/fonts dist/fonts",