gridsmith-ui 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -1,6 +1,46 @@
 # gridsmith-ui changelog
 
-## Unreleased (0.30.0)
+## Unreleased (0.30.1)
+
+**Added.**
+- **VirtualizedList's name.** `aria-label` names the list for the Tab stop it becomes while it scrolls with nothing in it to Tab to ("Activity log"; default "List").
+
+**Fixed.**
+- **The Sidebar's Collapse button keeps focus.** Pressing it by keyboard drew a new button each time, so focus fell to the page; it now stays on the button, which says what it will do next ("Expand sidebar").
+- **A button that turns itself off, or goes, hands focus on.** Pagination's Previous and Next at the first or last page, TransferList's move buttons once nothing is left to move, BulkActionBar's Clear selection and ChatMessageList's suggestions each left focus on the page. Focus now goes on: to the page now current, to the button that moves the other way, to the select-all box of the Table under the bar, to the message field; else to the nearest control still there.
+- **Focus never falls to the page when a whole list goes.** A row's menu action that empties its list, on a page that swaps the table for its empty state, left focus on the page, at once or after a server round trip. It now goes to what took the list's place, its first control, else its heading, else to the nearest container's.
+- **An overlay opened from one that closed as it opened gives focus back.** A preview dialog's "Edit details" that swaps the preview for an edit drawer left the drawer nothing to give focus back to. When the drawer closes, focus now goes to the preview's own opener, the card, once the overlay its opener sat in has closed.
+- **A StackedList or Table item the page takes away while its button has focus hands focus on.** An alert's Acknowledge that filters the alert out of the list left focus on the page. Focus now goes to the same button in the item before, else in the item after; with the list gone, to what took its place, else the section's heading. Focus the person had moved elsewhere stays there.
+- **A panel open from the start gives focus back as it closes.** A CornerPanel or AsidePanel open as the page loaded had no opener, so closing it by Escape left focus on the page. Focus now goes to the control that names it, its Launcher, else to the nearest control where the panel sat.
+- **An infinite list holds while its Load more has keyboard focus.** The list loaded more as the button came into view, which keyboard focus also does, so each load pushed the focused button off the screen again. While the button has keyboard focus the list waits for Enter, and after that load the button is brought back into view.
+- **A card moved from its menu keeps focus on its ⋯.** After a Move, focus went to the card itself. It now goes to the card's ⋯ in its new place, the button that opened the menu, as every menu gives focus back to its button; a refused move leaves it there too.
+- **The shell's phone menu is modal with the navbar in it, and is named.** Under the navbar it was marked modal but let Tab out to the page, and it had no name. While it's open the page behind is now inert, Tab cycles through the navbar and the menu, Escape closes it, and it's named "Menu". The stacked shell's menu, with no navbar above it, traps as before.
+- **A scroll area with nothing in it to Tab to is a Tab stop.** A Drawer's or Dialog's body of text, VirtualizedList, the shell's `<main>` on a page with no control, the Calendar's day headers on a phone, the chat's message list and the Table's phone list scrolled out of a keyboard's reach, since Safari makes no such area focusable by itself. Each is now a named Tab stop while it scrolls and holds nothing to Tab to, drawn with the inset ring SplitView's panes have. `<main>` keeps its landmark and stays the skip link's target, which draws no ring.
+- **The Dropdown's open list is named and in the keyboard's reach.** The list had no name, and no option was a Tab stop, so a list long enough to scroll was out of the keyboard's reach. It's now named by the field's label, its chosen option (else its first) is its one Tab stop, and a list that takes many choices says so. The arrows, Home and End move as before.
+- **A collapsed or mini sidebar's links are named, and the current page says so.** A collapsed link had no name, its label undrawn and its tooltip only a description; it's now named by its label, with the same one tooltip. SidebarNav's current item and BottomNav's current tab are marked `aria-current="page"`, not by their colour alone.
+- **TreeView's three-state checkbox is named** by its node's label.
+- **A chart's data rows no longer give its shapes their roles.** Charts drew each bar, slice, stage, track and point with its data row's own fields, so a row with a `role`, `aria-label` or `id` field (a chart of people by role) gave the shape that role. Each now draws from its own props.
+- **Escape asks before throwing away a half-typed tag.** TagInput makes typed text a tag on Enter, a comma or leaving the field, so the other ways out of an overlay asked; Escape closed a Drawer or Dialog with the text lost when the page's `dirty` counted only committed tags. Text a control holds but hasn't committed now always makes the overlay ask, whatever the page's `dirty` says.
+- **SplitView's phone Back works without `onDetailClose`.** A page that passed `detailOpen` but no `onDetailClose` drew a Back on phones that did nothing, leaving the person stranded away from the list. Without the handler the view now shows the list itself, and a press in the list brings the detail back; a development warning names the missing handler. On a phone, the detail giving way to the list leaves focus on the list's chosen item.
+- **A control at the foot of a page shows its whole outline.** The shell's `<main>` keeps the outline's reach at its foot as scroll padding, so a control Tab reaches across the bottom edge comes into view with its outline, the page's last control included. A Checkbox's input now covers its box, so Tab brings the box into view, outline and all; its 1 px hidden input had let the outline be cut by up to 16 px.
+- **A minimal sidebar under a floating navbar keeps room for its first link's outline,** which dropping its top inset had cut by 4 px.
+- **Icon buttons that had no tooltip show the library's one tooltip, their name:** the Drawer's and Dialog's close, Pagination's Previous and Next, a Dropdown's chosen-option remove, the date, date-range and time pickers' buttons, Card's More actions, the Table's row toggle, Tag's remove and the Carousel's arrows. RichTextEditor's toolbar buttons are named by their words and show the same tooltip in place of the browser's title, and its toggles say whether they're on (`aria-pressed`).
+- **A timeline's "Previous period" is unavailable at its start, and "Next period" at its end,** drawn as Zoom's buttons are at their limits. Each had done nothing there.
+- **A Table column of elements sorts only where it can.** Sorted by the Table, a column marked `sortable` whose cells are elements with no `sortValue` drew a sort button that sorted nothing; it now draws none, and a development warning says why. Sorted by the page (`sortKey` with `onSortChange`), the header shows the page's sort whatever its cells are; it had never marked a column of elements as sorted.
+
+### Upgrade note for agents (0.30.0 → 0.30.1)
+
+`^0.30.0` covers 0.30.1, so `npm update gridsmith-ui` brings it in. Nothing in an app's code changes, and the theme's tokens need no regenerating. What to check:
+- **The Tab order.** A scroll area with nothing in it to Tab to is now a Tab stop while it scrolls: a Drawer's or Dialog's body of text, VirtualizedList, the shell's `<main>` on a page with no control, the Calendar's day headers on a phone, the chat's message list and the Table's phone list. The Dropdown's open list has one Tab stop, its chosen option. A test that counts Tab presses through such a page counts one more.
+- **Where focus goes.** After a Kanban card's Move it's on the card's ⋯, not the card; after BulkActionBar's Clear selection, on the Table's select-all box. A test that expected focus on the page after a list emptied, or after an overlay with no opener closed, now finds it on a heading or a control.
+- **A test that finds an editor toolbar button by its title.** RichTextEditor's toolbar buttons carry no `title`, their tooltip showing the words: find them by role and name (`getByRole('button', { name: 'Bold (Ctrl+B)' })`).
+- **The shell's phone menu** is no longer `aria-modal`. While it's open, the page behind it is `inert`, so a test that reaches the page's controls with the menu open finds them inert.
+- **A Table column marked `sortable` whose cells are elements** draws no sort button when the Table sorts the rows: give it a `sortValue`, or sort the rows in the page with `sortKey` and `onSortChange`, and then the header shows that sort.
+- **A Drawer or Dialog holding a TagInput** asks before Escape closes it while text is typed that isn't yet a tag.
+- **SplitView with `detailOpen` and no `onDetailClose`** shows the list on a phone's Back, and says so in development. A page that closes its detail itself passes `onDetailClose`, as before.
+- **VirtualizedList** takes `aria-label`, its name as a Tab stop.
+
+## 0.30.0 — 15 October 2026
 
 **Added.**
 - **Days a picker can't choose, beyond `min` and `max`.** DatePicker and DateRangePicker take `disabledDates`: a function of the day, or weekdays as a shorthand (`[0, 6]` for weekends; the `DisabledDates` type). An excluded day can't be chosen by a click, the keyboard or typing, a range's ends are never excluded days though the range may span them, and DatePicker's Today is unavailable when today can't be chosen.

