@surflane/ui 0.1.0 → 0.2.0

package/dist/tree.js

@@ -1,23 +1,23 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { buildProxiedInstance, syncDataLoaderFeature, } from "@headless-tree/core";
-import { useTree } from "@headless-tree/react";
-import { defaultRangeExtractor, useVirtualizer, } from "@tanstack/react-virtual";
-import { ScrollArea } from "./scroll-area.js";
-const normalize = (text) => text.normalize("NFKC").toLocaleLowerCase();
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { buildProxiedInstance, syncDataLoaderFeature, } from '@headless-tree/core';
+import { useTree } from '@headless-tree/react';
+import { defaultRangeExtractor, useVirtualizer, } from '@tanstack/react-virtual';
+import { ScrollArea } from './scroll-area.js';
+const normalize = (text) => text.normalize('NFKC').toLocaleLowerCase();
 /** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
-export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = "single", height = 320, rowHeight: explicitRowHeight, size, virtualized = true, emptyLabel = "No items.", dir, className, }) {
+export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, emptyLabel = 'No items.', dir, className, }) {
     const scheme = useComponentSize(size);
     const touchFloor = React.useSyncExternalStore((listener) => {
-        const query = matchMedia("(max-width: 760px), (pointer: coarse)");
-        query.addEventListener("change", listener);
-        return () => query.removeEventListener("change", listener);
-    }, () => matchMedia("(max-width: 760px), (pointer: coarse)").matches, () => false);
+        const query = matchMedia('(max-width: 760px), (pointer: coarse)');
+        query.addEventListener('change', listener);
+        return () => query.removeEventListener('change', listener);
+    }, () => matchMedia('(max-width: 760px), (pointer: coarse)').matches, () => false);
     const rowHeight = explicitRowHeight ??
-        Math.max(touchFloor && scheme ? 44 : 0, scheme === "small" ? 36 : scheme === "large" ? 52 : 44);
+        Math.max(touchFloor && scheme ? 44 : 0, scheme === 'small' ? 36 : scheme === 'large' ? 52 : 44);
     const rootId = React.useId();
     const model = React.useMemo(() => {
         const data = new Map();
@@ -42,7 +42,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     const expanded = React.useMemo(() => [...new Set(expandedIds ?? localExpanded)].filter((id) => model.data.get(id)?.children?.length), [expandedIds, localExpanded, model]);
     const selected = React.useMemo(() => {
         const ids = [...new Set(selectedIds ?? localSelected)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
-        return selectionMode === "single" ? ids.slice(-1) : ids;
+        return selectionMode === 'single' ? ids.slice(-1) : ids;
     }, [selectedIds, localSelected, model, selectionMode]);
     const visibleIds = React.useMemo(() => {
         const result = [], open = new Set(expanded);
@@ -66,7 +66,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     const viewport = React.useRef(null), container = React.useRef(null);
     const virtualizerRef = React.useRef(null);
     const pendingFocus = React.useRef(null), focusWithin = React.useRef(false), anchor = React.useRef(null);
-    const typeahead = React.useRef({ text: "", time: 0 });
+    const typeahead = React.useRef({ text: '', time: 0 });
     function changeExpanded(ids) {
         const next = [...new Set(ids)];
         if (expandedIds === undefined)
@@ -75,7 +75,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     }
     function changeSelected(ids) {
         const allowed = [...new Set(ids)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
-        const next = selectionMode === "single" ? allowed.slice(-1) : allowed;
+        const next = selectionMode === 'single' ? allowed.slice(-1) : allowed;
         if (selectedIds === undefined)
             setLocalSelected(next);
         onSelectedIdsChange?.(next);
@@ -91,14 +91,14 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             getChildren: (id) => model.data.get(id)?.children?.map((node) => node.id) ?? [],
         },
         state: { expandedItems: expanded, focusedItem: focused },
-        setExpandedItems: (update) => changeExpanded(typeof update === "function" ? update(expanded) : update),
-        setFocusedItem: (update) => setLocalFocus(typeof update === "function" ? update(focused) : update),
+        setExpandedItems: (update) => changeExpanded(typeof update === 'function' ? update(expanded) : update),
+        setFocusedItem: (update) => setLocalFocus(typeof update === 'function' ? update(focused) : update),
         scrollToItem: (item) => virtualizerRef.current?.scrollToIndex(item.getItemMeta().index, {
-            align: "auto",
+            align: 'auto',
         }),
     });
     const items = tree.getItems();
-    const focusedIndex = visibleIds.indexOf(focused ?? "");
+    const focusedIndex = visibleIds.indexOf(focused ?? '');
     const virtualizer = useVirtualizer({
         count: items.length,
         getScrollElement: () => viewport.current,
@@ -121,7 +121,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         pendingFocus.current = item.getId();
         item.setFocused();
         if (virtualized)
-            virtualizer.scrollToIndex(item.getItemMeta().index, { align: "auto" });
+            virtualizer.scrollToIndex(item.getItemMeta().index, { align: 'auto' });
         else if (viewport.current) {
             const top = item.getItemMeta().index * rowHeight;
             if (top < viewport.current.scrollTop)
@@ -157,7 +157,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         const id = item.getId();
         if (item.getItemData().disabled)
             return;
-        if (selectionMode === "single")
+        if (selectionMode === 'single')
             changeSelected([id]);
         else if (range && anchor.current && visibleIds.includes(anchor.current)) {
             const a = visibleIds.indexOf(anchor.current), b = visibleIds.indexOf(id);
@@ -173,9 +173,9 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
     function keydown(event) {
         if (event.defaultPrevented ||
             event.nativeEvent.isComposing ||
-            event.target.closest("button"))
+            event.target.closest('button'))
             return;
-        const targetId = event.target.closest("[data-tree-id]")?.dataset.treeId;
+        const targetId = event.target.closest('[data-tree-id]')?.dataset.treeId;
         const item = targetId
             ? tree.getItemInstance(targetId)
             : focused
@@ -184,20 +184,20 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         if (!item)
             return;
         if ([
-            "ArrowDown",
-            "ArrowUp",
-            "ArrowLeft",
-            "ArrowRight",
-            "Home",
-            "End",
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
         ].includes(event.key))
-            typeahead.current = { text: "", time: 0 };
+            typeahead.current = { text: '', time: 0 };
         const index = item.getItemMeta().index;
-        const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
-        const forward = rtl ? "ArrowLeft" : "ArrowRight", backward = rtl ? "ArrowRight" : "ArrowLeft";
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight', backward = rtl ? 'ArrowRight' : 'ArrowLeft';
         if ((event.ctrlKey || event.metaKey) &&
-            event.key.toLowerCase() === "a" &&
-            selectionMode === "multiple") {
+            event.key.toLowerCase() === 'a' &&
+            selectionMode === 'multiple') {
             event.preventDefault();
             changeSelected(visibleIds);
             return;
@@ -205,26 +205,26 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
         if (event.ctrlKey || event.metaKey || event.altKey)
             return;
         if ([
-            "ArrowDown",
-            "ArrowUp",
-            "Home",
-            "End",
+            'ArrowDown',
+            'ArrowUp',
+            'Home',
+            'End',
             forward,
             backward,
-            "Enter",
-            " ",
-            "*",
+            'Enter',
+            ' ',
+            '*',
         ].includes(event.key))
             event.preventDefault();
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            const next = items[index + (event.key === "ArrowDown" ? 1 : -1)];
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const next = items[index + (event.key === 'ArrowDown' ? 1 : -1)];
             focusItem(next);
-            if (event.shiftKey && selectionMode === "multiple" && next)
+            if (event.shiftKey && selectionMode === 'multiple' && next)
                 select(next, true);
         }
-        else if (event.key === "Home")
+        else if (event.key === 'Home')
             focusItem(items[0]);
-        else if (event.key === "End")
+        else if (event.key === 'End')
             focusItem(items.at(-1));
         else if (event.key === forward &&
             !item.getItemData().disabled &&
@@ -240,9 +240,9 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             else if (item.getItemMeta().level > 0)
                 focusItem(item.getParent());
         }
-        else if (event.key === "Enter" || event.key === " ")
+        else if (event.key === 'Enter' || event.key === ' ')
             select(item, event.shiftKey);
-        else if (event.key === "*")
+        else if (event.key === '*')
             changeExpanded([
                 ...expanded,
                 ...items
@@ -252,7 +252,7 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                     .map((sibling) => sibling.getId()),
             ]);
         else if (event.key.length === 1) {
-            const now = performance.now(), char = normalize(event.key), previous = now - typeahead.current.time < 700 ? typeahead.current.text : "";
+            const now = performance.now(), char = normalize(event.key), previous = now - typeahead.current.time < 700 ? typeahead.current.text : '';
             const prefix = previous === char ? char : previous + char;
             typeahead.current = { text: prefix, time: now };
             for (let offset = 1; offset <= items.length; offset++) {
@@ -271,16 +271,16 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
             .getVirtualItems()
             .map((row) => ({ index: row.index, start: row.start }))
         : items.map((_, index) => ({ index, start: index * rowHeight }));
-    return (_jsx(ScrollArea, { orientation: "vertical", label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: "contain", rootClassName: ["pui-tree-scroll", className].filter(Boolean).join(" "), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: "pui-tree-viewport", children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
+    return (_jsx(ScrollArea, { orientation: 'vertical', label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: ['pui-tree-scroll', className].filter(Boolean).join(' '), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'pui-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
                 container.current = element;
                 containerProps.ref(element);
-            }, dir: dir, className: "pui-tree", "data-ui-size": scheme, "aria-multiselectable": selectionMode === "multiple" || undefined, onKeyDown: keydown, onFocusCapture: () => {
+            }, dir: dir, className: 'pui-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
                 focusWithin.current = true;
             }, onBlurCapture: (event) => {
                 if (event.relatedTarget &&
                     !event.currentTarget.contains(event.relatedTarget)) {
                     focusWithin.current = false;
-                    typeahead.current.text = "";
+                    typeahead.current.text = '';
                 }
             }, style: {
                 blockSize: virtualized
@@ -288,24 +288,24 @@ export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExp
                     : items.length * rowHeight,
             }, children: rows.map(({ index, start }) => {
                 const item = items[index], node = item.getItemData(), props = item.getProps();
-                return (_createElement("div", { ...props, key: item.getId(), className: "pui-tree-item", "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
+                return (_createElement("div", { ...props, key: item.getId(), className: 'pui-tree-item', "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
                         focusItem(item);
                         select(item, event.shiftKey);
                     }, style: {
-                        position: "absolute",
+                        position: 'absolute',
                         insetInline: 0,
                         top: start,
                         blockSize: rowHeight,
                         paddingInlineStart: `calc(var(--space-2) + ${Math.min(item.getItemMeta().level, 8)} * var(--space-4))`,
                     } },
-                    item.isFolder() ? (_jsx("button", { type: "button", className: "pui-tree-toggle", tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? "Collapse" : "Expand"} ${node.label}`, onClick: (event) => {
+                    item.isFolder() ? (_jsx("button", { type: 'button', className: 'pui-tree-toggle', tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? 'Collapse' : 'Expand'} ${node.label}`, onClick: (event) => {
                             event.stopPropagation();
                             focusItem(item);
                             if (item.isExpanded())
                                 item.collapse();
                             else
                                 item.expand();
-                        }, children: _jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "data-expanded": item.isExpanded() || undefined, children: _jsx("path", { d: "m9 5 7 7-7 7" }) }) })) : (_jsx("span", { className: "pui-tree-leaf", "aria-hidden": "true" })),
-                    _jsx("span", { className: "pui-tree-label", children: node.label })));
-            }) })) : (_jsx("div", { role: "status", className: "pui-tree-empty", children: emptyLabel })) }));
+                        }, children: _jsx("svg", { "aria-hidden": 'true', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "data-expanded": item.isExpanded() || undefined, children: _jsx("path", { d: 'm9 5 7 7-7 7' }) }) })) : (_jsx("span", { className: 'pui-tree-leaf', "aria-hidden": 'true' })),
+                    _jsx("span", { className: 'pui-tree-label', children: node.label })));
+            }) })) : (_jsx("div", { role: 'status', className: 'pui-tree-empty', children: emptyLabel })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -101,7 +101,7 @@
     "shiki": "4.5.0"
   },
   "peerDependencies": {
-    "@surflane/design-tokens": "^0.1.0",
+    "@surflane/design-tokens": "^0.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },