@setsquare/ui 0.4.0 → 0.5.0

package/dist/ui/tree.js

@@ -1,29 +1,68 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, GripVertical } from 'lucide-react';
 import { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent, TreeSection as RACTreeSection, } from 'react-aria-components';
 import { cn } from '../lib/cn.js';
 import { SelectionCheckbox } from './checkbox.js';
+import { renderIcon } from './icon.js';
 /**
- * Nested things people open, close and act on: the steps of a workflow and their outcomes, operations grouped by
- * resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a row and ← closes
- * it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you typed. On an
- * open row, → moves to the row's own buttons. The tree is `relative` because it scrolls, and because React Aria
- * positions its drop indicators absolutely.
+ * Nested things people open, close and act on: the blocks of a page, the steps of a workflow and their outcomes,
+ * operations grouped by resource. React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between rows, → opens a
+ * row and ← closes it, Home and End go to the ends, and typing jumps to the next row whose name starts with what you
+ * typed. On an open row, → moves to the row's own buttons.
+ *
+ * It draws no box of its own: rows sit on whatever surface holds the tree (a panel, a card), `--nav-item-gap`
+ * apart, like a nav list. The tree is `relative` because it scrolls, and because React Aria positions its drop
+ * indicators absolutely.
+ *
+ * Drag and drop: pass `dragAndDropHooks` from React Aria's `useDragAndDrop`, with
+ * `renderDropIndicator: (target) => <DropIndicator target={target} />`. Every draggable row then shows a drag
+ * button, which is how a keyboard or screen reader drag starts: Enter on it, ↑ ↓ to a drop place, Enter to drop,
+ * Esc to cancel.
  */
 export function Tree({ className, ...props }) {
-    return (_jsx(RACTree, { ...props, className: cn('relative flex max-h-[inherit] flex-col overflow-auto rounded-lg border border-border bg-card text-sm outline-none data-focus-visible:focus-ring', className) }));
+    return (_jsx(RACTree, { ...props, className: cn('relative flex max-h-[inherit] flex-col gap-(--nav-item-gap) overflow-auto text-sm outline-none data-focus-visible:focus-ring', 
+        // Dropping onto the tree itself (an empty tree, or the end of it).
+        'data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2', className) }));
 }
+/** The column the chevron, or the space for one, takes: one target wide, so every title lines up. */
+const lead = 'w-[max(var(--target-min),var(--control-height-sm))] shrink-0';
 /**
- * One row and the rows inside it. A row with children has a chevron: a target at least `--target-min` square
- * around a `--control-height-sm` paint, which React Aria keeps out of the tab order, since → and ← do the same.
- * Each level indents by the chevron's width. Selected: brand-subtle and the 3px sidebar-primary marker, as in a
- * GridList; with multiple selection, a ticked box too.
+ * One row and the rows inside it, on one line while it fits: chevron, icon, title, description, status, then its
+ * buttons. Each level indents by `--tree-indent` (16px). A row is at least `--nav-item-height` tall and `--target-min` at AAA,
+ * rounded, with the `accent` ground on hover. Selected: `brand-subtle`, the 3px `sidebar-primary` marker, a bold
+ * title and a `brand` icon, as in a GridList and the sidebar; with multiple selection, a ticked box too.
+ *
+ * A row that only holds other rows, such as a column in a page layout, can be focused and opened but never
+ * selected: put its id in the Tree's `disabledKeys` and set `disabledBehavior="selection"`. React Aria then
+ * leaves it focusable and doesn't mark it disabled, so it isn't dimmed.
+ *
+ * While a drag is over the row, as a place to drop into, it gets the `brand-subtle` ground and a 2px `brand`
+ * outline inside its edge. The row being dragged fades to 50%.
  */
