@duro-app/ui 5.6.0 → 5.7.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, m as xt, R as rt, H as kt, n as pt, o as bt, p as ft, q as mt, k as ht, t as yt, r as St, v as Tt } from "./Table-B1sWL3GA.js";
+import { M as F, m as xt, R as rt, H as kt, n as pt, o as bt, p as ft, q as mt, k as ht, t as yt, r as St, v as Tt } from "./Table-Dj7PXqO_.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-B2IcI8_O.js";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.6.0"
+    "@duro-app/tokens": "^5.7.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/DragDrop/DragDrop.meta.ts

@@ -2,15 +2,15 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Move items between zones with one pointer — mouse, pen and touch through the same pointer-event path (touch holds briefly, then drags; a moving touch stays a scroll). A ghost follows the pointer, the zone under it lights up, and the Root announces picks and drops to screen readers. Dragging is pointer-only by design: keep a button or remove affordance that does the same thing.',
-  anatomy: {required: ['Root', 'Zone', 'Item']},
+    'Move items between zones by pointer (mouse, pen and touch through one pointer-event path; touch holds briefly, then drags) or by keyboard (a Handle per item: Space picks up, arrows move, Space drops, Escape cancels). The innermost accepting zone wins, so a zone nested in an Item (a card in a column) takes its own drops; a zone can refuse with a reason that is shown and announced. Placeholders, edge auto-scroll and list-style announcements (through `announce`, for catalog strings) come with it.',
+  anatomy: {required: ['Root', 'Zone', 'Item'], optional: ['Handle']},
   whenToUse: [
     'Slotting things into places — people into approval gates, cards into columns, files into folders',
     'Reordering a short row or list when the order is visible and meaningful',
+    'A board: columns as labelled lists (`list`), cards with a Handle, an attach zone nested in each card',
   ],
   whenNotToUse: [
-    'As the ONLY way to do something — every drag needs a tap/click equivalent (WCAG 2.5.7); this component does not provide one',
-    'Long lists that scroll while dragging — the ghost follows the pointer but zones do not auto-scroll',
+    'As the ONLY way to do something — WCAG 2.5.7 asks for a single-pointer alternative to dragging (a button or menu that moves the item); a Handle adds the keyboard path, not a click one',
     'Sorting tabular data — sort the Table instead',
     'React Native — Item renders its children without drag behaviour there',
   ],
@@ -26,24 +26,25 @@ export const meta: ComponentMeta = {
       relationship: 'ScrollArea drags a thumb along one axis; DragDrop moves items between zones',
     },
   ],
-  example: `<DragDrop.Root onDrop={({item, target}) => move(item.id, target.zone, target.index)}>
-  <DragDrop.Zone id="roster" label="Roster">
-    <Cluster gap="sm">
-      {people.map((p) => (
-        <DragDrop.Item key={p.id} id={p.id} zone="roster" label={p.name} data={p}>
-          <Button variant="secondary" size="small" onClick={() => slot(p)}>{p.name}</Button>
+  example: `<DragDrop.Root
+  onDrop={({item, target}) => move(item.id, target.zone, target.index)}
+  renderPlaceholder={({label}) => <Text variant="caption">→ {label}</Text>}
+  announce={(e) => t(\`board.drag.\${e.kind}\`, e)}
+>
+  {columns.map((col) => (
+    <DragDrop.Zone key={col.id} id={col.id} label={col.name} orientation="vertical" list
+      accepts={(item) => item.data.kind === 'task' || {ok: false, reason: t('board.attachOnCard')}}>
+      {col.cards.map((card) => (
+        <DragDrop.Item key={card.id} id={card.id} zone={col.id} label={card.title} data={card}>
+          <DragDrop.Handle>
+            <DragDrop.Zone id={\`attach:\${card.id}\`} label={card.title}
+              accepts={(item) => item.data.kind === 'activity'}>
+              <Card>{card.title}</Card>
+            </DragDrop.Zone>
+          </DragDrop.Handle>
         </DragDrop.Item>
       ))}
-    </Cluster>
-  </DragDrop.Zone>
-  <DragDrop.Zone id="gates" label="Gates" orientation="horizontal">
-    <Inline gap="sm">
-      {gates.map((g) => (
-        <DragDrop.Item key={g.id} id={g.id} zone="gates" label={g.name} data={g}>
-          <Tag removable onRemove={() => unslot(g)}>{g.name}</Tag>
-        </DragDrop.Item>
-      ))}
-    </Inline>
-  </DragDrop.Zone>
+    </DragDrop.Zone>
+  ))}
 </DragDrop.Root>`,
 }