package/dist/charts.js

@@ -1,12 +1,12 @@
 "use client";
-import { TITLE_TEXT, Skeleton } from './chunk-INGF2CPW.js';
+import { TITLE_TEXT, Skeleton } from './chunk-6C2IUMY7.js';
 import { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
 import { formatLocale } from './chunk-7QLXYRPD.js';
 import { elementType } from './chunk-NKUCS67T.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { cn, GLASS_SURFACE } from './chunk-JTU7OBYJ.js';
+import { cn, GLASS_SURFACE } from './chunk-YL5KD5RC.js';
 import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
-import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, getNiceTickValues, Rectangle } from 'recharts';
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, Symbols, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, getNiceTickValues, Rectangle } from 'recharts';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -604,6 +604,14 @@ function seriesValues(data, keys, stacked = false) {
 var hasLabel = (label) => label != null && label !== "" && typeof label !== "number";
 var entryName = (entry, label) => !hasLabel(label) && typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
 var entryValue = (entry, format, locale) => typeof entry.value === "number" ? format ? format(entry.value, entry.dataKey) : entry.value.toLocaleString(locale) : entry.value;
+var DRAWING = /* @__PURE__ */ new Set(["x", "y", "cx", "cy", "width", "height", "r", "radius", "innerRadius", "outerRadius", "startAngle", "endAngle", "cornerRadius", "upperWidth", "lowerWidth", "size", "fill", "stroke", "strokeWidth", "opacity", "fillOpacity", "strokeOpacity", "className"]);
+function withoutRowFields(props) {
+  const row = props.payload;
+  if (!row || typeof row !== "object") return props;
+  const own = {};
+  for (const [key, value] of Object.entries(props)) if (DRAWING.has(key) || !(key in row)) own[key] = value;
+  return own;
+}
 function tooltipAnnouncement(label, payload, format, locale = formatLocale()) {
   if (!payload?.length) return "";
   const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry, format, locale)}`).join(", ");
@@ -867,7 +875,7 @@ function barShape(bars, index, stacked, radius, horizontal = false) {
       const value = Number(row[b.dataKey]);
       return !(down ? value < 0 : value > 0);
     });
-    return /* @__PURE__ */ jsx(Rectangle, { ...props, radius: onTop ? round : square });
+    return /* @__PURE__ */ jsx(Rectangle, { ...withoutRowFields(props), radius: onTop ? round : square });
   };
   return Shape;
 }
@@ -1209,12 +1217,13 @@ var PieChart = markChart(forwardRef(function PieChart2({
   const colors = useChartColors(data.length, false);
   const isAnimated = useChartAnimation(animated);
   const renderLabel = showLabels ? ({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%` : false;
+  const chartData = data.map((d) => ({ name: d.name, value: d.value }));
   if (!data?.length) return null;
   return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "pie", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart$1, { accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(
       Pie,
       {
-        data,
+        data: chartData,
         dataKey: "value",
         nameKey: "name",
         cx: "50%",
@@ -1498,7 +1507,8 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
                 name: series.name,
                 data: series.points,
                 fill: colors[i],
-                isAnimationActive: isAnimated
+                isAnimationActive: isAnimated,
+                shape: (p) => /* @__PURE__ */ jsx(Symbols, { ...withoutRowFields(p), type: "circle" })
               },
               series.name
             ))
@@ -1580,7 +1590,9 @@ var RadialBarChart = markChart(forwardRef(function RadialBarChart2({
   const colors = useChartColors(data.length, false);
   const isAnimated = useChartAnimation(animated);
   const chartData = data.map((d, i) => ({
-    ...d,
+    name: d.name,
+    value: d.value,
+    ...d.max !== void 0 ? { max: d.max } : {},
     fill: colors[i % colors.length]
   }));
   if (!data?.length) return null;
@@ -1624,7 +1636,8 @@ var FunnelChart = markChart(forwardRef(function FunnelChart2({
   const colors = useChartColors(data.length, false);
   const isAnimated = useChartAnimation(animated);
   const chartData = data.map((d, i) => ({
-    ...d,
+    name: d.name,
+    value: d.value,
     fill: colors[i % colors.length]
   }));
   if (!data?.length) return null;