@adea-ai/ui 0.142.4 → 0.144.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/composites/accent-picker/accent-picker.d.ts +28 -0
- package/dist/components/composites/accent-picker/accent-picker.d.ts.map +1 -0
- package/dist/components/composites/accent-picker/accent-picker.js +107 -0
- package/dist/components/composites/accent-picker/accent-picker.js.map +1 -0
- package/dist/components/composites/accent-picker/index.d.ts +2 -0
- package/dist/components/composites/accent-picker/index.d.ts.map +1 -0
- package/dist/components/composites/accent-picker/index.js +2 -0
- package/dist/components/composites/icon-picker/icon-picker.d.ts +52 -0
- package/dist/components/composites/icon-picker/icon-picker.d.ts.map +1 -0
- package/dist/components/composites/icon-picker/icon-picker.js +265 -0
- package/dist/components/composites/icon-picker/icon-picker.js.map +1 -0
- package/dist/components/composites/icon-picker/image-data-url.d.ts +42 -0
- package/dist/components/composites/icon-picker/image-data-url.d.ts.map +1 -0
- package/dist/components/composites/icon-picker/image-data-url.js +90 -0
- package/dist/components/composites/icon-picker/image-data-url.js.map +1 -0
- package/dist/components/composites/icon-picker/index.d.ts +4 -0
- package/dist/components/composites/icon-picker/index.d.ts.map +1 -0
- package/dist/components/composites/icon-picker/index.js +4 -0
- package/dist/components/composites/icon-picker/shell-icons.d.ts +264 -0
- package/dist/components/composites/icon-picker/shell-icons.d.ts.map +1 -0
- package/dist/components/composites/icon-picker/shell-icons.js +334 -0
- package/dist/components/composites/icon-picker/shell-icons.js.map +1 -0
- package/dist/components/composites/settings/settings-navigation.js +1 -1
- package/dist/components/composites/settings/settings-navigation.js.map +1 -1
- package/dist/components/composites/settings/settings.d.ts +8 -14
- package/dist/components/composites/settings/settings.d.ts.map +1 -1
- package/dist/components/composites/settings/settings.js +88 -37
- package/dist/components/composites/settings/settings.js.map +1 -1
- package/dist/components/composites/terminal/terminal.js +2 -2
- package/dist/components/composites/terminal/terminal.js.map +1 -1
- package/dist/components/composites/tree/tree.d.ts +6 -0
- package/dist/components/composites/tree/tree.d.ts.map +1 -1
- package/dist/components/composites/tree/tree.js +35 -14
- package/dist/components/composites/tree/tree.js.map +1 -1
- package/dist/components/composites/workspace-switcher/index.d.ts +2 -0
- package/dist/components/composites/workspace-switcher/index.d.ts.map +1 -0
- package/dist/components/composites/workspace-switcher/index.js +2 -0
- package/dist/components/composites/workspace-switcher/workspace-switcher.d.ts +44 -0
- package/dist/components/composites/workspace-switcher/workspace-switcher.d.ts.map +1 -0
- package/dist/components/composites/workspace-switcher/workspace-switcher.js +157 -0
- package/dist/components/composites/workspace-switcher/workspace-switcher.js.map +1 -0
- package/dist/components/layout/shell-rail/index.d.ts +2 -0
- package/dist/components/layout/shell-rail/index.d.ts.map +1 -0
- package/dist/components/layout/shell-rail/index.js +2 -0
- package/dist/components/layout/shell-rail/shell-rail.d.ts +36 -0
- package/dist/components/layout/shell-rail/shell-rail.d.ts.map +1 -0
- package/dist/components/layout/shell-rail/shell-rail.js +124 -0
- package/dist/components/layout/shell-rail/shell-rail.js.map +1 -0
- package/dist/components/layout/shell-top-bar/index.d.ts +2 -0
- package/dist/components/layout/shell-top-bar/index.d.ts.map +1 -0
- package/dist/components/layout/shell-top-bar/index.js +2 -0
- package/dist/components/layout/shell-top-bar/shell-top-bar.d.ts +68 -0
- package/dist/components/layout/shell-top-bar/shell-top-bar.d.ts.map +1 -0
- package/dist/components/layout/shell-top-bar/shell-top-bar.js +135 -0
- package/dist/components/layout/shell-top-bar/shell-top-bar.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -1
- package/dist/r/accent-picker.json +25 -0
- package/dist/r/icon-picker.json +37 -0
- package/dist/r/registry.json +141 -1
- package/dist/r/settings.json +3 -1
- package/dist/r/shell-rail.json +27 -0
- package/dist/r/shell-top-bar.json +23 -0
- package/dist/r/src/components/composites/accent-picker/accent-picker.tsx +106 -0
- package/dist/r/src/components/composites/accent-picker/index.ts +1 -0
- package/dist/r/src/components/composites/icon-picker/icon-picker.tsx +246 -0
- package/dist/r/src/components/composites/icon-picker/image-data-url.ts +107 -0
- package/dist/r/src/components/composites/icon-picker/index.ts +25 -0
- package/dist/r/src/components/composites/icon-picker/shell-icons.ts +166 -0
- package/dist/r/src/components/composites/settings/settings-navigation.tsx +1 -1
- package/dist/r/src/components/composites/settings/settings.tsx +40 -5
- package/dist/r/src/components/composites/tree/tree.tsx +25 -0
- package/dist/r/src/components/composites/workspace-switcher/index.ts +5 -0
- package/dist/r/src/components/composites/workspace-switcher/workspace-switcher.tsx +128 -0
- package/dist/r/src/components/layout/shell-rail/index.ts +1 -0
- package/dist/r/src/components/layout/shell-rail/shell-rail.tsx +120 -0
- package/dist/r/src/components/layout/shell-top-bar/index.ts +1 -0
- package/dist/r/src/components/layout/shell-top-bar/shell-top-bar.tsx +185 -0
- package/dist/r/workspace-switcher.json +26 -0
- package/package.json +1 -1
- package/registry.json +141 -1
- package/src/components/composites/accent-picker/accent-picker.tsx +106 -0
- package/src/components/composites/accent-picker/index.ts +1 -0
- package/src/components/composites/icon-picker/icon-picker.tsx +246 -0
- package/src/components/composites/icon-picker/image-data-url.ts +107 -0
- package/src/components/composites/icon-picker/index.ts +25 -0
- package/src/components/composites/icon-picker/shell-icons.ts +166 -0
- package/src/components/composites/settings/settings-navigation.tsx +1 -1
- package/src/components/composites/settings/settings.tsx +40 -5
- package/src/components/composites/tree/tree.tsx +25 -0
- package/src/components/composites/workspace-switcher/index.ts +5 -0
- package/src/components/composites/workspace-switcher/workspace-switcher.tsx +128 -0
- package/src/components/layout/shell-rail/index.ts +1 -0
- package/src/components/layout/shell-rail/shell-rail.tsx +120 -0
- package/src/components/layout/shell-top-bar/index.ts +1 -0
- package/src/components/layout/shell-top-bar/shell-top-bar.tsx +185 -0
- package/src/index.ts +5 -0
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { cn } from "../../../lib/utils.js";
|
|
2
2
|
import { indexTreeItems, treeNavigationAction } from "./tree-navigation.js";
|
|
3
|
-
import { addEventListener, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
|
|
3
|
+
import { addEventListener, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template, use } from "solid-js/web";
|
|
4
4
|
import { ChevronRight } from "lucide-solid";
|
|
5
|
-
import { createContext, createEffect, createMemo, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
|
|
5
|
+
import { For, Show, createContext, createEffect, createMemo, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
|
|
6
6
|
//#region src/components/composites/tree/tree.tsx
|
|
7
7
|
var _tmpl$ = /*#__PURE__*/ template(`<div>`);
|
|
8
8
|
var _tmpl$2 = /*#__PURE__*/ template(`<div><span></span><span class="min-w-0 flex-1 truncate">`);
|
|
9
|
-
var _tmpl$3 = /*#__PURE__*/ template(`<span class="
|
|
10
|
-
var _tmpl$4 = /*#__PURE__*/ template(`<span class="
|
|
11
|
-
var _tmpl$5 = /*#__PURE__*/ template(`<span
|
|
9
|
+
var _tmpl$3 = /*#__PURE__*/ template(`<span aria-hidden=true data-slot=tree-row-guide class="pointer-events-none absolute inset-y-0 w-px bg-border">`);
|
|
10
|
+
var _tmpl$4 = /*#__PURE__*/ template(`<span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">`);
|
|
11
|
+
var _tmpl$5 = /*#__PURE__*/ template(`<span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">`);
|
|
12
|
+
var _tmpl$6 = /*#__PURE__*/ template(`<span data-slot=tree-row-actions>`);
|
|
12
13
|
var TreeContext = createContext();
|
|
13
14
|
function useTreeContext() {
|
|
14
15
|
const tree = useContext(TreeContext);
|
|
@@ -55,6 +56,7 @@ function Tree(props) {
|
|
|
55
56
|
"onActiveIdChange",
|
|
56
57
|
"onExpand",
|
|
57
58
|
"disclosure",
|
|
59
|
+
"guides",
|
|
58
60
|
"onActivate",
|
|
59
61
|
"onSelectItem",
|
|
60
62
|
"onRequestReveal",
|
|
@@ -180,6 +182,7 @@ function Tree(props) {
|
|
|
180
182
|
activate: (id, event) => local.onActivate?.(id, event),
|
|
181
183
|
expand: (id, expanded) => local.onExpand?.(id, expanded),
|
|
182
184
|
disclosure: () => local.disclosure ?? "row",
|
|
185
|
+
guides: () => local.guides ?? false,
|
|
183
186
|
onActiveIdChange: local.onActiveIdChange
|
|
184
187
|
};
|
|
185
188
|
createEffect(() => {
|
|
@@ -341,6 +344,7 @@ function TreeRow(props) {
|
|
|
341
344
|
},
|
|
342
345
|
get ["class"]() {
|
|
343
346
|
return cn("group/tree-row flex min-h-row-sm w-full min-w-0 items-center gap-1.5 rounded-md pe-1.5 text-left text-sm outline-none transition-colors", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", {
|
|
347
|
+
relative: tree.guides(),
|
|
344
348
|
"bg-primary-subtle text-foreground": local.selected,
|
|
345
349
|
"hover:bg-surface-hover": !local.selected
|
|
346
350
|
}, local.class);
|
|
@@ -352,6 +356,23 @@ function TreeRow(props) {
|
|
|
352
356
|
"onClick": handleClick,
|
|
353
357
|
"onDblClick": handleDoubleClick
|
|
354
358
|
}), false, true);
|
|
359
|
+
insert(_el$2, createComponent(Show, {
|
|
360
|
+
get when() {
|
|
361
|
+
return memo(() => !!tree.guides())() && local.item.level > 1;
|
|
362
|
+
},
|
|
363
|
+
get children() {
|
|
364
|
+
return createComponent(For, {
|
|
365
|
+
get each() {
|
|
366
|
+
return Array.from({ length: local.item.level - 1 }, (_, index) => index);
|
|
367
|
+
},
|
|
368
|
+
children: (index) => (() => {
|
|
369
|
+
var _el$5 = _tmpl$3();
|
|
370
|
+
setStyleProperty(_el$5, "inset-inline-start", `${6 + index * 12 + 7}px`);
|
|
371
|
+
return _el$5;
|
|
372
|
+
})()
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
}), _el$3);
|
|
355
376
|
addEventListener(_el$3, "dblclick", markerTarget() ? handleMarkerDoubleClick : void 0, true);
|
|
356
377
|
addEventListener(_el$3, "click", markerTarget() ? handleMarkerClick : void 0, true);
|
|
357
378
|
addEventListener(_el$3, "mousedown", markerTarget() ? handleMarkerMouseDown : void 0, true);
|
|
@@ -367,18 +388,18 @@ function TreeRow(props) {
|
|
|
367
388
|
insert(_el$2, (() => {
|
|
368
389
|
var _c$2 = memo(() => !!local.leading);
|
|
369
390
|
return () => _c$2() ? (() => {
|
|
370
|
-
var _el$
|
|
371
|
-
insert(_el$
|
|
372
|
-
return _el$
|
|
391
|
+
var _el$6 = _tmpl$4();
|
|
392
|
+
insert(_el$6, () => local.leading);
|
|
393
|
+
return _el$6;
|
|
373
394
|
})() : null;
|
|
374
395
|
})(), _el$4);
|
|
375
396
|
insert(_el$4, () => local.children);
|
|
376
397
|
insert(_el$2, (() => {
|
|
377
398
|
var _c$3 = memo(() => !!local.trailing);
|
|
378
399
|
return () => _c$3() ? (() => {
|
|
379
|
-
var _el$
|
|
380
|
-
insert(_el$
|
|
381
|
-
return _el$
|
|
400
|
+
var _el$7 = _tmpl$5();
|
|
401
|
+
insert(_el$7, () => local.trailing);
|
|
402
|
+
return _el$7;
|
|
382
403
|
})() : null;
|
|
383
404
|
})(), null);
|
|
384
405
|
effect((_p$) => {
|
|
@@ -405,8 +426,8 @@ function TreeRow(props) {
|
|
|
405
426
|
function TreeRowActions(props) {
|
|
406
427
|
const [local, rest] = splitProps(props, ["class", "pinned"]);
|
|
407
428
|
return (() => {
|
|
408
|
-
var _el$
|
|
409
|
-
spread(_el$
|
|
429
|
+
var _el$8 = _tmpl$6();
|
|
430
|
+
spread(_el$8, mergeProps({
|
|
410
431
|
get ["data-pinned"]() {
|
|
411
432
|
return local.pinned ? "" : void 0;
|
|
412
433
|
},
|
|
@@ -414,7 +435,7 @@ function TreeRowActions(props) {
|
|
|
414
435
|
return cn("flex shrink-0 items-center gap-1 opacity-0 transition-opacity ease-out", "group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 data-pinned:opacity-100", local.class);
|
|
415
436
|
}
|
|
416
437
|
}, rest), false, false);
|
|
417
|
-
return _el$
|
|
438
|
+
return _el$8;
|
|
418
439
|
})();
|
|
419
440
|
}
|
|
420
441
|
var handleMarkerMouseDown = (event) => event.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree.js","names":["ComponentProps","JSX","ChevronRight","createContext","createEffect","createMemo","createUniqueId","onCleanup","splitProps","useContext","cn","indexTreeItems","treeNavigationAction","TreeItemDescriptor","TreeNavigationIndex","TreeContextValue","idPrefix","activeId","index","register","id","element","HTMLDivElement","unregister","focusItem","noteFocus","noteBlur","next","EventTarget","activate","event","Event","expand","expanded","disclosure","TreeDisclosure","onActiveIdChange","TreeContext","useTreeContext","tree","Error","TreeAccessibleName","TreeProps","Omit","visibleItems","onExpand","onActivate","onSelectItem","onRequestReveal","onRowSizeChange","blockSize","selectionMode","children","Element","Tree","props","local","rest","effectiveActiveId","candidate","visible","byId","has","ids","rows","Map","rowIdsByElement","WeakMap","pendingFocusId","pendingFocusGuard","FocusEvent","requestedRevealId","focusedId","disposed","isInsideTreeRow","row","closest","focusIsOutsideTree","document","active","activeElement","body","documentElement","rowSizeObserver","ResizeObserver","undefined","entries","entry","get","target","borderBoxSize","HTMLElement","offsetHeight","Number","isFinite","setPendingFocus","removeEventListener","cancelPendingFocus","addEventListener","disconnect","requestReveal","focusWhenMounted","queueMicrotask","focus","context","set","observe","focusWasInside","Boolean","contains","delete","unobserve","fallbackId","handleKeyDown","EventHandler","KeyboardEvent","defaultPrevented","isActionTarget","currentTarget","action","key","preventDefault","type","_$createComponent","Provider","value","_el$","_tmpl$","_$spread","_$mergeProps","aria-multiselectable","class","_$insert","TreeRowProps","item","selected","leading","trailing","onDoubleClick","MouseEvent","TreeRow","registeredId","handleFocusOut","relatedTarget","setRef","nextId","handleFocus","handleClick","handleDoubleClick","position","positionById","markerTarget","expandable","handleMarkerClick","HTMLSpanElement","stopPropagation","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_ref$","composeRefs","ref","_$use","encodeURIComponent","aria-level","level","aria-expanded","_$memo","aria-selected","aria-posinset","aria-setsize","setSize","tabIndex","data-tree-id","data-active","data-selected","data-expanded","String","style","Math","max","_$addEventListener","handleMarkerDoubleClick","handleMarkerMouseDown","_c$","_c$2","_el$5","_tmpl$3","_c$3","_el$6","_tmpl$4","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","TreeRowActions","pinned","_el$7","_tmpl$5","data-pinned","internal","external","_$delegateEvents","_$createComponent","_$mergeProps","_$use","_$memo","_$setAttribute","_$className","_$delegateEvents"],"sources":["../../../../src/components/composites/tree/tree.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { ChevronRight } from 'lucide-solid'\nimport {\n createContext,\n createEffect,\n createMemo,\n createUniqueId,\n onCleanup,\n splitProps,\n useContext,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n indexTreeItems,\n treeNavigationAction,\n type TreeItemDescriptor,\n type TreeNavigationIndex,\n} from './tree-navigation'\n\ntype TreeContextValue = {\n idPrefix: string\n activeId: () => string | null\n index: () => TreeNavigationIndex\n register: (id: string, element: HTMLDivElement) => void\n unregister: (id: string, element: HTMLDivElement | undefined) => void\n focusItem: (id: string) => void\n noteFocus: (id: string) => void\n noteBlur: (next: EventTarget | null) => void\n activate: (id: string, event: Event) => void\n expand: (id: string, expanded: boolean) => void\n disclosure: () => TreeDisclosure\n onActiveIdChange: (id: string) => void\n}\n\nconst TreeContext = createContext<TreeContextValue>()\n\nfunction useTreeContext() {\n const tree = useContext(TreeContext)\n if (!tree) throw new Error('[adea-ui]: TreeRow must be used inside Tree.')\n return tree\n}\n\n/**\n * Who owns the pointer on a row's disclosure chevron.\n *\n * - `row` (default): the chevron is decoration; a click anywhere on the row,\n * chevron included, is a row activation. This is the file-explorer\n * convention, where the host's `onActivate` toggles a folder.\n * - `marker`: the chevron of an expandable row is its own pointer target. It\n * calls `onExpand(id, !expanded)` and nothing else; the rest of the row still\n * activates. For trees where expanding and selecting are independent (a\n * source list that selects a source and separately reveals its details).\n */\nexport type TreeDisclosure = 'row' | 'marker'\n\ntype TreeAccessibleName =\n | { 'aria-label': string; 'aria-labelledby'?: string }\n | { 'aria-label'?: string; 'aria-labelledby': string }\n\nexport type TreeProps = Omit<\n ComponentProps<'div'>,\n 'children' | 'role' | 'tabIndex' | 'onKeyDown' | 'aria-label' | 'aria-labelledby'\n> &\n TreeAccessibleName & {\n /** Complete, ordered projection of currently visible (expanded) items. */\n visibleItems: readonly TreeItemDescriptor[]\n /** The host-owned identity of the row that currently owns roving focus. */\n activeId: string | null\n /**\n * Called when keyboard or pointer navigation changes the active row, and when\n * the active row leaves `visibleItems` (collapsed away, filtered out) and the\n * first visible row takes over as the roving stop.\n */\n onActiveIdChange: (id: string) => void\n /** Called for Left/Right expand and collapse requests. */\n onExpand?: (id: string, expanded: boolean) => void\n /**\n * Opt-in pointer behaviour of the disclosure chevron; see {@link TreeDisclosure}.\n * Keyboard behaviour is identical in both modes: Left/Right expand and collapse.\n */\n disclosure?: TreeDisclosure\n /** Called for Enter or pointer activation. Domain action stays host-owned. */\n onActivate?: (id: string, event: Event) => void\n /** Called for Space selection. Selection state stays host-owned. */\n onSelectItem?: (id: string, event: Event) => void\n /** Ask the host window to mount/reveal an item before focus moves to it. */\n onRequestReveal?: (id: string) => void\n /** Report a mounted row's border-box block size in CSS pixels for host range math. */\n onRowSizeChange?: (id: string, blockSize: number) => void\n /** Declares a multi-select tree to assistive technology. */\n selectionMode?: 'single' | 'multiple'\n children?: JSX.Element\n }\n\n/**\n * Tree.\n *\n * Supplies semantic and keyboard behavior for a tree whose host owns the\n * visible projection, filesystem state, row window and domain actions. The\n * mounted children can be a small virtualized window; `visibleItems` remains\n * the complete ordered projection so keyboard movement and sibling positions\n * do not depend on which rows currently exist in the DOM.\n *\n * Kobalte 0.13.14 has no Tree primitive, so this component implements the\n * WAI-ARIA tree row navigation contract and leaves product state to callbacks.\n *\n * By default the disclosure chevron is decoration and a click anywhere on a\n * row activates it, so a file explorer can toggle a folder from `onActivate`.\n * Reach for `disclosure=\"marker\"` when expanding and selecting are separate\n * decisions: the chevron then calls only `onExpand`, and the rest of the row\n * calls only `onActivate`. The chevron stays `aria-hidden` and out of the tab\n * order in both modes; keyboard expansion is Left/Right either way.\n *\n * Collapsing is the one thing that can move focus without a key or a click on\n * the target row: when the active row leaves `visibleItems`, the first visible\n * row becomes the roving stop and `onActiveIdChange` is called with it. If the\n * removed row held focus, or was the last row the tree saw focused, focus moves\n * to that same row; if it had no focus, only the roving stop moves. Focus that\n * has already gone to a control outside the tree is never pulled back: the tree\n * forgets its last focused row when focus moves to an element outside it, and\n * the roving stop alone moves if that control still has focus when the row is\n * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a\n * keyboard move to a row the host has not mounted) is withdrawn when focus lands\n * outside the tree, and is checked again when a row mounts. This is the same in\n * both `disclosure` modes and for every way a host collapses a row.\n */\nexport function Tree(props: TreeProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'visibleItems',\n 'activeId',\n 'onActiveIdChange',\n 'onExpand',\n 'disclosure',\n 'onActivate',\n 'onSelectItem',\n 'onRequestReveal',\n 'onRowSizeChange',\n 'selectionMode',\n 'children',\n ])\n\n const index = createMemo(() => indexTreeItems(local.visibleItems))\n const effectiveActiveId = createMemo(() => {\n const candidate = local.activeId\n const visible = index()\n return candidate !== null && visible.byId.has(candidate) ? candidate : (visible.ids[0] ?? null)\n })\n const idPrefix = `tree-${createUniqueId()}`\n const rows = new Map<string, HTMLDivElement>()\n const rowIdsByElement = new WeakMap<HTMLDivElement, string>()\n let pendingFocusId: string | null = null\n let pendingFocusGuard: ((event: FocusEvent) => void) | undefined\n let requestedRevealId: string | null = null\n let focusedId: string | null = null\n let disposed = false\n const isInsideTreeRow = (element: Element) => {\n const row = element.closest('[role=\"treeitem\"]')\n return row instanceof HTMLDivElement && rowIdsByElement.has(row)\n }\n // True when a focusable control outside this tree owns focus. Nothing focused\n // (`body`) is not outside: that is where focus falls when a focused row is removed.\n const focusIsOutsideTree = () => {\n if (typeof document === 'undefined') return false\n const active = document.activeElement\n return (\n active instanceof Element &&\n active !== document.body &&\n active !== document.documentElement &&\n !isInsideTreeRow(active)\n )\n }\n const rowSizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver((entries) => {\n if (disposed) return\n for (const entry of entries) {\n const id = rowIdsByElement.get(entry.target as HTMLDivElement)\n const blockSize =\n entry.borderBoxSize[0]?.blockSize ?? (entry.target as HTMLElement).offsetHeight\n if (id !== undefined && Number.isFinite(blockSize) && blockSize > 0)\n local.onRowSizeChange?.(id, blockSize)\n }\n })\n\n // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a\n // virtualised row to mount) is only a request. While one is pending, focus arriving\n // on a control outside the tree withdraws it, so a row mounting later cannot take\n // focus back from a control the user, or the host, has since chosen.\n const setPendingFocus = (id: string | null) => {\n pendingFocusId = id\n if (typeof document === 'undefined') return\n if (id === null) {\n if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)\n pendingFocusGuard = undefined\n } else if (!pendingFocusGuard) {\n pendingFocusGuard = (event) => {\n if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()\n }\n document.addEventListener('focusin', pendingFocusGuard, true)\n }\n }\n // Withdrawing a request also drops the memory of the row it was recovering for:\n // nothing is left to recover.\n const cancelPendingFocus = () => {\n setPendingFocus(null)\n focusedId = null\n }\n\n onCleanup(() => {\n disposed = true\n setPendingFocus(null)\n rowSizeObserver?.disconnect()\n })\n\n const requestReveal = (id: string) => {\n if (requestedRevealId === id) return\n requestedRevealId = id\n local.onRequestReveal?.(id)\n }\n\n const focusWhenMounted = (id: string) => {\n queueMicrotask(() => {\n if (pendingFocusId !== id || effectiveActiveId() !== id) return\n const row = rows.get(id)\n if (!row || typeof document === 'undefined') return\n // Ownership is checked when focus would move, not when it was requested: a\n // control outside the tree may have taken focus since, and keeps it.\n if (focusIsOutsideTree()) {\n cancelPendingFocus()\n return\n }\n row.focus()\n if (document.activeElement === row) setPendingFocus(null)\n })\n }\n\n const focusItem = (id: string) => {\n setPendingFocus(id)\n local.onActiveIdChange(id)\n if (rows.has(id)) requestedRevealId = null\n else requestReveal(id)\n focusWhenMounted(id)\n }\n\n const context: TreeContextValue = {\n idPrefix,\n activeId: effectiveActiveId,\n index,\n register: (id, element) => {\n rows.set(id, element)\n rowIdsByElement.set(element, id)\n rowSizeObserver?.observe(element)\n if (requestedRevealId === id) requestedRevealId = null\n if (pendingFocusId === id) focusWhenMounted(id)\n },\n unregister: (id, element) => {\n if (rows.get(id) !== element) return\n const focusWasInside =\n !disposed &&\n Boolean(\n element && typeof document !== 'undefined' && element.contains(document.activeElement)\n )\n rows.delete(id)\n if (element) {\n rowIdsByElement.delete(element)\n rowSizeObserver?.unobserve(element)\n }\n if (requestedRevealId === id) requestedRevealId = null\n if (focusWasInside) {\n queueMicrotask(() => {\n const fallbackId = effectiveActiveId()\n if (disposed || fallbackId === null || pendingFocusId === fallbackId) return\n // Focus fell out of the removed row, but it may have been given to a control\n // outside the tree before this ran. Only nothing-focused (body) recovers.\n if (focusIsOutsideTree()) {\n focusedId = null\n return\n }\n focusItem(fallbackId)\n })\n }\n },\n focusItem,\n noteFocus: (id) => {\n focusedId = id\n },\n noteBlur: (next) => {\n // Focus moving to an element outside this tree ends the memory of the last\n // focused row and withdraws any focus the tree was still waiting to give a\n // row. A null target (focus to nothing, or the window losing focus) is\n // ambiguous, so both stay for the recovery below.\n if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()\n },\n activate: (id, event) => local.onActivate?.(id, event),\n expand: (id, expanded) => local.onExpand?.(id, expanded),\n disclosure: () => local.disclosure ?? 'row',\n onActiveIdChange: local.onActiveIdChange,\n }\n\n // A filtered, collapsed-away or removed active ID falls back to the first\n // visible item. This keeps one treeitem in the sequential tab order while\n // notifying the host.\n createEffect(() => {\n const activeId = effectiveActiveId()\n if (activeId === null) return\n // If the projection removes the last row that took focus (a host filter, or\n // an ancestor collapsing), move focus to the same fallback that now owns the\n // roving tab stop, unless a control outside the tree has focus: that control\n // keeps it, and only the roving stop moves.\n if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {\n if (focusIsOutsideTree()) {\n focusedId = null\n if (local.activeId !== activeId) local.onActiveIdChange(activeId)\n } else {\n focusItem(activeId)\n }\n } else if (local.activeId !== activeId) {\n local.onActiveIdChange(activeId)\n }\n // Preserve the active row in a caller-owned virtual window, including when\n // the pane mounts with its saved active row outside the initial render range.\n if (!rows.has(activeId)) requestReveal(activeId)\n if (pendingFocusId === activeId) focusWhenMounted(activeId)\n })\n\n const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n if (event.defaultPrevented || isActionTarget(event.target, event.currentTarget)) return\n\n const action = treeNavigationAction(index(), effectiveActiveId(), event.key)\n if (!action) return\n event.preventDefault()\n\n switch (action.type) {\n case 'focus':\n focusItem(action.id)\n break\n case 'expand':\n local.onExpand?.(action.id, action.expanded)\n break\n case 'activate':\n local.onActivate?.(action.id, event)\n break\n case 'select':\n local.onSelectItem?.(action.id, event)\n break\n }\n }\n\n return (\n <TreeContext.Provider value={context}>\n <div\n {...rest}\n role=\"tree\"\n aria-multiselectable={local.selectionMode === 'multiple' ? 'true' : undefined}\n data-slot=\"tree\"\n class={cn(\n /* A virtualized host remounts rows as it scrolls; scroll anchoring\n would latch onto the focused row and fight the scrollbar. */\n 'flex min-w-0 flex-col [overflow-anchor:none]',\n local.class\n )}\n onKeyDown={handleKeyDown}\n >\n {local.children}\n </div>\n </TreeContext.Provider>\n )\n}\n\nexport type TreeRowProps = Omit<\n ComponentProps<'div'>,\n | 'children'\n | 'role'\n | 'tabIndex'\n | 'onClick'\n | 'onFocus'\n | 'onDoubleClick'\n | 'style'\n | 'aria-level'\n | 'aria-expanded'\n | 'aria-selected'\n | 'aria-posinset'\n | 'aria-setsize'\n> & {\n item: TreeItemDescriptor\n /** Host-owned selection state; omitted for non-selectable trees. */\n selected?: boolean\n leading?: JSX.Element\n trailing?: JSX.Element\n children: JSX.Element\n onDoubleClick?: (id: string, event: MouseEvent & { currentTarget: HTMLDivElement }) => void\n}\n\n/**\n * TreeRow.\n *\n * Keeps the donor's disclosure marker, leading file/folder affordance, primary\n * label and trailing-action hierarchy while replacing the donor's button and\n * runtime callbacks with a shared treeitem and host-owned slots/actions.\n *\n * With `Tree`'s `disclosure=\"marker\"` the chevron of an expandable row is a\n * separate pointer target (`data-slot=\"tree-row-disclosure\"`) that only calls\n * `onExpand`. It is not focusable and has no role: the row remains the single\n * focus stop, Enter and Space still activate and select, and Left/Right still\n * expand and collapse, so the marker adds a pointer path and nothing else.\n * Pressing it does not move focus or the roving stop to its row; if the toggle\n * hides the focused row, `Tree` recovers focus as it does for any collapse (see\n * the `Tree` comment and docs/tree.md).\n */\nexport function TreeRow(props: TreeRowProps) {\n const tree = useTreeContext()\n const [local, rest] = splitProps(props, [\n 'class',\n 'item',\n 'selected',\n 'leading',\n 'trailing',\n 'children',\n 'onDoubleClick',\n 'ref',\n ])\n\n let row: HTMLDivElement | undefined\n let registeredId: string | undefined\n const id = () => local.item.id\n\n const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)\n\n onCleanup(() => {\n row?.removeEventListener('focusout', handleFocusOut)\n tree.unregister(registeredId ?? id(), row)\n })\n\n const setRef = (element: HTMLDivElement) => {\n row = element\n registeredId = id()\n tree.register(registeredId, element)\n // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.\n element.addEventListener('focusout', handleFocusOut)\n }\n\n createEffect(() => {\n const nextId = id()\n if (!row || registeredId === nextId) return\n if (registeredId !== undefined) tree.unregister(registeredId, row)\n registeredId = nextId\n tree.register(nextId, row)\n })\n\n const handleFocus = () => {\n tree.noteFocus(id())\n if (tree.activeId() !== id()) tree.onActiveIdChange(id())\n }\n\n const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n if (isActionTarget(event.target, event.currentTarget)) return\n tree.focusItem(id())\n tree.activate(id(), event)\n }\n\n const handleDoubleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n if (isActionTarget(event.target, event.currentTarget)) return\n local.onDoubleClick?.(id(), event)\n }\n\n const position = () => tree.index().positionById.get(id())\n // Only an expandable row has a chevron to press; a leaf's marker slot stays\n // part of the row so a click there is an ordinary row click.\n const markerTarget = () => tree.disclosure() === 'marker' && local.item.expandable\n\n const handleMarkerClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n // The row's own handler would focus and activate the row.\n event.stopPropagation()\n tree.expand(id(), !local.item.expanded)\n }\n return (\n <div\n {...rest}\n ref={composeRefs(setRef, () => local.ref)}\n id={rest.id ?? `${tree.idPrefix}-item-${encodeURIComponent(id())}`}\n role=\"treeitem\"\n aria-level={local.item.level}\n aria-expanded={local.item.expandable ? (local.item.expanded ? 'true' : 'false') : undefined}\n aria-selected={local.selected === undefined ? undefined : local.selected ? 'true' : 'false'}\n aria-posinset={position()?.position}\n aria-setsize={position()?.setSize}\n tabIndex={tree.activeId() === id() ? 0 : -1}\n data-tree-id={id()}\n data-active={tree.activeId() === id() ? '' : undefined}\n data-selected={local.selected ? '' : undefined}\n data-expanded={local.item.expandable ? String(local.item.expanded) : undefined}\n class={cn(\n 'group/tree-row flex min-h-row-sm w-full min-w-0 items-center gap-1.5 rounded-md pe-1.5 text-left text-sm outline-none transition-colors',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n {\n 'bg-primary-subtle text-foreground': local.selected,\n 'hover:bg-surface-hover': !local.selected,\n },\n local.class\n )}\n style={{ 'padding-inline-start': `${6 + Math.max(0, local.item.level - 1) * 12}px` }}\n onFocus={handleFocus}\n onClick={handleClick}\n onDblClick={handleDoubleClick}\n >\n <span\n data-slot={markerTarget() ? 'tree-row-disclosure' : undefined}\n class={cn(\n 'flex',\n !markerTarget() && 'size-3.5',\n 'shrink-0 items-center justify-center text-muted-foreground',\n /* The glyph stays 14px wide but the target is not: it takes the row's full\n height (a flex child's `self-stretch`, so it follows row density and a\n tall trailing control) and the pseudo-element widens it to 26px, which\n stops at the row's own padding and gap, never over the icon or label. */\n markerTarget() &&\n 'relative w-3.5 cursor-pointer self-stretch hover:text-foreground after:absolute after:inset-y-0 after:-inset-x-1.5'\n )}\n onMouseDown={markerTarget() ? handleMarkerMouseDown : undefined}\n onClick={markerTarget() ? handleMarkerClick : undefined}\n onDblClick={markerTarget() ? handleMarkerDoubleClick : undefined}\n >\n {local.item.expandable ? (\n <ChevronRight\n aria-hidden=\"true\"\n class={cn('size-3.5 transition-transform', local.item.expanded && 'rotate-90')}\n />\n ) : null}\n </span>\n {local.leading ? (\n <span class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n {local.leading}\n </span>\n ) : null}\n <span class=\"min-w-0 flex-1 truncate\">{local.children}</span>\n {local.trailing ? (\n <span class=\"ms-auto flex shrink-0 items-center gap-1 text-muted-foreground\">\n {local.trailing}\n </span>\n ) : null}\n </div>\n )\n}\n\n/**\n * TreeRowActions.\n *\n * Row-level commands (rename, copy, delete) that stay out of the way until the\n * row is hovered or holds focus, so a long tree reads as names rather than a\n * wall of buttons. Put it in `TreeRow`'s `trailing` slot beside any status that\n * must stay visible. `pinned` keeps the actions shown, e.g. while a destructive\n * action waits for its confirming second press.\n */\nexport function TreeRowActions(props: ComponentProps<'span'> & { pinned?: boolean }) {\n const [local, rest] = splitProps(props, ['class', 'pinned'])\n return (\n <span\n data-slot=\"tree-row-actions\"\n data-pinned={local.pinned ? '' : undefined}\n class={cn(\n 'flex shrink-0 items-center gap-1 opacity-0 transition-opacity ease-out',\n 'group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 data-pinned:opacity-100',\n local.class\n )}\n {...rest}\n />\n )\n}\n\n// Pressing the chevron must not move focus to its row: a mousedown on a\n// non-focusable child would otherwise focus the row, making it the roving stop\n// (and notifying `onActiveIdChange`) for what is a disclosure toggle, not a\n// selection. The press itself leaves focus where it was, so Left/Right keep\n// acting on the row the keyboard user left off at. It cannot stop the toggle\n// from hiding that row; `Tree` then recovers focus onto the first visible row.\nconst handleMarkerMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) =>\n event.preventDefault()\n// A double-click is two toggles; it must not also reach `onDoubleClick`\n// (rename, open) as though the row itself had been double-clicked.\nconst handleMarkerDoubleClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) =>\n event.stopPropagation()\n\nfunction isActionTarget(target: EventTarget | null, currentTarget: HTMLElement): boolean {\n if (!(target instanceof Element) || target === currentTarget) return false\n return Boolean(\n target.closest(\n 'a, button, input, textarea, select, [contenteditable=\"true\"], [role=\"button\"], [data-tree-keyboard-stop]'\n )\n )\n}\n\nfunction composeRefs(\n internal: (element: HTMLDivElement) => void,\n external: () => ComponentProps<'div'>['ref']\n): (element: HTMLDivElement) => void {\n return (element) => {\n internal(element)\n const ref = external()\n if (typeof ref === 'function') ref(element)\n }\n}\n\nexport type { TreeItemDescriptor } from './tree-navigation'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tree.js","names":["ComponentProps","JSX","ChevronRight","createContext","createEffect","createMemo","createUniqueId","For","onCleanup","Show","splitProps","useContext","cn","indexTreeItems","treeNavigationAction","TreeItemDescriptor","TreeNavigationIndex","TreeContextValue","idPrefix","activeId","index","register","id","element","HTMLDivElement","unregister","focusItem","noteFocus","noteBlur","next","EventTarget","activate","event","Event","expand","expanded","disclosure","TreeDisclosure","guides","onActiveIdChange","TreeContext","useTreeContext","tree","Error","TreeAccessibleName","TreeProps","Omit","visibleItems","onExpand","onActivate","onSelectItem","onRequestReveal","onRowSizeChange","blockSize","selectionMode","children","Element","Tree","props","local","rest","effectiveActiveId","candidate","visible","byId","has","ids","rows","Map","rowIdsByElement","WeakMap","pendingFocusId","pendingFocusGuard","FocusEvent","requestedRevealId","focusedId","disposed","isInsideTreeRow","row","closest","focusIsOutsideTree","document","active","activeElement","body","documentElement","rowSizeObserver","ResizeObserver","undefined","entries","entry","get","target","borderBoxSize","HTMLElement","offsetHeight","Number","isFinite","setPendingFocus","removeEventListener","cancelPendingFocus","addEventListener","disconnect","requestReveal","focusWhenMounted","queueMicrotask","focus","context","set","observe","focusWasInside","Boolean","contains","delete","unobserve","fallbackId","handleKeyDown","EventHandler","KeyboardEvent","defaultPrevented","isActionTarget","currentTarget","action","key","preventDefault","type","_$createComponent","Provider","value","_el$","_tmpl$","_$spread","_$mergeProps","aria-multiselectable","class","_$insert","TreeRowProps","item","selected","leading","trailing","onDoubleClick","MouseEvent","TreeRow","registeredId","handleFocusOut","relatedTarget","setRef","nextId","handleFocus","handleClick","handleDoubleClick","position","positionById","markerTarget","expandable","handleMarkerClick","HTMLSpanElement","stopPropagation","_el$2","_tmpl$2","_el$3","firstChild","_el$4","nextSibling","_ref$","composeRefs","ref","_$use","encodeURIComponent","aria-level","level","aria-expanded","_$memo","aria-selected","aria-posinset","aria-setsize","setSize","tabIndex","data-tree-id","data-active","data-selected","data-expanded","String","relative","style","Math","max","when","each","Array","from","length","_","_el$5","_tmpl$3","_$setStyleProperty","_$addEventListener","handleMarkerDoubleClick","handleMarkerMouseDown","_c$","_c$2","_el$6","_tmpl$4","_c$3","_el$7","_tmpl$5","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$className","TreeRowActions","pinned","_el$8","_tmpl$6","data-pinned","internal","external","_$delegateEvents","_$createComponent","_$mergeProps","_$use","_$memo","_$setAttribute","_$className","_$delegateEvents"],"sources":["../../../../src/components/composites/tree/tree.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { ChevronRight } from 'lucide-solid'\nimport {\n createContext,\n createEffect,\n createMemo,\n createUniqueId,\n For,\n onCleanup,\n Show,\n splitProps,\n useContext,\n} from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n indexTreeItems,\n treeNavigationAction,\n type TreeItemDescriptor,\n type TreeNavigationIndex,\n} from './tree-navigation'\n\ntype TreeContextValue = {\n idPrefix: string\n activeId: () => string | null\n index: () => TreeNavigationIndex\n register: (id: string, element: HTMLDivElement) => void\n unregister: (id: string, element: HTMLDivElement | undefined) => void\n focusItem: (id: string) => void\n noteFocus: (id: string) => void\n noteBlur: (next: EventTarget | null) => void\n activate: (id: string, event: Event) => void\n expand: (id: string, expanded: boolean) => void\n disclosure: () => TreeDisclosure\n guides: () => boolean\n onActiveIdChange: (id: string) => void\n}\n\nconst TreeContext = createContext<TreeContextValue>()\n\nfunction useTreeContext() {\n const tree = useContext(TreeContext)\n if (!tree) throw new Error('[adea-ui]: TreeRow must be used inside Tree.')\n return tree\n}\n\n/**\n * Who owns the pointer on a row's disclosure chevron.\n *\n * - `row` (default): the chevron is decoration; a click anywhere on the row,\n * chevron included, is a row activation. This is the file-explorer\n * convention, where the host's `onActivate` toggles a folder.\n * - `marker`: the chevron of an expandable row is its own pointer target. It\n * calls `onExpand(id, !expanded)` and nothing else; the rest of the row still\n * activates. For trees where expanding and selecting are independent (a\n * source list that selects a source and separately reveals its details).\n */\nexport type TreeDisclosure = 'row' | 'marker'\n\ntype TreeAccessibleName =\n | { 'aria-label': string; 'aria-labelledby'?: string }\n | { 'aria-label'?: string; 'aria-labelledby': string }\n\nexport type TreeProps = Omit<\n ComponentProps<'div'>,\n 'children' | 'role' | 'tabIndex' | 'onKeyDown' | 'aria-label' | 'aria-labelledby'\n> &\n TreeAccessibleName & {\n /** Complete, ordered projection of currently visible (expanded) items. */\n visibleItems: readonly TreeItemDescriptor[]\n /** The host-owned identity of the row that currently owns roving focus. */\n activeId: string | null\n /**\n * Called when keyboard or pointer navigation changes the active row, and when\n * the active row leaves `visibleItems` (collapsed away, filtered out) and the\n * first visible row takes over as the roving stop.\n */\n onActiveIdChange: (id: string) => void\n /** Called for Left/Right expand and collapse requests. */\n onExpand?: (id: string, expanded: boolean) => void\n /**\n * Opt-in pointer behaviour of the disclosure chevron; see {@link TreeDisclosure}.\n * Keyboard behaviour is identical in both modes: Left/Right expand and collapse.\n */\n disclosure?: TreeDisclosure\n /**\n * Draw a vertical guide line down each ancestor level of a nested row, so a\n * group of children reads as belonging to its parent. Off by default: a flat\n * list or a dense file explorer carries its own rhythm.\n */\n guides?: boolean\n /** Called for Enter or pointer activation. Domain action stays host-owned. */\n onActivate?: (id: string, event: Event) => void\n /** Called for Space selection. Selection state stays host-owned. */\n onSelectItem?: (id: string, event: Event) => void\n /** Ask the host window to mount/reveal an item before focus moves to it. */\n onRequestReveal?: (id: string) => void\n /** Report a mounted row's border-box block size in CSS pixels for host range math. */\n onRowSizeChange?: (id: string, blockSize: number) => void\n /** Declares a multi-select tree to assistive technology. */\n selectionMode?: 'single' | 'multiple'\n children?: JSX.Element\n }\n\n/**\n * Tree.\n *\n * Supplies semantic and keyboard behavior for a tree whose host owns the\n * visible projection, filesystem state, row window and domain actions. The\n * mounted children can be a small virtualized window; `visibleItems` remains\n * the complete ordered projection so keyboard movement and sibling positions\n * do not depend on which rows currently exist in the DOM.\n *\n * Kobalte 0.13.14 has no Tree primitive, so this component implements the\n * WAI-ARIA tree row navigation contract and leaves product state to callbacks.\n *\n * By default the disclosure chevron is decoration and a click anywhere on a\n * row activates it, so a file explorer can toggle a folder from `onActivate`.\n * Reach for `disclosure=\"marker\"` when expanding and selecting are separate\n * decisions: the chevron then calls only `onExpand`, and the rest of the row\n * calls only `onActivate`. The chevron stays `aria-hidden` and out of the tab\n * order in both modes; keyboard expansion is Left/Right either way.\n *\n * Collapsing is the one thing that can move focus without a key or a click on\n * the target row: when the active row leaves `visibleItems`, the first visible\n * row becomes the roving stop and `onActiveIdChange` is called with it. If the\n * removed row held focus, or was the last row the tree saw focused, focus moves\n * to that same row; if it had no focus, only the roving stop moves. Focus that\n * has already gone to a control outside the tree is never pulled back: the tree\n * forgets its last focused row when focus moves to an element outside it, and\n * the roving stop alone moves if that control still has focus when the row is\n * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a\n * keyboard move to a row the host has not mounted) is withdrawn when focus lands\n * outside the tree, and is checked again when a row mounts. This is the same in\n * both `disclosure` modes and for every way a host collapses a row.\n */\nexport function Tree(props: TreeProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'visibleItems',\n 'activeId',\n 'onActiveIdChange',\n 'onExpand',\n 'disclosure',\n 'guides',\n 'onActivate',\n 'onSelectItem',\n 'onRequestReveal',\n 'onRowSizeChange',\n 'selectionMode',\n 'children',\n ])\n\n const index = createMemo(() => indexTreeItems(local.visibleItems))\n const effectiveActiveId = createMemo(() => {\n const candidate = local.activeId\n const visible = index()\n return candidate !== null && visible.byId.has(candidate) ? candidate : (visible.ids[0] ?? null)\n })\n const idPrefix = `tree-${createUniqueId()}`\n const rows = new Map<string, HTMLDivElement>()\n const rowIdsByElement = new WeakMap<HTMLDivElement, string>()\n let pendingFocusId: string | null = null\n let pendingFocusGuard: ((event: FocusEvent) => void) | undefined\n let requestedRevealId: string | null = null\n let focusedId: string | null = null\n let disposed = false\n const isInsideTreeRow = (element: Element) => {\n const row = element.closest('[role=\"treeitem\"]')\n return row instanceof HTMLDivElement && rowIdsByElement.has(row)\n }\n // True when a focusable control outside this tree owns focus. Nothing focused\n // (`body`) is not outside: that is where focus falls when a focused row is removed.\n const focusIsOutsideTree = () => {\n if (typeof document === 'undefined') return false\n const active = document.activeElement\n return (\n active instanceof Element &&\n active !== document.body &&\n active !== document.documentElement &&\n !isInsideTreeRow(active)\n )\n }\n const rowSizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver((entries) => {\n if (disposed) return\n for (const entry of entries) {\n const id = rowIdsByElement.get(entry.target as HTMLDivElement)\n const blockSize =\n entry.borderBoxSize[0]?.blockSize ?? (entry.target as HTMLElement).offsetHeight\n if (id !== undefined && Number.isFinite(blockSize) && blockSize > 0)\n local.onRowSizeChange?.(id, blockSize)\n }\n })\n\n // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a\n // virtualised row to mount) is only a request. While one is pending, focus arriving\n // on a control outside the tree withdraws it, so a row mounting later cannot take\n // focus back from a control the user, or the host, has since chosen.\n const setPendingFocus = (id: string | null) => {\n pendingFocusId = id\n if (typeof document === 'undefined') return\n if (id === null) {\n if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)\n pendingFocusGuard = undefined\n } else if (!pendingFocusGuard) {\n pendingFocusGuard = (event) => {\n if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()\n }\n document.addEventListener('focusin', pendingFocusGuard, true)\n }\n }\n // Withdrawing a request also drops the memory of the row it was recovering for:\n // nothing is left to recover.\n const cancelPendingFocus = () => {\n setPendingFocus(null)\n focusedId = null\n }\n\n onCleanup(() => {\n disposed = true\n setPendingFocus(null)\n rowSizeObserver?.disconnect()\n })\n\n const requestReveal = (id: string) => {\n if (requestedRevealId === id) return\n requestedRevealId = id\n local.onRequestReveal?.(id)\n }\n\n const focusWhenMounted = (id: string) => {\n queueMicrotask(() => {\n if (pendingFocusId !== id || effectiveActiveId() !== id) return\n const row = rows.get(id)\n if (!row || typeof document === 'undefined') return\n // Ownership is checked when focus would move, not when it was requested: a\n // control outside the tree may have taken focus since, and keeps it.\n if (focusIsOutsideTree()) {\n cancelPendingFocus()\n return\n }\n row.focus()\n if (document.activeElement === row) setPendingFocus(null)\n })\n }\n\n const focusItem = (id: string) => {\n setPendingFocus(id)\n local.onActiveIdChange(id)\n if (rows.has(id)) requestedRevealId = null\n else requestReveal(id)\n focusWhenMounted(id)\n }\n\n const context: TreeContextValue = {\n idPrefix,\n activeId: effectiveActiveId,\n index,\n register: (id, element) => {\n rows.set(id, element)\n rowIdsByElement.set(element, id)\n rowSizeObserver?.observe(element)\n if (requestedRevealId === id) requestedRevealId = null\n if (pendingFocusId === id) focusWhenMounted(id)\n },\n unregister: (id, element) => {\n if (rows.get(id) !== element) return\n const focusWasInside =\n !disposed &&\n Boolean(\n element && typeof document !== 'undefined' && element.contains(document.activeElement)\n )\n rows.delete(id)\n if (element) {\n rowIdsByElement.delete(element)\n rowSizeObserver?.unobserve(element)\n }\n if (requestedRevealId === id) requestedRevealId = null\n if (focusWasInside) {\n queueMicrotask(() => {\n const fallbackId = effectiveActiveId()\n if (disposed || fallbackId === null || pendingFocusId === fallbackId) return\n // Focus fell out of the removed row, but it may have been given to a control\n // outside the tree before this ran. Only nothing-focused (body) recovers.\n if (focusIsOutsideTree()) {\n focusedId = null\n return\n }\n focusItem(fallbackId)\n })\n }\n },\n focusItem,\n noteFocus: (id) => {\n focusedId = id\n },\n noteBlur: (next) => {\n // Focus moving to an element outside this tree ends the memory of the last\n // focused row and withdraws any focus the tree was still waiting to give a\n // row. A null target (focus to nothing, or the window losing focus) is\n // ambiguous, so both stay for the recovery below.\n if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()\n },\n activate: (id, event) => local.onActivate?.(id, event),\n expand: (id, expanded) => local.onExpand?.(id, expanded),\n disclosure: () => local.disclosure ?? 'row',\n guides: () => local.guides ?? false,\n onActiveIdChange: local.onActiveIdChange,\n }\n\n // A filtered, collapsed-away or removed active ID falls back to the first\n // visible item. This keeps one treeitem in the sequential tab order while\n // notifying the host.\n createEffect(() => {\n const activeId = effectiveActiveId()\n if (activeId === null) return\n // If the projection removes the last row that took focus (a host filter, or\n // an ancestor collapsing), move focus to the same fallback that now owns the\n // roving tab stop, unless a control outside the tree has focus: that control\n // keeps it, and only the roving stop moves.\n if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {\n if (focusIsOutsideTree()) {\n focusedId = null\n if (local.activeId !== activeId) local.onActiveIdChange(activeId)\n } else {\n focusItem(activeId)\n }\n } else if (local.activeId !== activeId) {\n local.onActiveIdChange(activeId)\n }\n // Preserve the active row in a caller-owned virtual window, including when\n // the pane mounts with its saved active row outside the initial render range.\n if (!rows.has(activeId)) requestReveal(activeId)\n if (pendingFocusId === activeId) focusWhenMounted(activeId)\n })\n\n const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n if (event.defaultPrevented || isActionTarget(event.target, event.currentTarget)) return\n\n const action = treeNavigationAction(index(), effectiveActiveId(), event.key)\n if (!action) return\n event.preventDefault()\n\n switch (action.type) {\n case 'focus':\n focusItem(action.id)\n break\n case 'expand':\n local.onExpand?.(action.id, action.expanded)\n break\n case 'activate':\n local.onActivate?.(action.id, event)\n break\n case 'select':\n local.onSelectItem?.(action.id, event)\n break\n }\n }\n\n return (\n <TreeContext.Provider value={context}>\n <div\n {...rest}\n role=\"tree\"\n aria-multiselectable={local.selectionMode === 'multiple' ? 'true' : undefined}\n data-slot=\"tree\"\n class={cn(\n /* A virtualized host remounts rows as it scrolls; scroll anchoring\n would latch onto the focused row and fight the scrollbar. */\n 'flex min-w-0 flex-col [overflow-anchor:none]',\n local.class\n )}\n onKeyDown={handleKeyDown}\n >\n {local.children}\n </div>\n </TreeContext.Provider>\n )\n}\n\nexport type TreeRowProps = Omit<\n ComponentProps<'div'>,\n | 'children'\n | 'role'\n | 'tabIndex'\n | 'onClick'\n | 'onFocus'\n | 'onDoubleClick'\n | 'style'\n | 'aria-level'\n | 'aria-expanded'\n | 'aria-selected'\n | 'aria-posinset'\n | 'aria-setsize'\n> & {\n item: TreeItemDescriptor\n /** Host-owned selection state; omitted for non-selectable trees. */\n selected?: boolean\n leading?: JSX.Element\n trailing?: JSX.Element\n children: JSX.Element\n onDoubleClick?: (id: string, event: MouseEvent & { currentTarget: HTMLDivElement }) => void\n}\n\n/**\n * TreeRow.\n *\n * Keeps the donor's disclosure marker, leading file/folder affordance, primary\n * label and trailing-action hierarchy while replacing the donor's button and\n * runtime callbacks with a shared treeitem and host-owned slots/actions.\n *\n * With `Tree`'s `disclosure=\"marker\"` the chevron of an expandable row is a\n * separate pointer target (`data-slot=\"tree-row-disclosure\"`) that only calls\n * `onExpand`. It is not focusable and has no role: the row remains the single\n * focus stop, Enter and Space still activate and select, and Left/Right still\n * expand and collapse, so the marker adds a pointer path and nothing else.\n * Pressing it does not move focus or the roving stop to its row; if the toggle\n * hides the focused row, `Tree` recovers focus as it does for any collapse (see\n * the `Tree` comment and docs/tree.md).\n */\nexport function TreeRow(props: TreeRowProps) {\n const tree = useTreeContext()\n const [local, rest] = splitProps(props, [\n 'class',\n 'item',\n 'selected',\n 'leading',\n 'trailing',\n 'children',\n 'onDoubleClick',\n 'ref',\n ])\n\n let row: HTMLDivElement | undefined\n let registeredId: string | undefined\n const id = () => local.item.id\n\n const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)\n\n onCleanup(() => {\n row?.removeEventListener('focusout', handleFocusOut)\n tree.unregister(registeredId ?? id(), row)\n })\n\n const setRef = (element: HTMLDivElement) => {\n row = element\n registeredId = id()\n tree.register(registeredId, element)\n // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.\n element.addEventListener('focusout', handleFocusOut)\n }\n\n createEffect(() => {\n const nextId = id()\n if (!row || registeredId === nextId) return\n if (registeredId !== undefined) tree.unregister(registeredId, row)\n registeredId = nextId\n tree.register(nextId, row)\n })\n\n const handleFocus = () => {\n tree.noteFocus(id())\n if (tree.activeId() !== id()) tree.onActiveIdChange(id())\n }\n\n const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n if (isActionTarget(event.target, event.currentTarget)) return\n tree.focusItem(id())\n tree.activate(id(), event)\n }\n\n const handleDoubleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n if (isActionTarget(event.target, event.currentTarget)) return\n local.onDoubleClick?.(id(), event)\n }\n\n const position = () => tree.index().positionById.get(id())\n // Only an expandable row has a chevron to press; a leaf's marker slot stays\n // part of the row so a click there is an ordinary row click.\n const markerTarget = () => tree.disclosure() === 'marker' && local.item.expandable\n\n const handleMarkerClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n // The row's own handler would focus and activate the row.\n event.stopPropagation()\n tree.expand(id(), !local.item.expanded)\n }\n return (\n <div\n {...rest}\n ref={composeRefs(setRef, () => local.ref)}\n id={rest.id ?? `${tree.idPrefix}-item-${encodeURIComponent(id())}`}\n role=\"treeitem\"\n aria-level={local.item.level}\n aria-expanded={local.item.expandable ? (local.item.expanded ? 'true' : 'false') : undefined}\n aria-selected={local.selected === undefined ? undefined : local.selected ? 'true' : 'false'}\n aria-posinset={position()?.position}\n aria-setsize={position()?.setSize}\n tabIndex={tree.activeId() === id() ? 0 : -1}\n data-tree-id={id()}\n data-active={tree.activeId() === id() ? '' : undefined}\n data-selected={local.selected ? '' : undefined}\n data-expanded={local.item.expandable ? String(local.item.expanded) : undefined}\n class={cn(\n 'group/tree-row flex min-h-row-sm w-full min-w-0 items-center gap-1.5 rounded-md pe-1.5 text-left text-sm outline-none transition-colors',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n {\n // Guide lines are positioned against the row; without them it keeps its original classes.\n relative: tree.guides(),\n 'bg-primary-subtle text-foreground': local.selected,\n 'hover:bg-surface-hover': !local.selected,\n },\n local.class\n )}\n style={{ 'padding-inline-start': `${6 + Math.max(0, local.item.level - 1) * 12}px` }}\n onFocus={handleFocus}\n onClick={handleClick}\n onDblClick={handleDoubleClick}\n >\n <Show when={tree.guides() && local.item.level > 1}>\n <For each={Array.from({ length: local.item.level - 1 }, (_, index) => index)}>\n {(index) => (\n <span\n aria-hidden=\"true\"\n data-slot=\"tree-row-guide\"\n class=\"pointer-events-none absolute inset-y-0 w-px bg-border\"\n style={{ 'inset-inline-start': `${6 + index * 12 + 7}px` }}\n />\n )}\n </For>\n </Show>\n <span\n data-slot={markerTarget() ? 'tree-row-disclosure' : undefined}\n class={cn(\n 'flex',\n !markerTarget() && 'size-3.5',\n 'shrink-0 items-center justify-center text-muted-foreground',\n /* The glyph stays 14px wide but the target is not: it takes the row's full\n height (a flex child's `self-stretch`, so it follows row density and a\n tall trailing control) and the pseudo-element widens it to 26px, which\n stops at the row's own padding and gap, never over the icon or label. */\n markerTarget() &&\n 'relative w-3.5 cursor-pointer self-stretch hover:text-foreground after:absolute after:inset-y-0 after:-inset-x-1.5'\n )}\n onMouseDown={markerTarget() ? handleMarkerMouseDown : undefined}\n onClick={markerTarget() ? handleMarkerClick : undefined}\n onDblClick={markerTarget() ? handleMarkerDoubleClick : undefined}\n >\n {local.item.expandable ? (\n <ChevronRight\n aria-hidden=\"true\"\n class={cn('size-3.5 transition-transform', local.item.expanded && 'rotate-90')}\n />\n ) : null}\n </span>\n {local.leading ? (\n <span class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n {local.leading}\n </span>\n ) : null}\n <span class=\"min-w-0 flex-1 truncate\">{local.children}</span>\n {local.trailing ? (\n <span class=\"ms-auto flex shrink-0 items-center gap-1 text-muted-foreground\">\n {local.trailing}\n </span>\n ) : null}\n </div>\n )\n}\n\n/**\n * TreeRowActions.\n *\n * Row-level commands (rename, copy, delete) that stay out of the way until the\n * row is hovered or holds focus, so a long tree reads as names rather than a\n * wall of buttons. Put it in `TreeRow`'s `trailing` slot beside any status that\n * must stay visible. `pinned` keeps the actions shown, e.g. while a destructive\n * action waits for its confirming second press.\n */\nexport function TreeRowActions(props: ComponentProps<'span'> & { pinned?: boolean }) {\n const [local, rest] = splitProps(props, ['class', 'pinned'])\n return (\n <span\n data-slot=\"tree-row-actions\"\n data-pinned={local.pinned ? '' : undefined}\n class={cn(\n 'flex shrink-0 items-center gap-1 opacity-0 transition-opacity ease-out',\n 'group-hover/tree-row:opacity-100 group-focus-within/tree-row:opacity-100 data-pinned:opacity-100',\n local.class\n )}\n {...rest}\n />\n )\n}\n\n// Pressing the chevron must not move focus to its row: a mousedown on a\n// non-focusable child would otherwise focus the row, making it the roving stop\n// (and notifying `onActiveIdChange`) for what is a disclosure toggle, not a\n// selection. The press itself leaves focus where it was, so Left/Right keep\n// acting on the row the keyboard user left off at. It cannot stop the toggle\n// from hiding that row; `Tree` then recovers focus onto the first visible row.\nconst handleMarkerMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) =>\n event.preventDefault()\n// A double-click is two toggles; it must not also reach `onDoubleClick`\n// (rename, open) as though the row itself had been double-clicked.\nconst handleMarkerDoubleClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) =>\n event.stopPropagation()\n\nfunction isActionTarget(target: EventTarget | null, currentTarget: HTMLElement): boolean {\n if (!(target instanceof Element) || target === currentTarget) return false\n return Boolean(\n target.closest(\n 'a, button, input, textarea, select, [contenteditable=\"true\"], [role=\"button\"], [data-tree-keyboard-stop]'\n )\n )\n}\n\nfunction composeRefs(\n internal: (element: HTMLDivElement) => void,\n external: () => ComponentProps<'div'>['ref']\n): (element: HTMLDivElement) => void {\n return (element) => {\n internal(element)\n const ref = external()\n if (typeof ref === 'function') ref(element)\n }\n}\n\nexport type { TreeItemDescriptor } from './tree-navigation'\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/workspace-switcher/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { JSX } from 'solid-js';
|
|
2
|
+
/**
|
|
3
|
+
* WorkspaceSwitcher.
|
|
4
|
+
*
|
|
5
|
+
* The workspace picker that sits in the top bar beside the sidebar toggle. One
|
|
6
|
+
* ghost button shows the current workspace's mark and name; pressing it opens a
|
|
7
|
+
* radio list of the others. Choosing one only changes what the window is
|
|
8
|
+
* looking at: the switcher reports the id and the host decides what that means,
|
|
9
|
+
* which is why it carries no status of its own and never closes, restarts or
|
|
10
|
+
* moves anything.
|
|
11
|
+
*
|
|
12
|
+
* It is deliberately the simple interaction (a single menu, not a nested
|
|
13
|
+
* accordion): the sidebar below it already shows what is inside the chosen
|
|
14
|
+
* workspace, so the switcher's only job is to name the workspace and let the
|
|
15
|
+
* user change it.
|
|
16
|
+
*/
|
|
17
|
+
export type WorkspaceSwitcherItem = {
|
|
18
|
+
id: string;
|
|
19
|
+
name: string;
|
|
20
|
+
/** The workspace's mark, drawn in the trigger and its row. Decorative. */
|
|
21
|
+
mark: JSX.Element;
|
|
22
|
+
/** A quiet trailing readout in the row, e.g. an unread count. Optional. */
|
|
23
|
+
detail?: JSX.Element;
|
|
24
|
+
};
|
|
25
|
+
export type WorkspaceSwitcherProps = {
|
|
26
|
+
workspaces: readonly WorkspaceSwitcherItem[];
|
|
27
|
+
/** The current workspace's id. */
|
|
28
|
+
value: string | undefined;
|
|
29
|
+
onValueChange(id: string): void;
|
|
30
|
+
/** Offered at the foot of the menu when present. */
|
|
31
|
+
onCreate?(): void;
|
|
32
|
+
createLabel?: string;
|
|
33
|
+
/** Offered beside the create action when present: open the current workspace's settings. */
|
|
34
|
+
onManage?(): void;
|
|
35
|
+
manageLabel?: string;
|
|
36
|
+
/** The menu's heading; also the trigger's accessible-name prefix. */
|
|
37
|
+
label?: string;
|
|
38
|
+
/** Shown while no workspace is current. */
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
class?: string;
|
|
42
|
+
};
|
|
43
|
+
export declare function WorkspaceSwitcher(props: WorkspaceSwitcherProps): JSX.Element;
|
|
44
|
+
//# sourceMappingURL=workspace-switcher.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"workspace-switcher.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/workspace-switcher/workspace-switcher.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAgBnC;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,0EAA0E;IAC1E,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,SAAS,qBAAqB,EAAE,CAAA;IAC5C,kCAAkC;IAClC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,oDAAoD;IACpD,QAAQ,CAAC,IAAI,IAAI,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4FAA4F;IAC5F,QAAQ,CAAC,IAAI,IAAI,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAmE9D"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { cn } from "../../../lib/utils.js";
|
|
2
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
|
|
3
|
+
import { ActionButton } from "../action-button/action-button.js";
|
|
4
|
+
import { createComponent, insert, memo, template } from "solid-js/web";
|
|
5
|
+
import { ChevronDown, Plus, Settings } from "lucide-solid";
|
|
6
|
+
import { For, Show, createSignal } from "solid-js";
|
|
7
|
+
//#region src/components/composites/workspace-switcher/workspace-switcher.tsx
|
|
8
|
+
var _tmpl$ = /*#__PURE__*/ template(`<span aria-hidden=true class="flex shrink-0">`);
|
|
9
|
+
var _tmpl$2 = /*#__PURE__*/ template(`<span class="min-w-0 max-w-40 truncate">`);
|
|
10
|
+
var _tmpl$3 = /*#__PURE__*/ template(`<span class="min-w-0 flex-1 truncate">`);
|
|
11
|
+
function WorkspaceSwitcher(props) {
|
|
12
|
+
const [open, setOpen] = createSignal(false);
|
|
13
|
+
const current = () => props.workspaces.find((item) => item.id === props.value);
|
|
14
|
+
const label = () => props.label ?? "Workspaces";
|
|
15
|
+
return createComponent(DropdownMenu, {
|
|
16
|
+
modal: false,
|
|
17
|
+
get open() {
|
|
18
|
+
return open();
|
|
19
|
+
},
|
|
20
|
+
onOpenChange: setOpen,
|
|
21
|
+
get children() {
|
|
22
|
+
return [createComponent(DropdownMenuTrigger, {
|
|
23
|
+
as: ActionButton,
|
|
24
|
+
variant: "ghost",
|
|
25
|
+
size: "sm",
|
|
26
|
+
get disabled() {
|
|
27
|
+
return props.disabled;
|
|
28
|
+
},
|
|
29
|
+
"data-slot": "workspace-switcher",
|
|
30
|
+
get tooltip() {
|
|
31
|
+
return `Workspace: ${current()?.name ?? props.placeholder ?? "Choose workspace"}`;
|
|
32
|
+
},
|
|
33
|
+
get ["aria-label"]() {
|
|
34
|
+
return `Switch workspace, current: ${current()?.name ?? "none"}`;
|
|
35
|
+
},
|
|
36
|
+
get ["class"]() {
|
|
37
|
+
return cn("max-w-full min-w-0 shrink", props.class);
|
|
38
|
+
},
|
|
39
|
+
get children() {
|
|
40
|
+
return [
|
|
41
|
+
(() => {
|
|
42
|
+
var _el$ = _tmpl$();
|
|
43
|
+
insert(_el$, () => current()?.mark);
|
|
44
|
+
return _el$;
|
|
45
|
+
})(),
|
|
46
|
+
(() => {
|
|
47
|
+
var _el$2 = _tmpl$2();
|
|
48
|
+
insert(_el$2, () => current()?.name ?? props.placeholder ?? "Choose workspace");
|
|
49
|
+
return _el$2;
|
|
50
|
+
})(),
|
|
51
|
+
createComponent(ChevronDown, {
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
"class": "size-3.5 shrink-0 text-muted-foreground"
|
|
54
|
+
})
|
|
55
|
+
];
|
|
56
|
+
}
|
|
57
|
+
}), createComponent(DropdownMenuContent, {
|
|
58
|
+
align: "start",
|
|
59
|
+
sideOffset: 6,
|
|
60
|
+
"class": "min-w-56",
|
|
61
|
+
get children() {
|
|
62
|
+
return [createComponent(DropdownMenuGroup, { get children() {
|
|
63
|
+
return [createComponent(DropdownMenuLabel, { get children() {
|
|
64
|
+
return label();
|
|
65
|
+
} }), createComponent(DropdownMenuRadioGroup, {
|
|
66
|
+
get value() {
|
|
67
|
+
return props.value;
|
|
68
|
+
},
|
|
69
|
+
onChange: (value) => {
|
|
70
|
+
setOpen(false);
|
|
71
|
+
const id = String(value);
|
|
72
|
+
if (id !== props.value) props.onValueChange(id);
|
|
73
|
+
},
|
|
74
|
+
get children() {
|
|
75
|
+
return createComponent(For, {
|
|
76
|
+
get each() {
|
|
77
|
+
return props.workspaces;
|
|
78
|
+
},
|
|
79
|
+
children: (item) => createComponent(DropdownMenuRadioItem, {
|
|
80
|
+
get value() {
|
|
81
|
+
return item.id;
|
|
82
|
+
},
|
|
83
|
+
closeOnSelect: true,
|
|
84
|
+
get ["data-workspace-id"]() {
|
|
85
|
+
return item.id;
|
|
86
|
+
},
|
|
87
|
+
get children() {
|
|
88
|
+
return [
|
|
89
|
+
(() => {
|
|
90
|
+
var _el$3 = _tmpl$();
|
|
91
|
+
insert(_el$3, () => item.mark);
|
|
92
|
+
return _el$3;
|
|
93
|
+
})(),
|
|
94
|
+
(() => {
|
|
95
|
+
var _el$4 = _tmpl$3();
|
|
96
|
+
insert(_el$4, () => item.name);
|
|
97
|
+
return _el$4;
|
|
98
|
+
})(),
|
|
99
|
+
createComponent(Show, {
|
|
100
|
+
get when() {
|
|
101
|
+
return item.detail;
|
|
102
|
+
},
|
|
103
|
+
get children() {
|
|
104
|
+
return item.detail;
|
|
105
|
+
}
|
|
106
|
+
})
|
|
107
|
+
];
|
|
108
|
+
}
|
|
109
|
+
})
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
})];
|
|
113
|
+
} }), createComponent(Show, {
|
|
114
|
+
get when() {
|
|
115
|
+
return props.onCreate || props.onManage;
|
|
116
|
+
},
|
|
117
|
+
get children() {
|
|
118
|
+
return [
|
|
119
|
+
createComponent(DropdownMenuSeparator, {}),
|
|
120
|
+
createComponent(Show, {
|
|
121
|
+
get when() {
|
|
122
|
+
return props.onCreate;
|
|
123
|
+
},
|
|
124
|
+
get children() {
|
|
125
|
+
return createComponent(DropdownMenuItem, {
|
|
126
|
+
onSelect: () => props.onCreate?.(),
|
|
127
|
+
get children() {
|
|
128
|
+
return [createComponent(Plus, { "aria-hidden": "true" }), memo(() => props.createLabel ?? "New workspace")];
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}),
|
|
133
|
+
createComponent(Show, {
|
|
134
|
+
get when() {
|
|
135
|
+
return props.onManage;
|
|
136
|
+
},
|
|
137
|
+
get children() {
|
|
138
|
+
return createComponent(DropdownMenuItem, {
|
|
139
|
+
onSelect: () => props.onManage?.(),
|
|
140
|
+
get children() {
|
|
141
|
+
return [createComponent(Settings, { "aria-hidden": "true" }), memo(() => props.manageLabel ?? "Workspace settings…")];
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
})
|
|
146
|
+
];
|
|
147
|
+
}
|
|
148
|
+
})];
|
|
149
|
+
}
|
|
150
|
+
})];
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
//#endregion
|
|
155
|
+
export { WorkspaceSwitcher };
|
|
156
|
+
|
|
157
|
+
//# sourceMappingURL=workspace-switcher.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"workspace-switcher.js","names":["ChevronDown","Plus","Settings","JSX","For","Show","createSignal","cn","DropdownMenu","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","DropdownMenuLabel","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSeparator","DropdownMenuTrigger","ActionButton","WorkspaceSwitcherItem","id","name","mark","Element","detail","WorkspaceSwitcherProps","workspaces","value","onValueChange","onCreate","createLabel","onManage","manageLabel","label","placeholder","disabled","class","WorkspaceSwitcher","props","open","setOpen","current","find","item","_$createComponent","modal","onOpenChange","children","as","variant","size","tooltip","aria-label","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","align","sideOffset","onChange","String","each","closeOnSelect","data-workspace-id","_el$3","_el$4","_tmpl$3","when","onSelect","_$memo","_$createComponent","_$memo"],"sources":["../../../../src/components/composites/workspace-switcher/workspace-switcher.tsx"],"sourcesContent":["import { ChevronDown, Plus, Settings } from 'lucide-solid'\nimport type { JSX } from 'solid-js'\nimport { For, Show, createSignal } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../../ui/dropdown-menu'\nimport { ActionButton } from '../action-button'\n\n/**\n * WorkspaceSwitcher.\n *\n * The workspace picker that sits in the top bar beside the sidebar toggle. One\n * ghost button shows the current workspace's mark and name; pressing it opens a\n * radio list of the others. Choosing one only changes what the window is\n * looking at: the switcher reports the id and the host decides what that means,\n * which is why it carries no status of its own and never closes, restarts or\n * moves anything.\n *\n * It is deliberately the simple interaction (a single menu, not a nested\n * accordion): the sidebar below it already shows what is inside the chosen\n * workspace, so the switcher's only job is to name the workspace and let the\n * user change it.\n */\nexport type WorkspaceSwitcherItem = {\n id: string\n name: string\n /** The workspace's mark, drawn in the trigger and its row. Decorative. */\n mark: JSX.Element\n /** A quiet trailing readout in the row, e.g. an unread count. Optional. */\n detail?: JSX.Element\n}\n\nexport type WorkspaceSwitcherProps = {\n workspaces: readonly WorkspaceSwitcherItem[]\n /** The current workspace's id. */\n value: string | undefined\n onValueChange(id: string): void\n /** Offered at the foot of the menu when present. */\n onCreate?(): void\n createLabel?: string\n /** Offered beside the create action when present: open the current workspace's settings. */\n onManage?(): void\n manageLabel?: string\n /** The menu's heading; also the trigger's accessible-name prefix. */\n label?: string\n /** Shown while no workspace is current. */\n placeholder?: string\n disabled?: boolean\n class?: string\n}\n\nexport function WorkspaceSwitcher(props: WorkspaceSwitcherProps) {\n const [open, setOpen] = createSignal(false)\n const current = () => props.workspaces.find((item) => item.id === props.value)\n const label = () => props.label ?? 'Workspaces'\n\n return (\n <DropdownMenu modal={false} open={open()} onOpenChange={setOpen}>\n <DropdownMenuTrigger\n as={ActionButton}\n variant=\"ghost\"\n size=\"sm\"\n disabled={props.disabled}\n data-slot=\"workspace-switcher\"\n tooltip={`Workspace: ${current()?.name ?? props.placeholder ?? 'Choose workspace'}`}\n aria-label={`Switch workspace, current: ${current()?.name ?? 'none'}`}\n class={cn('max-w-full min-w-0 shrink', props.class)}\n >\n <span aria-hidden=\"true\" class=\"flex shrink-0\">\n {current()?.mark}\n </span>\n <span class=\"min-w-0 max-w-40 truncate\">\n {current()?.name ?? props.placeholder ?? 'Choose workspace'}\n </span>\n <ChevronDown aria-hidden=\"true\" class=\"size-3.5 shrink-0 text-muted-foreground\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={6} class=\"min-w-56\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>{label()}</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={props.value}\n onChange={(value) => {\n setOpen(false)\n const id = String(value)\n if (id !== props.value) props.onValueChange(id)\n }}\n >\n <For each={props.workspaces}>\n {(item) => (\n <DropdownMenuRadioItem value={item.id} closeOnSelect data-workspace-id={item.id}>\n <span aria-hidden=\"true\" class=\"flex shrink-0\">\n {item.mark}\n </span>\n <span class=\"min-w-0 flex-1 truncate\">{item.name}</span>\n <Show when={item.detail}>{item.detail}</Show>\n </DropdownMenuRadioItem>\n )}\n </For>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n <Show when={props.onCreate || props.onManage}>\n <DropdownMenuSeparator />\n <Show when={props.onCreate}>\n <DropdownMenuItem onSelect={() => props.onCreate?.()}>\n <Plus aria-hidden=\"true\" />\n {props.createLabel ?? 'New workspace'}\n </DropdownMenuItem>\n </Show>\n <Show when={props.onManage}>\n <DropdownMenuItem onSelect={() => props.onManage?.()}>\n <Settings aria-hidden=\"true\" />\n {props.manageLabel ?? 'Workspace settings…'}\n </DropdownMenuItem>\n </Show>\n </Show>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/shell-rail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { ComponentProps, JSX } from 'solid-js';
|
|
2
|
+
/**
|
|
3
|
+
* ShellRail.
|
|
4
|
+
*
|
|
5
|
+
* The side rail both applications put at the window's leading edge: always the
|
|
6
|
+
* collapsed icon column, with the app's mark at the top, a search entry point
|
|
7
|
+
* under it, the app's destinations in the middle and a footer for account and
|
|
8
|
+
* settings.
|
|
9
|
+
*
|
|
10
|
+
* The rail is never the thing the sidebar toggle collapses. The toggle belongs
|
|
11
|
+
* to the sidebar beside the rail, which is why this component takes no
|
|
12
|
+
* `collapsed` prop: a rail that could be expanded would be a second sidebar,
|
|
13
|
+
* and the two apps would drift on which of them the toggle meant.
|
|
14
|
+
*
|
|
15
|
+
* Destinations are the caller's: pass `SideRailItem`s (or a `SideRailSection`)
|
|
16
|
+
* as children. The mark, the search row and the footer are slots with the
|
|
17
|
+
* geometry decided here, so the rail's rhythm cannot differ between apps.
|
|
18
|
+
*/
|
|
19
|
+
export type ShellRailProps = Omit<ComponentProps<'nav'>, 'children'> & {
|
|
20
|
+
/** The app's mark. Decorative: the rail names itself through `aria-label`. */
|
|
21
|
+
mark: JSX.Element;
|
|
22
|
+
/** Opens search. Omit to leave the search row out. */
|
|
23
|
+
onSearch?: () => void;
|
|
24
|
+
/** The search row's accessible name. */
|
|
25
|
+
searchLabel?: string;
|
|
26
|
+
/** The chord as it is announced, e.g. `Meta+K Control+K`. */
|
|
27
|
+
searchKeyshortcuts?: string;
|
|
28
|
+
/** The cap labels drawn under the icon, in press order, e.g. `['⌘', 'K']`. */
|
|
29
|
+
searchKeys?: readonly string[];
|
|
30
|
+
/** Destinations between the search row and the footer. */
|
|
31
|
+
children?: JSX.Element;
|
|
32
|
+
/** Account, plugins, settings. Pinned to the rail's foot. */
|
|
33
|
+
footer?: JSX.Element;
|
|
34
|
+
};
|
|
35
|
+
export declare function ShellRail(props: ShellRailProps): JSX.Element;
|
|
36
|
+
//# sourceMappingURL=shell-rail.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell-rail.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/shell-rail/shell-rail.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAanD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,8EAA8E;IAC9E,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAuE9C"}
|