@box-kite/react 2.2.4 → 2.2.6

package/BOX_KITE_AI_CONTEXT.md

@@ -1064,6 +1064,36 @@ Box.components({
 });
 ```
 
+`extends` is resolved over everything registered so far, chains included, so overriding the base later still reaches the component built on it.
+
+**A prop on the element wins in every theme.** `<Box component="card" bgColor="red-500">` replaces the card's `bgColor` and also its `theme.dark.bgColor` (at the same level: `hover.bgColor` replaces the themed hover). Everything else the card styles for dark stays. To keep a different dark value, write it: `theme={{ dark: { bgColor: 'red-900' } }}`.
+
+### Box.createComponents() — A Design for One Subtree
+
+`Box.components()` styles the whole app: every call merges into one registry, so two designs cannot share a page through it. `Box.createComponents()` takes the same shape and registers nothing. It returns a design, and `<Box.Components value>`, or `components` on `Box.Theme`, applies it to everything inside.
+
+```tsx
+const aurora = Box.createComponents({ button: { styles: { borderRadius: 999 } }, card: { styles: { p: 6 } } });
+const harbor = Box.createComponents({ button: { styles: { borderRadius: 0 } } }, { base: 'builtin' });
+
+<Box.Theme use="local" components={aurora}>   {/* light/dark + design in one wrapper */}
+  <Button>Pill</Button>
+</Box.Theme>
+<Box.Components value={harbor}>
+  <Button>Square</Button>
+</Box.Components>
+```
+
+- **`base`** is what the design is merged over:
+  - `'global'` (the default) is the app's own `Box.components()`, followed as it changes.
+  - `'builtin'` ignores the app's registrations.
+  - Another registry chains onto that design.
+- **Props still beat the design**, the way they beat `Box.components()`.
+- **A design is identified by its content**, so building one inline does not grow the cache. Module scope still reads best.
+- **`<Box.Components>` renders no element.** `value={undefined}` hands a subtree back to the app's design.
+- **A Server Component cannot read the provider.** A client component under it can.
+- **Types for two designs that both name a component**: `interface ComponentsTypes extends MergeComponentsAndVariants<[typeof aurora, typeof harbor]> {}` (from `@box-kite/core/types`). Extending two `ExtractComponentsAndVariants` that disagree on `button` is an interface conflict.
+
 ---
 
 ## Extension System
@@ -1891,6 +1921,170 @@ on something at the panel's edge needs, since the clip is permanent.
 
 ---
 
+## List (`components/list`)
+
+```tsx
+import List from '@box-kite/react/components/list';
+
+<List>
+  {people.map((person) => (
+    <List.Item key={person.id} chevron>
+      <List.Media variant="avatar">{person.initials}</List.Media>
+      <List.Content>
+        <List.Row>
+          <List.Title lines={1}>
+            <List.Action props={{ href: `/people/${person.id}` }}>{person.name}</List.Action>
+          </List.Title>
+          <List.Meta>{person.lastSeen}</List.Meta>
+        </List.Row>
+        <List.Description lines={2}>{person.bio}</List.Description>
+      </List.Content>
+    </List.Item>
+  ))}
+</List>;
+```
+
+A list of things to read and pick from — messages, orders, people, settings. **An item is a flex row of
+three slots**, and the content is a column of rows:
+
+| Part               | Element                        | What it is                                                                                                     |
+| ------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| `List`             | `<ul role="list">`             | `variant`: dividers by default, `plain`, `card` (one framed block), `separated` (a frame per item); `tag="ol"` |
+| `List.Item`        | `<li>`                         | A flex row. `size` `sm`/`md`/`lg` (44/56/72px), `wrap`, `selected` (a tint), `chevron`                         |
+| `List.Media`       | `<div>`                        | Leading: `variant` `icon` (a tinted square), `avatar` (a circle that clips), `image` (a thumbnail)             |
+| `List.Content`     | `<div>`                        | The middle, taking the room; a column                                                                          |
+| `List.Row`         | `<div>`                        | Parts side by side, the last at the end. `secondary` (smaller, muted), `wrap`                                  |
+| `List.Overline`    | `<span>`                       | A small line above the title. `lines`                                                                          |
+| `List.Title`       | `<span>`                       | The name, holding the `List.Action`. `lines` `1` (ellipsis), `2`/`3` (clamp); unset, it wraps                  |
+| `List.Description` | `<span>`                       | Muted supporting text. `lines`                                                                                 |
+| `List.Meta`        | `<span>`                       | A small value that never wraps: a time, a count                                                                |
+| `List.End`         | `<div>`                        | Trailing: a value over its label, aligned to the end in tabular figures                                        |
+| `List.Actions`     | `<div>`                        | Controls of the item's own, lifted above the action                                                            |
+| `List.Action`      | `<a>` / `<label>` / `<button>` | The primary action, covering the item: `href` → link, `htmlFor` → label, otherwise a button                    |
+| `List.Fields`      | `<dl>`                         | Labelled values, as many to a line as fit at 8rem                                                              |
+| `List.Field`       | `<div>` + `<dt>` + `<dd>`      | `label` and the value                                                                                          |
+| `List.Group`       | `<li>` + `<ul>`                | A section: `label`, `level` (makes the label a heading), `sticky`                                              |
+| `List.Chevron`     | `<span aria-hidden>`           | The chevron `chevron` draws, for an item something else renders                                                |
+
+**One action covers the item.** `List.Action`'s `::after` stretches over the whole `<li>`, so a press
+anywhere on the item is a press on it and the focus ring draws round the item — while its accessible
+name is the title alone, not every value in the row. A pick-list is a label: put the checkbox in
+`List.Actions` and give the action its `htmlFor`.
+
+```tsx
+<List.Item selected={picked}>
+  <List.Actions>
+    <Checkbox id="pick-ada" checked={picked} onChange={toggle} />
+  </List.Actions>
+  <List.Title>
+    <List.Action props={{ htmlFor: 'pick-ada' }}>Ada Lovelace</List.Action>
+  </List.Title>
+</List.Item>
+```
+
+Hover, pressed, current (`aria-current` on the action) and disabled are read off the action with
+`:has()`, so an item with no action is plain text and needs no prop to say so.
+
+**It renders on a server**: no hook, no context, no effect. That is why the list's look reaches its
+items as custom properties rather than through React — and they are yours to set with `vars`:
+
+| Variable               | Default               | What it is                                                    |
+| ---------------------- | --------------------- | ------------------------------------------------------------- |
+| `--list-divider`       | `currentColor` at 12% | The line between items; `plain` and `separated` make it clear |
+| `--list-divider-inset` | `0px`                 | Where the line starts — `4.5rem` lines it up with the text    |
+| `--list-item-frame`    | `none`                | The border round each item, which `separated` sets            |
+| `--list-item-radius`   | `0`                   | Each item's corners, which its tint follows                   |
+| `--list-sticky-top`    | `0`                   | How far down a sticky group label stops — an app's header     |
+
+**The style tree is paint only** — `list` (the three variants), `list.item` (the divider colour, the
+states, `selected`), `list.media`, `list.muted`, `list.action` (the focus ring) and `list.label` —
+because every engine entry carries it. The spacing is each part's default props, so a prop on the part
+beats it (`<List.Item py={1}>`) and `Box.components` cannot move it. The hairlines and tints are mixed
+from `currentColor`, so they follow any theme with no rule for it.
+
+It is a `<ul role="list">` — the role spelled out because Safari stops reporting a list whose items have
+lost their markers — and **not a composite widget**: each action is a tab stop, Enter follows or presses
+it, and the arrow keys stay the page's. Arrow-key selection among options is a listbox: `Combobox` or
+`Select`.
+
+### Swipe actions, reorder and a long list
+
+Three client-only entries on top of `List`, so `List` itself stays server-safe. Each item they draw is a
+`List.Item` in everything but name — same parts, same sizes, same `list.item` paint.
+
+```tsx
+import SwipeItem from '@box-kite/react/components/swipeItem';
+import SortableList from '@box-kite/react/components/sortableList';
+import VirtualList from '@box-kite/react/components/virtualList';
+
+<SwipeItem
+  fullSwipe
+  startActions={
+    <SwipeItem.Action variant="accent" onClick={pin}>
+      Pin
+    </SwipeItem.Action>
+  }
+  endActions={
+    <SwipeItem.Action variant="danger" onClick={remove}>
+      Delete
+    </SwipeItem.Action>
+  }
+>
+  <List.Content>…</List.Content>
+</SwipeItem>;
+
+<SortableList onOrderChange={(order) => setIds(order)} onOrderCommit={save}>
+  {ids.map((id) => (
+    <SortableList.Item key={id} value={id} label={names[id]}>
+      <List.Content>…</List.Content>
+      <SortableList.Handle />
+    </SortableList.Item>
+  ))}
+</SortableList>;
+
+<VirtualList items={messages} itemKey={(message) => message.id} onRangeChange={loadMore}>
+  {(message) => <List.Item>…</List.Item>}
+</VirtualList>;
+```
+
+| Component             | Props                                                                                                                                                                               |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SwipeItem`           | `startActions`, `endActions` (the first of each is outermost), `fullSwipe`, `open`/`defaultOpen`/`onOpenChange`, and `List.Item`'s `size`/`wrap`/`selected`/`chevron`               |
+| `SwipeItem.Action`    | A `<button>`: `variant` `accent`/`warning`/`danger` (unset is neutral), `icon`, `onClick`, `closeOnSelect` (default `true`)                                                         |
+| `SortableList`        | Everything `List` takes, `onOrderChange(order, { reason, value, from, to })`, `onOrderCommit` (the drop — the one to save)                                                          |
+| `SortableList.Item`   | Everything `List.Item` takes, `value` (required, unique), `label` (what the handle and announcements call it), `disabled`                                                           |
+| `SortableList.Handle` | The `<button>` a drag starts from; six dots unless given children; named "Move" + the item's `label`                                                                                |
+| `VirtualList`         | Everything `List` takes, `items`, `itemKey`, `children` (a function returning one `<li>`), `estimateSize` (57), `overscan` (6), `initialCount` (20), `onRangeChange`, `scrollerRef` |
+
+**`SwipeItem`'s row slides and a tray opens in the space it leaves** — nothing is under the row, so it
+needs no background. Past half open opens, short of it closes, a flick goes the way it was going, and
+`fullSwipe` carried most of the way across performs the outermost action (it clicks it, so its `onClick`
+is the one place the command lives). A press on an open item closes it instead of following the action.
+The actions are real buttons in the tab order and focus reaching one opens its tray; Escape closes it.
+A swipe is a path gesture (WCAG 2.5.1), so put the same commands somewhere a press reaches too.
+
+**`SortableList`: the app owns the order.** During a drag nothing is reordered — the item follows the
+pointer, its neighbours step aside as inline translates — and `onOrderChange` fires once, on the drop,
+which then glides into place (the Web Animations API, from where it was drawn). The keyboard is a grab,
+DashboardGrid's model: Enter/Space picks up, ArrowUp/ArrowDown/Home/End move (reporting each step),
+Enter drops, Escape puts back. A press on a handle that does not drag also picks the item up, and a
+press on another item then drops it there — the single-pointer way WCAG 2.5.7 asks for. Render the
+items in the order you hold; a refused move is just not applied.
+
+**`VirtualList` measures each item it draws** and keeps the height by `itemKey`, so mixed heights work;
+an undrawn item counts as the mean of those drawn (`estimateSize` before any is), and the list holds its
+height while it scrolls, since a scrollbar drag loses a move whenever it changes. The scroller is the nearest ancestor that scrolls, else the
+page; `scrollerRef` overrides. Each item gets `aria-setsize`/`aria-posinset`, the item focus is in
+stays rendered, and an item above the screen that turns out taller than estimated scrolls the list by
+the difference so nothing on screen moves. Groups and sticky labels need the whole list and do not
+window; find-in-page cannot see an unrendered item.
+
+Styling: `swipeItem.row`/`swipeItem.tray` (`dragging` variants), `swipeItem.action` (the three colour
+variants, `armed`), `sortableList.handle` (`grabbed`), and on `list.item` the `lifted` (dragged),
+`grabbed` (keyboard) and `settling` variants. `List.Chevron` is the item's chevron as a part.
+
+---
+
 ## Slider & Progress
 
 ```tsx
@@ -1995,6 +2189,94 @@ Box.components({
 
 ---
 
+## Dates and times (`@box-kite/react/date` + the date components)
+
+```tsx
+import { format, toUtc, toLocal, toZone, toPlainDate, parse, add, today } from '@box-kite/react/date';
+import DateField from '@box-kite/react/components/dateField';
+import Calendar from '@box-kite/react/components/calendar';
+import DatePicker, { DateRangePicker } from '@box-kite/react/components/datePicker';
+import TimeZoneSelect from '@box-kite/react/components/timeZoneSelect';
+import DateTime, { DateProvider } from '@box-kite/react/components/dateTime';
+
+toUtc('2026-10-19T14:30', { from: 'Europe/Chisinau' }); // '2026-10-19T11:30:00Z'
+toLocal('2026-10-19T11:30:00Z'); // the reader's wall clock, with its offset
+format('2026-10-19', { locale: 'ro-MD', dateStyle: 'long' }); // '19 octombrie 2026'
+parse('03/04/2026', { locale: 'en-GB' }); // '2026-04-03'
+
+<DateField label="Due" name="due" />;
+<DatePicker type="datetime" zone="utc" label="Publish at" onValueChange={(value, { utc, local }) => schedule(utc)} />;
+<DateRangePicker label="Stay" startName="from" endName="to" />;
+<DateTime value={order.createdAt} />;
+```
+
+**Every value is an ISO string, and its shape is its kind** — never a `Date`, which is always a moment in
+the runtime's zone:
+
+| Kind       | Written as                                 | Means                                                     |
+| ---------- | ------------------------------------------ | --------------------------------------------------------- |
+| `date`     | `2026-10-19`                               | A day: no time, no zone, the same everywhere.             |
+| `time`     | `14:30:00` (`.sss` when there are any)     | A time of day.                                            |
+| `datetime` | `2026-10-19T14:30:00`                      | A wall clock with no zone — an alarm, a timetable.        |
+| `instant`  | `2026-10-19T14:30:00+03:00`, or `…Z` (UTC) | One moment, written as one zone sees it. Anything stored. |
+
+A zone is `'local'` (the reader), `'utc'`, `'system'` (the runtime), an IANA name or a fixed offset.
+**`'local'` on a server** is `configureDates({ timeZone })` or the nearest `<DateProvider timeZone>`;
+`systemZone()` is always the server's own. The browser writes its zone into a cookie with
+`document.cookie = zoneCookie()`, and a server reads it back with `readZoneCookie(request.headers.get('cookie'))`.
+
+| Function (`@box-kite/react/date`)                                               | What it does                                                                |
+| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `toUtc(v, { from })` / `toLocal(v)` / `toZone(v, zone)`                         | The moment in UTC / on the reader's clock / on another zone's, with offset. |
+| `toPlainDate` / `toPlainTime` / `toPlainDateTime` / `toInstant`                 | `(v, { zone })` — the day, time or wall clock a value shows in `zone`.      |
+| `toDate` / `fromDate` / `toEpoch`                                               | The bridge to an API that insists on a `Date`.                              |
+| `combine(date, time, { zone })`                                                 | A date and a time: a date-time, or with `zone` the instant.                 |
+| `today(zone)` / `now(zone)` / `currentTime(zone)`                               | In the reader's zone unless told.                                           |
+| `format(v, { locale, zone, dateStyle, timeStyle, … })`                          | `Intl` options, never format tokens. `''` for a non-value.                  |
+| `formatRange` / `formatRelative` / `zoneName`                                   | `Oct 19 – 23, 2026`, `3 minutes ago`, `EEST`.                               |
+| `parse(text, { locale, kind, zone })`                                           | ISO, `Date`, epoch, HTTP date, or text in the locale's order.               |
+| `add` / `subtract` / `startOf` / `endOf` / `difference`                         | Calendar units on the wall clock, clock units on the instant.               |
+| `compare` / `isBefore` / `isAfter` / `isEqual` / `isSame` / `clamp`             | Across kinds and zones.                                                     |
+| `details(v, { zone })`                                                          | Every reading at once: `utc`, `zoned`, `local`, `offset`, `date`, `epoch`.  |
+| `weekInfo` / `hourCycleOf` / `monthNames` / `weekdayNames`                      | The locale, from `Intl`.                                                    |
+| `timeZones` / `offsetOf` / `isValidZone` / `normalizeZone`                      | The runtime's zones.                                                        |
+| `configureDates` / `localZone` / `systemZone` / `zoneCookie` / `readZoneCookie` | Who the reader is.                                                          |
+
+**DST** follows Temporal: a wall-clock time a zone skips or repeats takes `disambiguation` —
+`'compatible'` (default: the later reading of a skipped time, the earlier of a repeated one), `'earlier'`,
+`'later'` or `'reject'` (`null`).
+
+**The controls take and give the same string, and `onValueChange(value, details)` hands over the readings:**
+`details` is `{ reason, event, utc, local, zoned, date, epoch, zone, offset }`, all `null` while the value
+is. `reason` is `'keyboard'`, `'paste'`, `'select'`, `'preset'`, `'clear'` or `'reset'`.
+
+| Component (`components/…`)       | What it is                                                                                                                                                            |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `DateField` (`dateField`)        | Segments (`role="spinbutton"`) in the locale's order. `type`, `zone`, `granularity`, `hourCycle`, `min`/`max`, `isDateUnavailable`, `name`, `required`, `label`.      |
+| `Calendar` (`calendar`)          | APG's grid keys. `mode="range"` → `{ start, end }`, `months`, `weekNumbers`, `min`/`max`, `isDateUnavailable`, `firstDayOfWeek`.                                      |
+| `DatePicker` (`datePicker`)      | A `DateField` with a calendar (`date`), a list of times every `step` minutes (`time`) or both (`datetime`) in the top layer; `presets`, `clearable`, `closeOnSelect`. |
+| `DateRangePicker` (`datePicker`) | Two fields over a range calendar; `startName`/`endName`, `months` (2), `presets` of `{ start, end }`.                                                                 |
+| `TimeZoneSelect`                 | A `Combobox` over every zone, searchable by place, region or offset; the value is the IANA name.                                                                      |
+| `DateTime` (`dateTime`)          | `<time datetime>` in the reader's zone and language; `format`, `relative`, `zone`, `locale`. Also exports `DateProvider`.                                             |
+
+**A date-time's `zone`** is whose wall clock it is typed on: `'local'` (default), `'utc'`, an IANA name, or
+`'none'` (a wall clock with no zone, value `2026-10-19T14:30:00`). The value is the instant on that clock
+(`…+03:00`, or `…Z` for UTC), and a zone that is not the reader's is named after the time.
+
+**Four things to know.** **Nothing typed is ever parsed**: `03/04/2026` is two days depending on who typed
+it, so each segment is a spin button and only a paste is read as text. **No hydration error, ever**: a
+server and a hydrating browser both render in the fallback (`UTC`/`en-US`, or a `DateProvider`'s), and the
+render after hydration switches to the reader — so pass the cookie's zone to a `DateProvider` for a first
+paint that is already right. **`name` posts the canonical string** (and `required` is a real input the
+browser validates), so a server reads `2026-10-19` whatever the reader's locale. And in a **DataGrid**, a
+column takes `editor: 'date' | 'time' | 'datetime'` (inferred from an ISO string or a `Date`),
+`dateFormat: 'date' | 'time' | 'datetime' | 'relative' | Intl options` and `filterable: { type: 'date' }`
+(`on`/`before`/`after`/`between`, each day a `DatePicker`); those parts are a chunk the grid fetches only when it shows a date.
+Styling: `dateField` (extends `textbox`; `segment`, `literal`, `zone`, `label`; `compact`, `invalid`,
+`disabled`), `calendar` (`nav`, `title`, `weekday`, `weekNumber`, `cell` with the range band, `day` with
+`today`/`selected`/`outside`/`blocked`/`unavailable`, `zoomItem`) and `datePicker` (`trigger`, `clear`,
+`presets`, `preset`, `times`, `time`, `part`); the panel is a `popover`.
+
 ## Toaster (`toast()` + `<Toaster>`)
 
 ```tsx
@@ -2396,30 +2678,33 @@ named ones carry the reason.
 | `footer`                  | `boolean \| { label? }`               | `false`     | A pinned row of grand totals over every column with an `aggregate`. `label` replaces the default `Total`                                                                                                               |
 | `export`                  | `boolean \| ExportConfig`             | `false`     | Export buttons in the top bar: `{ csv?, xlsx?, fileName? }`. The writers load on the first press                                                                                                                       |
 | `tabNavigation`           | `'none' \| 'cells'`                   | `'none'`    | What Tab does. `'none'` is APG's single tab stop; `'cells'` is the spreadsheet reading                                                                                                                                 |
+| `layout`                  | `'auto' \| 'table' \| 'list'`         | `'auto'`    | A table, or a list once the grid's own width is under `list.breakpoint` (see "On a phone")                                                                                                                             |
+| `list`                    | `ListConfig`                          | —           | `{ breakpoint?, fields?, batchSize?, recordView? }` — the list layout's settings                                                                                                                                       |
 | `rangeSelection`          | `boolean`                             | `false`     | A drag or Shift+arrow marks a block of cells, and `Ctrl+C`/`Ctrl+V` copy and paste it as TSV (see below)                                                                                                               |
 
 ### ColumnType
 
-| Prop                     | Type                                                | Default   | Description                                                                                                                                     |
-| ------------------------ | --------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `key`                    | `Key`                                               | required  | Column identifier (maps to TRow property)                                                                                                       |
-| `header`                 | `string`                                            | —         | Header text                                                                                                                                     |
-| `width`                  | `number`                                            | `200`     | Base width in px                                                                                                                                |
-| `align`                  | `'start' \| 'end' \| 'center' \| 'left' \| 'right'` | `'left'`  | Cell alignment. `start`/`end` follow the reading order; `left`/`right` stay on the screen side they name                                        |
-| `pin`                    | `'START' \| 'END'` (also `'LEFT'`/`'RIGHT'`)        | —         | Pin to an edge of the **inline axis** (sticky on scroll), so it holds under either `dir`. `LEFT`/`RIGHT` are the older spelling of the same two |
-| `columns`                | `ColumnType[]`                                      | —         | Nested columns (grouped header)                                                                                                                 |
-| `Cell`                   | `({ cell }) => ReactNode`                           | —         | Custom renderer. `cell`: `{ value, row, column, grid }`. It redraws when its row changes or the grid does — not when another row is selected    |
-| `sortable` / `resizable` | `boolean`                                           | inherits  | Override grid-level setting                                                                                                                     |
-| `flexible`               | `boolean`                                           | `true`    | Participate in flex width distribution                                                                                                          |
-| `filterable`             | `boolean \| FilterConfig`                           | —         | `true` (text), `{ type: 'number', min?, max? }`, `{ type: 'multiselect', options? }`                                                            |
-| `contextMenu`            | `boolean \| ContextMenuConfig`                      | inherits  | Override grid-level context menu. `false` hides entirely. `{ sort?, pin?, group? }` controls sections                                           |
-| `aggregate`              | `AggregateName \| (values, rows) => value`          | —         | Total this column over each group row, and over the footer. See below                                                                           |
-| `AggregateCell`          | `({ cell }) => ReactNode`                           | —         | Renders the aggregate. `cell`: `{ value, column, rows, scope }`, `scope` being `'group'` or `'footer'`                                          |
-| `editable`               | `boolean \| (row) => boolean`                       | inherits  | Whether this column’s cells can be edited — every row, or the rows a predicate says                                                             |
-| `editor`                 | `CellEditorType \| CellEditorConfig`                | inferred  | `text`/`number`/`checkbox`/`select`. Without one it is read off the value in the cell                                                           |
-| `EditCell`               | `({ cell }) => ReactNode`                           | —         | An editor of your own, bound to `cell.draft` with `cell.commitEdit()`/`cell.cancelEdit()`                                                       |
-| `exportValue`            | `(row: TRow) => value`                              | the field | What this column writes to an exported file — an export runs no React, so a `Cell` renderer needs it                                            |
-| `exportFormat`           | `string`                                            | —         | The number format its cells wear in a workbook, `'#,##0.00'` or `'yyyy-mm-dd'`                                                                  |
+| Prop                     | Type                                                                            | Default   | Description                                                                                                                                     |
+| ------------------------ | ------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `key`                    | `Key`                                                                           | required  | Column identifier (maps to TRow property)                                                                                                       |
+| `header`                 | `string`                                                                        | —         | Header text                                                                                                                                     |
+| `width`                  | `number`                                                                        | `200`     | Base width in px                                                                                                                                |
+| `align`                  | `'start' \| 'end' \| 'center' \| 'left' \| 'right'`                             | `'left'`  | Cell alignment. `start`/`end` follow the reading order; `left`/`right` stay on the screen side they name                                        |
+| `pin`                    | `'START' \| 'END'` (also `'LEFT'`/`'RIGHT'`)                                    | —         | Pin to an edge of the **inline axis** (sticky on scroll), so it holds under either `dir`. `LEFT`/`RIGHT` are the older spelling of the same two |
+| `columns`                | `ColumnType[]`                                                                  | —         | Nested columns (grouped header)                                                                                                                 |
+| `Cell`                   | `({ cell }) => ReactNode`                                                       | —         | Custom renderer. `cell`: `{ value, row, column, grid }`. It redraws when its row changes or the grid does — not when another row is selected    |
+| `sortable` / `resizable` | `boolean`                                                                       | inherits  | Override grid-level setting                                                                                                                     |
+| `flexible`               | `boolean`                                                                       | `true`    | Participate in flex width distribution                                                                                                          |
+| `filterable`             | `boolean \| FilterConfig`                                                       | —         | `true` (text), `{ type: 'number', min?, max? }`, `{ type: 'multiselect', options? }`                                                            |
+| `contextMenu`            | `boolean \| ContextMenuConfig`                                                  | inherits  | Override grid-level context menu. `false` hides entirely. `{ sort?, pin?, group? }` controls sections                                           |
+| `aggregate`              | `AggregateName \| (values, rows) => value`                                      | —         | Total this column over each group row, and over the footer. See below                                                                           |
+| `AggregateCell`          | `({ cell }) => ReactNode`                                                       | —         | Renders the aggregate. `cell`: `{ value, column, rows, scope }`, `scope` being `'group'` or `'footer'`                                          |
+| `editable`               | `boolean \| (row) => boolean`                                                   | inherits  | Whether this column’s cells can be edited — every row, or the rows a predicate says                                                             |
+| `editor`                 | `CellEditorType \| CellEditorConfig`                                            | inferred  | `text`/`number`/`checkbox`/`select`. Without one it is read off the value in the cell                                                           |
+| `EditCell`               | `({ cell }) => ReactNode`                                                       | —         | An editor of your own, bound to `cell.draft` with `cell.commitEdit()`/`cell.cancelEdit()`                                                       |
+| `exportValue`            | `(row: TRow) => value`                                                          | the field | What this column writes to an exported file — an export runs no React, so a `Cell` renderer needs it                                            |
+| `list`                   | `'title' \| 'kicker' \| 'subtitle' \| 'end' \| 'field' \| 'detail' \| 'hidden'` | inferred  | Where the column goes in a list item, on a phone                                                                                                |
+| `exportFormat`           | `string`                                                                        | —         | The number format its cells wear in a workbook, `'#,##0.00'` or `'yyyy-mm-dd'`                                                                  |
 
 ### Aggregation
 