-export function TreeItem({ title, textValue, description, actions, children, className, ...props }) {
-    return (_jsxs(RACTreeItem, { ...props, textValue: textValue ?? (typeof title === 'string' ? title : ''), style: ({ level }) => ({ '--tree-level': level }), className: cn(
+export function TreeItem({ title, textValue, icon, description, status, statusLabel, actions, alwaysShowActions, children, dragLabel, allowsDragging: rowDrags = true, className, ...props }) {
+    const text = textValue ?? (typeof title === 'string' ? title : '');
+    const named = [
+        props['aria-label'] ?? text,
+        typeof description === 'string' ? description : '',
+        statusLabel ?? '',
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsxs(RACTreeItem, { ...props, textValue: text, "aria-label": named || undefined, style: ({ level }) => ({ '--tree-level': level }), className: cn(
         // React Aria sets data-hovered only on a row that can be selected or has an action: the pointer then.
-        'group/tree-item relative flex min-h-[calc(var(--control-height)+12px)] cursor-default items-center gap-2 border-b border-border py-1.5 ps-[calc(4px+(var(--tree-level)-1)*max(var(--target-min),var(--control-height-sm)))] pe-3 outline-none last:border-b-0', 'data-hovered:cursor-pointer data-disabled:cursor-not-allowed data-hovered:bg-accent data-selected:bg-brand-subtle data-selected:shadow-[inset_3px_0_0_var(--sidebar-primary)] data-focus-visible:focus-ring-inset data-disabled:opacity-60', className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, selectionMode, selectionBehavior }) => (_jsxs(_Fragment, { children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: "group/tree-chevron relative flex min-h-target min-w-target shrink-0 cursor-pointer items-center justify-center outline-none", children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-hovered/tree-chevron:bg-muted group-data-hovered/tree-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/tree-item:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: "w-[max(var(--target-min),var(--control-height-sm))] shrink-0" })), selectionMode === 'multiple' && selectionBehavior === 'toggle' && (_jsx(SelectionCheckbox, {})), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "leading-5 font-medium text-foreground", children: title }), description && (_jsx("span", { className: "text-[13px] leading-5 text-muted-foreground", children: description }))] }), actions && _jsx("span", { className: "flex shrink-0 items-center gap-1", children: actions })] })) }), children] }));
+        'group/tree-item relative flex min-h-[max(var(--target-min),var(--nav-item-height))] cursor-default items-center gap-0.5 rounded-md py-1 ps-[calc((var(--tree-level)-1)*var(--tree-indent))] pe-1 outline-none', 'data-hovered:cursor-pointer data-disabled:cursor-not-allowed data-hovered:bg-accent data-selected:bg-brand-subtle data-selected:shadow-[inset_3px_0_0_var(--sidebar-primary)] data-focus-visible:focus-ring-inset data-disabled:opacity-60', 'data-dragging:opacity-50 data-drop-target:bg-brand-subtle data-drop-target:outline-2 data-drop-target:outline-solid data-drop-target:outline-brand data-drop-target:-outline-offset-2', 
+        // Forced colours drop the selected ground and the inset marker: draw the marker in Highlight instead.
+        "forced-colors:data-selected:before:absolute forced-colors:data-selected:before:inset-y-1 forced-colors:data-selected:before:start-0 forced-colors:data-selected:before:w-[3px] forced-colors:data-selected:before:bg-[Highlight] forced-colors:data-selected:before:forced-color-adjust-none forced-colors:data-selected:before:content-['']", className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, selectionMode, selectionBehavior, allowsDragging: treeDrags }) => {
+                    const allowsDragging = treeDrags && rowDrags;
+                    return (_jsxs(_Fragment, { children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: cn('group/tree-chevron relative flex min-h-target cursor-pointer items-center justify-center outline-none', lead), children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-hovered/tree-chevron:bg-muted group-data-hovered/tree-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/tree-item:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: lead })), selectionMode === 'multiple' && selectionBehavior === 'toggle' && (_jsx(SelectionCheckbox, {})), _jsxs("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 px-2", children: [icon &&
+                                        renderIcon(icon, 'size-4 shrink-0 text-muted-foreground group-data-selected/tree-item:text-brand'), _jsx("span", { className: "min-w-0 leading-5 font-semibold [overflow-wrap:anywhere] text-foreground group-data-selected/tree-item:font-bold", children: title }), description && (_jsx("span", { className: "min-w-0 leading-5 [overflow-wrap:anywhere] text-muted-foreground", children: description })), status && (_jsx("span", { className: "flex flex-wrap items-center gap-1", children: status }))] }), (actions || allowsDragging) && (_jsxs("span", { className: cn('flex shrink-0 items-center gap-0.5', !alwaysShowActions &&
+                                    // Faded out, not hidden: they stay focusable, so focus can land on them (and shows
+                                    // them) and React Aria can hand focus back to the drag button when a drag ends. No
+                                    // pointer events until they show: group-hover needs a device that hovers, so on touch
+                                    // a tap selects the row first.
+                                    'pointer-events-none opacity-0', 'group-hover/tree-item:pointer-events-auto group-hover/tree-item:opacity-100', 'group-focus-within/tree-item:pointer-events-auto group-focus-within/tree-item:opacity-100', 'group-data-selected/tree-item:pointer-events-auto group-data-selected/tree-item:opacity-100', 'group-data-dragging/tree-item:opacity-100'), children: [allowsDragging && (_jsx(RACButton, { slot: "drag", "aria-label": dragLabel, className: "group/tree-drag relative flex min-h-target min-w-target shrink-0 cursor-grab items-center justify-center outline-none", children: _jsx("span", { className: "flex size-control-sm items-center justify-center rounded-md text-muted-foreground group-data-focus-visible/tree-drag:focus-ring group-data-hovered/tree-drag:bg-muted group-data-hovered/tree-drag:text-foreground", children: _jsx(GripVertical, { "aria-hidden": "true", className: "size-4" }) }) })), actions] }))] }));
+                } }), children] }));
 }
 /** A group of top-level rows under a `TreeHeader`: operations by resource, steps by phase. */
 export function TreeSection({ className, ...props }) {
@@ -31,6 +70,6 @@ export function TreeSection({ className, ...props }) {
 }
 /** The name of a `TreeSection`, read before its rows. Not a target: arrow keys pass over it. */
 export function TreeHeader({ children, className }) {
-    return (_jsx(RACTreeHeader, { className: cn('border-b border-border bg-muted px-3 py-1.5 text-caption-strong text-muted-foreground', className), children: children }));
+    return (_jsx(RACTreeHeader, { className: cn('px-3 pt-3 pb-1 text-caption-strong text-muted-foreground first:pt-1', className), children: children }));
 }
 //# sourceMappingURL=tree.js.map

package/dist/ui/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,IAAI,IAAI,OAAO,EACf,UAAU,IAAI,aAAa,EAC3B,QAAQ,IAAI,WAAW,EACvB,eAAe,EACf,WAAW,IAAI,cAAc,GAG9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWlD;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IAC1E,OAAO,CACL,KAAC,OAAO,OACD,KAAyB,EAC9B,SAAS,EAAE,EAAE,CACX,iJAAiJ,EACjJ,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC;AAmBD;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAA4B,EAClD,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACS;IACjB,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,SAAS,EAAE,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAChE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAkB,EAClE,SAAS,EAAE,EAAE;QACX,sGAAsG;QACtG,+PAA+P,EAC/P,4OAA4O,EAC5O,SAAS,CACV,aAED,KAAC,eAAe,cACb,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CACxD,8BACG,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,SAAS,IACR,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,6HAA6H,YAEvI,eAAM,SAAS,EAAC,4KAA4K,YAC1L,KAAC,YAAY,mBACC,MAAM,EAClB,SAAS,EAAC,gDAAgD,GAC1D,GACG,GACG,CACb,CAAC,CAAC,CAAC,CACF,8BACc,MAAM,EAClB,SAAS,EAAC,8DAA8D,GACxE,CACH,EACA,aAAa,KAAK,UAAU,IAAI,iBAAiB,KAAK,QAAQ,IAAI,CACjE,KAAC,iBAAiB,KAAG,CACtB,EACD,gBAAM,SAAS,EAAC,8BAA8B,aAC5C,eAAM,SAAS,EAAC,uCAAuC,YAAE,KAAK,GAAQ,EACrE,WAAW,IAAI,CACd,eAAM,SAAS,EAAC,6CAA6C,YAAE,WAAW,GAAQ,CACnF,IACI,EACN,OAAO,IAAI,eAAM,SAAS,EAAC,kCAAkC,YAAE,OAAO,GAAQ,IAC9E,CACJ,GACe,EACjB,QAAQ,IACG,CACf,CAAC;AACJ,CAAC;AAYD,8FAA8F;AAC9F,MAAM,UAAU,WAAW,CAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB;IACxF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AAC7D,CAAC;AAED,gGAAgG;AAChG,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA+C;IAC7F,OAAO,CACL,KAAC,aAAa,IACZ,SAAS,EAAE,EAAE,CACX,uFAAuF,EACvF,SAAS,CACV,YAEA,QAAQ,GACK,CACjB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/ui/tree.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@setsquare/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React Aria components, design tokens, a dashboard shell and a site shell, with a switch between WCAG 2.2 AA and AAA sizing, spacing and contrast.",
   "license": "Apache-2.0",
   "homepage": "https://github.com/Worktree-Amigos/setsquare-ui#readme",
@@ -101,8 +101,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "node scripts/build-css.mjs && tsc -p tsconfig.json && pnpm --filter @setsquare/ui-flows build",
-    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json && pnpm --filter @setsquare/ui-flows typecheck",
+    "build": "node scripts/build-css.mjs && tsc -p tsconfig.json && pnpm --filter @setsquare/ui-flows build && pnpm --filter @setsquare/ui-blocks build",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json && pnpm --filter @setsquare/ui-flows typecheck && pnpm --filter @setsquare/ui-blocks typecheck",
     "lint": "oxlint && node scripts/check-contrast.mjs",
     "format": "oxfmt",
     "format:check": "oxfmt --check",