@@ -2599,11 +2884,13 @@ the same function — and an answer to an edit the user has since abandoned is d
 ```
 
 - **Which editor a cell opens is read off the value in it** — a number gets `number`, a boolean
-  `checkbox`, everything else `text` — unless `column.editor` names one (`text`/`number`/`checkbox`/
-  `select`) or configures it (`{ type, options?, placeholder?, step?, min?, max? }`; `options` may be a
-  function of the row). `column.EditCell` is a control of your own, bound to `cell.draft` with
-  `cell.setDraft(v)`, `cell.commitEdit()` and `cell.cancelEdit()` — the same three calls the built-in four
-  make.
+  `checkbox` (drawn as a check or a cross, read out as `localeText.booleanTrue`/`booleanFalse`), an ISO
+  date, time or date-time a `DateField` (an edit keeps the shape the cell held: `…Z` stays UTC, a `Date`
+  a `Date`), everything else `text` — unless `column.editor` names one of the seven
+  (`text`/`number`/`checkbox`/`select`/`date`/`time`/`datetime`) or configures it
+  (`{ type, options?, placeholder?, step?, min?, max?, zone? }`; `options` may be a function of the row).
+  `column.EditCell` is a control of your own, bound to `cell.draft` with `cell.setDraft(v)`,
+  `cell.commitEdit()` and `cell.cancelEdit()` — the same three calls the built-in seven make.
 - **Pointer:** a press makes a cell the current one — it takes the ring, whether the pointer or the
   keyboard put it there — and a **double press opens the editor** on an editable cell. A cell that cannot
   be edited takes both as focus and nothing else, and a double press landing on a widget inside a cell (a
@@ -2715,6 +3002,65 @@ only gives it a bigger target.
   landed, so `range.values()` reads what the grid now shows. Everything it accepted lands in the same
   stream a typed value does: `onCellEditsChange(edits, { reason: 'paste' })`.
 
+### On a phone: the list layout
+
+Below `def.list.breakpoint` (576px, 36rem) of **the grid's own width** — measured with a `ResizeObserver`, not read off the viewport — the grid draws each row as a list item instead of a table row. Same rows, filters, sort, selection, grouping, tree and edits; a different drawing. `layout: 'table'` or `layout: 'list'` chooses one for good.
+
+```tsx
+<DataGrid
+  data={orders}
+  def={{
+    title: 'Orders',
+    globalFilter: true,
+    rowSelection: true,
+    columns: [
+      { key: 'customer', header: 'Customer', list: 'title' },
+      { key: 'id', header: 'Order', list: 'kicker' },
+      { key: 'total', header: 'Total', align: 'end', list: 'end', filterable: { type: 'number' } },
+      { key: 'status', header: 'Status', Cell: StatusBadge, filterable: { type: 'multiselect' } },
+      { key: 'date', header: 'Date' },
+      { key: 'notes', header: 'Notes', list: 'detail' },
+    ],
+  }}
+/>
+```
+
+| `column.list` | Where the column goes                                                                            |
+| ------------- | ------------------------------------------------------------------------------------------------ |
+| `'title'`     | The item's name, 16px semibold, and the button that opens the record view                        |
+| `'kicker'`    | A small muted line above the title — an id, a date                                               |
+| `'subtitle'`  | A line under the title; several are joined with `·`                                              |
+| `'end'`       | The one value opposite the title, with its column's name under it — a total, a status            |
+| `'field'`     | A labelled value in the two-column `<dl>` under the title                                        |
+| `'detail'`    | Only the record view                                                                             |
+| `'hidden'`    | Nowhere in the list layout                                                                       |
+| (unset)       | First column → title, first end-aligned → end, next `def.list.fields` (4) → field, rest → detail |
+
+| `def.list`   | Default | Description                                                                                        |
+| ------------ | ------- | -------------------------------------------------------------------------------------------------- |
+| `breakpoint` | `576`   | The grid's own width, in px, below which `layout: 'auto'` draws the list                           |
+| `fields`     | `4`     | How many unassigned columns become fields before the rest wait for the record view                 |
+| `batchSize`  | `20`    | How many items one **Show more** adds. A paginated grid draws its page and a compact pager instead |
+| `recordView` | `true`  | Whether pressing an item opens the record view                                                     |
+
+What the list does, in the order a reader meets it:
+
+- **Toolbar**: the title and row count, a full-width search (`globalFilter`), then pills — **Sort** and **Filters** open bottom sheets, **Select** (with `rowSelection`) turns selecting on. The filters in force sit under them as chips, each removable on its own.
+- **Sort sheet**: one radio group of the sortable columns and one of the direction, applied as they are picked.
+- **Filter sheet**: a section per filterable column — a full-width field, the phone's own operator picker for a number, chips for eight options or fewer and a searchable checklist past that. A filter applies as it is set, and the main button reads **Show N rows**.
+- **Item**: a press opens the record view; while selecting it ticks the row instead, a checkbox leads every item and a bar pinned to the bottom of the viewport counts the selection, with **Select all** and **Clear selection**. A tree row carries its chevron before the title, a `rowDetail` row a **Details** toggle, a group is a section header with its count and aggregates.
+- **Record view**: every column of one row in a bottom sheet, with a pager (`3 of 40`) that follows the list's own sort and filters — the arrow buttons, Left/Right, or a sideways swipe. An editable column has an **Edit** button that opens the column's editor through the same `def.onCellEdit`. Closing hands focus to the item of the row on screen.
+- **Footer**: the `def.footer` totals as a summary block, then **Show more** (`20 of 340`) — a button, never an endless scroll, so the totals and the page below stay reachable — or the compact pager when the host paginates.
+
+Four things to know:
+
+1. **It is a list, not a restyled grid.** A `<ul>` of `<li>`s, each value in a `<dl>`, `aria-posinset`/`aria-setsize` on each item; the grid's APG keyboard is the table's alone. Do not reach for `role="grid"` in a list item.
+2. **It is a chunk of its own.** The sheets and the record view load the first time a grid is narrow (and on import, on a phone-width screen); until then the grid goes on drawing its table. In a test, `await loadListLayout()` from `components/dataGrid/useListLayout` before rendering.
+3. **Unmeasured is a table.** A server render cannot know the width, so `layout: 'auto'` prerenders the table and a phone switches before its first paint after hydration. Force `layout: 'list'` where the server knows better.
+4. **The selection bar sticks to the viewport**, so no ancestor of the grid may be a scroll container (`overflow: hidden`/`auto`): `overflow: clip` clips the same corners without being one. The grid itself switches to `clip` in the list layout.
+
+Styling: every row and group header is a `List.Item` (see List), so the `list` tree styles them — the dividers, the hover and pressed tints, `selected`, the muted text. The grid's own is `datagrid.list` > `toolbar` > (`count`, `search`, `button` with an `active` variant, `chip`), `toggle` (a tree's chevron, the Details toggle), `detail`, `button`, `selectionBar`, `sheet` > (`line`, `input`, `chip`, `button`, `primary`). Both trees carry paint only; the geometry is in the list's own chunk.
+
 ### ContextMenuConfig
 
 | Prop    | Type      | Default | Description                                                               |

package/behavior.cjs

@@ -1 +1 @@
-const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./keyboard.cjs");let r=require("react");function i(e){let n=(0,r.useRef)(e);return t.n(()=>{n.current=e}),n}function a(e){let t=i(e);return(0,r.useCallback)((...e)=>t.current?.(...e),[t])}function o(e){let{value:t,defaultValue:n,onChange:o}=e,s=t!==void 0,[c,l]=(0,r.useState)(n),u=s?t:c,d=i(u),f=a(o);return[u,(0,r.useCallback)((e,t)=>{let n=typeof e==`function`?e(d.current):e;Object.is(n,d.current)||(l(n),f(n,t))},[f,d])]}var s=[];function c(e,t){let n=t.elements();return e.elements().some(e=>n.some(t=>e!==t&&e.contains(t)))}function l(){let e=s.filter(e=>!s.some(t=>t!==e&&c(e,t)));return e[e.length-1]}function u(n){let{enabled:r=!0,onDismiss:o,inside:c,escapeKey:u=!0,outsidePointer:d=!0}=n,f=i(c),p=a(o);t.n(()=>{if(!r)return;let t={elements:()=>(f.current??[]).map(t=>e.s(t)).filter(e=>e!==null)};s.push(t);let n=new AbortController,i=(e,t)=>document.addEventListener(e,t,{signal:n.signal});return u&&i(`keydown`,e=>{e.key!==`Escape`||e.defaultPrevented||l()===t&&p(`escape`,e)}),d&&i(`pointerdown`,t=>{e.l(t,f.current??[])||p(`outside-pointer`,t)}),()=>{n.abort();let e=s.indexOf(t);e!==-1&&s.splice(e,1)}},[r,u,d,p,f])}function d(){let t=e.t()?.activeElement;return t&&t!==document.body?t:null}function f(t={}){let{enabled:n=!0,returnTo:i,preventScroll:o}=t,[s,c]=(0,r.useState)(null),[l,u]=(0,r.useState)(!1);n!==l&&(u(n),n&&c(d()));let f=a(()=>{(e.c(i)??s)?.focus({preventScroll:o})});return(0,r.useEffect)(()=>{if(n)return()=>{let e=document.activeElement;(!e||e===document.body||!document.contains(e))&&f()}},[n,f]),{returnFocus:f}}var p=10;function m(e,t){return t<0?-1:Math.max(0,Math.min(e,t))}function h(e,t,n,r,i){if(n===0)return-1;let a=e;for(let e=0;e<n;e++){if(a+=t,a<0||a>=n){if(!r)return-1;a=(a%n+n)%n}if(!i?.(a))return a}return-1}function g(e,t,n){return h(e===1?-1:t,e,t,!1,n)}function _(t){let{count:a,columns:s,columnIndexOf:c,pageSize:l=p,defaultActiveColumn:u=0,onActiveCellChange:d,orientation:f=`vertical`,loop:_=!0,activeIndex:v,defaultActiveIndex:y=0,onActiveIndexChange:b,isDisabled:x,textOf:S,focusItems:C=!0,onSelect:w}=t,[T,E]=o({value:v,defaultValue:y,onChange:b}),D=Math.min(T,a-1),O=s!==void 0,k=(0,r.useCallback)(e=>typeof s==`function`?s(e):s??0,[s]),A=(0,r.useCallback)((e,t)=>{let n=k(e);if(!c)return m(t,n-1);if(n<=0)return-1;let r=0;for(;r+1<n&&c(e,r+1)<=t;)r++;return r},[c,k]),[j,M]=(0,r.useState)(u),N=O&&D>=0?A(D,j):-1,P=(0,r.useRef)([]),F=(0,r.useRef)(new Map),I=(0,r.useRef)(new Map),L=(0,r.useRef)(new Map),R=(0,r.useRef)({query:``,at:0}),z=(0,r.useCallback)(e=>{P.current[e]?.focus()},[]),B=(0,r.useRef)(!1),V=(0,r.useCallback)((e,t)=>{B.current=!0,I.current.get(`${e}:${t}`)?.focus(),B.current=!1},[]),H=(0,r.useCallback)(()=>O?I.current.get(`${D}:${N}`)??null:P.current[D]??null,[N,D,O]),U=i({row:D,column:N}),W=i(j),G=i(d),K=i(k),q=i(A),J=i(c),Y=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=Math.max(0,t),o=r<0?-1:q.current(r,i),s=U.current;return r===s.row&&o===s.column?s:(E(r,n),M(i),G.current?.({row:r,column:o},n),{row:r,column:o})},[U,q,G,a,E]),X=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=r<0?-1:m(Math.max(0,t),K.current(r)-1);return Y(r,i<0?0:J.current?.(r,i)??i,n)},[J,a,Y,K]),Z=(0,r.useCallback)((e,t)=>{let n=`${e}:${t}`;return L.current.has(n)||L.current.set(n,e=>{e?I.current.set(n,e):(I.current.delete(n),L.current.delete(n))}),{ref:L.current.get(n),tabIndex:e===D&&t===N?0:-1,onFocus:()=>{B.current||X(e,t,{reason:`focus`})}}},[N,D,X]),Q=(0,r.useCallback)(e=>(F.current.has(e)||F.current.set(e,t=>{P.current[e]=t}),{ref:F.current.get(e),tabIndex:C?e===D?0:-1:void 0,onFocus:C?()=>E(e,{reason:`focus`}):void 0}),[D,C,E]),$=(0,r.useCallback)(t=>{let{row:n,column:r}=U.current,i=(e,n)=>{t.preventDefault();let r=X(e,n,{reason:`keyboard`,event:t});C&&V(r.row,r.column)},o=e=>{t.preventDefault();let n=Y(e,W.current,{reason:`keyboard`,event:t});C&&V(n.row,n.column)},s=2**53-1,c=()=>e.u(t.currentTarget)?-1:1;switch(t.key){case`ArrowRight`:return i(n,r+c());case`ArrowLeft`:return i(n,r-c());case`ArrowDown`:return o(n+1);case`ArrowUp`:return o(n-1);case`Home`:return t.ctrlKey||t.metaKey?i(0,0):i(n,0);case`End`:return t.ctrlKey||t.metaKey?i(a-1,s):i(n,s);case`PageDown`:return o(n+l);case`PageUp`:return o(n-l)}},[U,a,W,V,C,l,Y,X]);return{activeIndex:D,activeColumn:N,setActiveIndex:E,setActiveCell:X,onKeyDown:(0,r.useCallback)(t=>{if(t.defaultPrevented)return;if(O){$(t);return}let r=f!==`horizontal`,i=f!==`vertical`,o=R.current,s=n.t.isOpen(o,t.timeStamp),c=(e,n)=>{e!==-1&&e!==D&&(t.preventDefault(),E(e,{reason:n,event:t}),C&&z(e))};if(i&&(t.key===`ArrowRight`||t.key===`ArrowLeft`)){let n=t.key===`ArrowRight`!==e.u(t.currentTarget);c(h(D,n?1:-1,a,_,x),`keyboard`);return}if(t.key===`ArrowDown`&&r){c(h(D,1,a,_,x),`keyboard`);return}if(t.key===`ArrowUp`&&r){c(h(D,-1,a,_,x),`keyboard`);return}if(t.key===`Home`){c(g(1,a,x),`keyboard`);return}if(t.key===`End`){c(g(-1,a,x),`keyboard`);return}if(t.key===`Enter`||t.key===` `&&!(s&&S)){if(!w||D===-1)return;t.preventDefault(),w(D,t);return}if(S&&n.t.isPrintable(t)){let e=n.t.push(o,t.key,t.timeStamp);c(n.t.target(e,D,a,S,x),`typeahead`)}},[D,a,z,C,x,O,_,$,w,f,E,S]),itemProps:Q,cellProps:Z,activeItem:H}}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});
+const e=require("./platform.cjs"),t=require("./effects.cjs"),n=require("./keyboard.cjs");let r=require("react");function i(e){let n=(0,r.useRef)(e);return t.n(()=>{n.current=e}),n}function a(e){let t=i(e);return(0,r.useCallback)((...e)=>t.current?.(...e),[t])}function o(e){let{value:t,defaultValue:n,onChange:o}=e,s=t!==void 0,[c,l]=(0,r.useState)(n),u=s?t:c,d=i(u),f=a(o);return[u,(0,r.useCallback)((e,t)=>{let n=typeof e==`function`?e(d.current):e;Object.is(n,d.current)||(l(n),f(n,t))},[f,d])]}var s=[];function c(e,t){let n=t.elements();return e.elements().some(e=>n.some(t=>e!==t&&e.contains(t)))}function l(){let e=s.filter(e=>!s.some(t=>t!==e&&c(e,t)));return e[e.length-1]}function u(n){let{enabled:r=!0,onDismiss:o,inside:c,escapeKey:u=!0,outsidePointer:d=!0}=n,f=i(c),p=a(o);t.n(()=>{if(!r)return;let t={elements:()=>(f.current??[]).map(t=>e.c(t)).filter(e=>e!==null)};s.push(t);let n=new AbortController,i=(e,t)=>document.addEventListener(e,t,{signal:n.signal});return u&&i(`keydown`,e=>{e.key!==`Escape`||e.defaultPrevented||l()===t&&p(`escape`,e)}),d&&i(`pointerdown`,t=>{e.u(t,f.current??[])||p(`outside-pointer`,t)}),()=>{n.abort();let e=s.indexOf(t);e!==-1&&s.splice(e,1)}},[r,u,d,p,f])}function d(){let t=e.t()?.activeElement;return t&&t!==document.body?t:null}function f(t={}){let{enabled:n=!0,returnTo:i,preventScroll:o}=t,[s,c]=(0,r.useState)(null),[l,u]=(0,r.useState)(!1);n!==l&&(u(n),n&&c(d()));let f=a(()=>{(e.l(i)??s)?.focus({preventScroll:o})});return(0,r.useEffect)(()=>{if(n)return()=>{let e=document.activeElement;(!e||e===document.body||!document.contains(e))&&f()}},[n,f]),{returnFocus:f}}var p=10;function m(e,t){return t<0?-1:Math.max(0,Math.min(e,t))}function h(e,t,n,r,i){if(n===0)return-1;let a=e;for(let e=0;e<n;e++){if(a+=t,a<0||a>=n){if(!r)return-1;a=(a%n+n)%n}if(!i?.(a))return a}return-1}function g(e,t,n){return h(e===1?-1:t,e,t,!1,n)}function _(t){let{count:a,columns:s,columnIndexOf:c,pageSize:l=p,defaultActiveColumn:u=0,onActiveCellChange:d,orientation:f=`vertical`,loop:_=!0,activeIndex:v,defaultActiveIndex:y=0,onActiveIndexChange:b,isDisabled:x,textOf:S,focusItems:C=!0,onSelect:w}=t,[T,E]=o({value:v,defaultValue:y,onChange:b}),D=Math.min(T,a-1),O=s!==void 0,k=(0,r.useCallback)(e=>typeof s==`function`?s(e):s??0,[s]),A=(0,r.useCallback)((e,t)=>{let n=k(e);if(!c)return m(t,n-1);if(n<=0)return-1;let r=0;for(;r+1<n&&c(e,r+1)<=t;)r++;return r},[c,k]),[j,M]=(0,r.useState)(u),N=O&&D>=0?A(D,j):-1,P=(0,r.useRef)([]),F=(0,r.useRef)(new Map),I=(0,r.useRef)(new Map),L=(0,r.useRef)(new Map),R=(0,r.useRef)({query:``,at:0}),z=(0,r.useCallback)(e=>{P.current[e]?.focus()},[]),B=(0,r.useRef)(!1),V=(0,r.useCallback)((e,t)=>{B.current=!0,I.current.get(`${e}:${t}`)?.focus(),B.current=!1},[]),H=(0,r.useCallback)(()=>O?I.current.get(`${D}:${N}`)??null:P.current[D]??null,[N,D,O]),U=i({row:D,column:N}),W=i(j),G=i(d),K=i(k),q=i(A),J=i(c),Y=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=Math.max(0,t),o=r<0?-1:q.current(r,i),s=U.current;return r===s.row&&o===s.column?s:(E(r,n),M(i),G.current?.({row:r,column:o},n),{row:r,column:o})},[U,q,G,a,E]),X=(0,r.useCallback)((e,t,n)=>{let r=m(e,a-1),i=r<0?-1:m(Math.max(0,t),K.current(r)-1);return Y(r,i<0?0:J.current?.(r,i)??i,n)},[J,a,Y,K]),Z=(0,r.useCallback)((e,t)=>{let n=`${e}:${t}`;return L.current.has(n)||L.current.set(n,e=>{e?I.current.set(n,e):(I.current.delete(n),L.current.delete(n))}),{ref:L.current.get(n),tabIndex:e===D&&t===N?0:-1,onFocus:()=>{B.current||X(e,t,{reason:`focus`})}}},[N,D,X]),Q=(0,r.useCallback)(e=>(F.current.has(e)||F.current.set(e,t=>{P.current[e]=t}),{ref:F.current.get(e),tabIndex:C?e===D?0:-1:void 0,onFocus:C?()=>E(e,{reason:`focus`}):void 0}),[D,C,E]),$=(0,r.useCallback)(t=>{let{row:n,column:r}=U.current,i=(e,n)=>{t.preventDefault();let r=X(e,n,{reason:`keyboard`,event:t});C&&V(r.row,r.column)},o=e=>{t.preventDefault();let n=Y(e,W.current,{reason:`keyboard`,event:t});C&&V(n.row,n.column)},s=2**53-1,c=()=>e.d(t.currentTarget)?-1:1;switch(t.key){case`ArrowRight`:return i(n,r+c());case`ArrowLeft`:return i(n,r-c());case`ArrowDown`:return o(n+1);case`ArrowUp`:return o(n-1);case`Home`:return t.ctrlKey||t.metaKey?i(0,0):i(n,0);case`End`:return t.ctrlKey||t.metaKey?i(a-1,s):i(n,s);case`PageDown`:return o(n+l);case`PageUp`:return o(n-l)}},[U,a,W,V,C,l,Y,X]);return{activeIndex:D,activeColumn:N,setActiveIndex:E,setActiveCell:X,onKeyDown:(0,r.useCallback)(t=>{if(t.defaultPrevented)return;if(O){$(t);return}let r=f!==`horizontal`,i=f!==`vertical`,o=R.current,s=n.t.isOpen(o,t.timeStamp),c=(e,n)=>{e!==-1&&e!==D&&(t.preventDefault(),E(e,{reason:n,event:t}),C&&z(e))};if(i&&(t.key===`ArrowRight`||t.key===`ArrowLeft`)){let n=t.key===`ArrowRight`!==e.d(t.currentTarget);c(h(D,n?1:-1,a,_,x),`keyboard`);return}if(t.key===`ArrowDown`&&r){c(h(D,1,a,_,x),`keyboard`);return}if(t.key===`ArrowUp`&&r){c(h(D,-1,a,_,x),`keyboard`);return}if(t.key===`Home`){c(g(1,a,x),`keyboard`);return}if(t.key===`End`){c(g(-1,a,x),`keyboard`);return}if(t.key===`Enter`||t.key===` `&&!(s&&S)){if(!w||D===-1)return;t.preventDefault(),w(D,t);return}if(S&&n.t.isPrintable(t)){let e=n.t.push(o,t.key,t.timeStamp);c(n.t.target(e,D,a,S,x),`typeahead`)}},[D,a,z,C,x,O,_,$,w,f,E,S]),itemProps:Q,cellProps:Z,activeItem:H}}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});