Skip to content

Commit d159c00

Browse files
cschroetercschroeter
authored
feat(*): re-design tree view (#3025)
1 parent c922042 commit d159c00

File tree

132 files changed

+2064
-1311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+2064
-1311
lines changed

‎bun.lockb‎

-38.9 KB
Binary file not shown.

‎packages/anatomy/package.json‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -458,45 +458,45 @@
458458
},
459459
"sideEffects": false,
460460
"dependencies": {
461-
"@zag-js/accordion": "0.76.0",
462-
"@zag-js/anatomy": "0.76.0",
463-
"@zag-js/avatar": "0.76.0",
464-
"@zag-js/carousel": "0.76.0",
465-
"@zag-js/checkbox": "0.76.0",
466-
"@zag-js/clipboard": "0.76.0",
467-
"@zag-js/collapsible": "0.76.0",
468-
"@zag-js/color-picker": "0.76.0",
469-
"@zag-js/color-utils": "0.76.0",
470-
"@zag-js/combobox": "0.76.0",
471-
"@zag-js/date-picker": "0.76.0",
472-
"@zag-js/date-utils": "0.76.0",
473-
"@zag-js/dialog": "0.76.0",
474-
"@zag-js/editable": "0.76.0",
475-
"@zag-js/file-upload": "0.76.0",
476-
"@zag-js/hover-card": "0.76.0",
477-
"@zag-js/menu": "0.76.0",
478-
"@zag-js/number-input": "0.76.0",
479-
"@zag-js/pagination": "0.76.0",
480-
"@zag-js/pin-input": "0.76.0",
481-
"@zag-js/popover": "0.76.0",
482-
"@zag-js/presence": "0.76.0",
483-
"@zag-js/progress": "0.76.0",
484-
"@zag-js/qr-code": "0.76.0",
485-
"@zag-js/radio-group": "0.76.0",
486-
"@zag-js/rating-group": "0.76.0",
487-
"@zag-js/select": "0.76.0",
488-
"@zag-js/signature-pad": "0.76.0",
489-
"@zag-js/slider": "0.76.0",
490-
"@zag-js/splitter": "0.76.0",
491-
"@zag-js/switch": "0.76.0",
492-
"@zag-js/tabs": "0.76.0",
493-
"@zag-js/tags-input": "0.76.0",
494-
"@zag-js/time-picker": "0.76.0",
495-
"@zag-js/timer": "0.76.0",
496-
"@zag-js/toast": "0.76.0",
497-
"@zag-js/toggle-group": "0.76.0",
498-
"@zag-js/tooltip": "0.76.0",
499-
"@zag-js/tree-view": "0.76.0"
461+
"@zag-js/accordion": "0.77.0",
462+
"@zag-js/anatomy": "0.77.0",
463+
"@zag-js/avatar": "0.77.0",
464+
"@zag-js/carousel": "0.77.0",
465+
"@zag-js/checkbox": "0.77.0",
466+
"@zag-js/clipboard": "0.77.0",
467+
"@zag-js/collapsible": "0.77.0",
468+
"@zag-js/color-picker": "0.77.0",
469+
"@zag-js/color-utils": "0.77.0",
470+
"@zag-js/combobox": "0.77.0",
471+
"@zag-js/date-picker": "0.77.0",
472+
"@zag-js/date-utils": "0.77.0",
473+
"@zag-js/dialog": "0.77.0",
474+
"@zag-js/editable": "0.77.0",
475+
"@zag-js/file-upload": "0.77.0",
476+
"@zag-js/hover-card": "0.77.0",
477+
"@zag-js/menu": "0.77.0",
478+
"@zag-js/number-input": "0.77.0",
479+
"@zag-js/pagination": "0.77.0",
480+
"@zag-js/pin-input": "0.77.0",
481+
"@zag-js/popover": "0.77.0",
482+
"@zag-js/presence": "0.77.0",
483+
"@zag-js/progress": "0.77.0",
484+
"@zag-js/qr-code": "0.77.0",
485+
"@zag-js/radio-group": "0.77.0",
486+
"@zag-js/rating-group": "0.77.0",
487+
"@zag-js/select": "0.77.0",
488+
"@zag-js/signature-pad": "0.77.0",
489+
"@zag-js/slider": "0.77.0",
490+
"@zag-js/splitter": "0.77.0",
491+
"@zag-js/switch": "0.77.0",
492+
"@zag-js/tabs": "0.77.0",
493+
"@zag-js/tags-input": "0.77.0",
494+
"@zag-js/time-picker": "0.77.0",
495+
"@zag-js/timer": "0.77.0",
496+
"@zag-js/toast": "0.77.0",
497+
"@zag-js/toggle-group": "0.77.0",
498+
"@zag-js/tooltip": "0.77.0",
499+
"@zag-js/tree-view": "0.77.0"
500500
},
501501
"devDependencies": {
502502
"@release-it/keep-a-changelog": "5.0.0",

‎packages/react/.storybook/styles/tree-view.css‎

Lines changed: 87 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,98 @@
1-
[data-scope='tree-view'][data-part='tree'] {
2-
margin: 0;
1+
[data-scope="tree-view"][data-part="tree"] {
32
margin-top: 20px;
4-
padding: 0;
5-
list-style: none;
3+
width: 240px;
64
}
75

8-
[data-scope='tree-view'][data-part='item'],
9-
[data-scope='tree-view'][data-part='branch-control'] {
10-
display: flex;
11-
gap: 4px;
12-
padding-inline: 6px;
13-
padding-block: 4px;
6+
[data-scope="tree-view"][data-part="item"],
7+
[data-scope="tree-view"][data-part="branch-control"] {
148
user-select: none;
9+
--padding-inline: 16px;
10+
padding-inline-start: calc(var(--depth) * var(--padding-inline));
11+
padding-inline-end: var(--padding-inline);
12+
display: flex;
13+
align-items: center;
14+
gap: 8px;
15+
border-radius: 2px;
16+
min-height: 32px;
17+
18+
& svg {
19+
width: 16px;
20+
height: 16px;
21+
opacity: 0.5;
22+
}
23+
24+
&:hover {
25+
background: rgb(243, 243, 243);
26+
}
27+
28+
&[data-selected] {
29+
background: rgb(226, 226, 226);
30+
}
31+
32+
&:focus {
33+
outline: 1px solid rgb(148, 148, 148);
34+
outline-offset: -1px;
35+
}
36+
}
37+
38+
[data-scope="tree-view"][data-part="item-text"],
39+
[data-scope="tree-view"][data-part="branch-text"] {
40+
flex: 1;
41+
}
42+
43+
[data-scope="tree-view"][data-part="branch-content"] {
44+
position: relative;
45+
isolation: isolate;
46+
}
47+
48+
[data-scope="tree-view"][data-part="branch-indent-guide"] {
49+
position: absolute;
50+
content: "";
51+
border-left: 1px solid rgb(226, 226, 226);
52+
height: 100%;
53+
translate: calc(var(--depth) * 1.25rem);
54+
z-index: 0;
55+
}
56+
57+
[data-scope="tree-view"][data-part="branch-indicator"] {
58+
display: flex;
59+
align-items: center;
60+
&[data-state="open"] svg {
61+
transform: rotate(90deg);
62+
}
63+
}
64+
65+
@keyframes slideDown {
66+
from {
67+
opacity: 0.01;
68+
height: 0;
69+
}
70+
to {
71+
opacity: 1;
72+
height: var(--height);
73+
}
74+
}
75+
76+
@keyframes slideUp {
77+
from {
78+
opacity: 1;
79+
height: var(--height);
80+
}
81+
to {
82+
opacity: 0.01;
83+
height: 0;
84+
}
1585
}
1686

17-
[data-scope='tree-view'][data-part='item'][data-selected],
18-
[data-scope='tree-view'][data-part='branch-control'][data-selected] {
19-
background: lightblue;
87+
[data-scope="tree-view"][data-part="branch-content"] {
88+
overflow: hidden;
89+
max-width: 400px;
2090
}
2191

22-
[data-scope='tree-view'][data-part='branch-content'] {
23-
list-style: none;
24-
padding-inline-start: 12px;
92+
[data-scope="tree-view"][data-part="branch-content"][data-state="open"] {
93+
animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
2594
}
2695

27-
[data-scope='tree-view'][data-part='branch-content'] [data-part='item'] {
28-
--dx: calc(var(--depth) + 1);
29-
padding-inline-start: calc(var(--dx) * 4px);
30-
border-inline-start: 1px solid lightgray;
96+
[data-scope="tree-view"][data-part="branch-content"][data-state="closed"] {
97+
animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
3198
}

‎packages/react/package.json‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -153,54 +153,54 @@
153153
"sideEffects": false,
154154
"dependencies": {
155155
"@internationalized/date": "3.5.6",
156-
"@zag-js/accordion": "0.76.0",
157-
"@zag-js/anatomy": "0.76.0",
158-
"@zag-js/avatar": "0.76.0",
159-
"@zag-js/carousel": "0.76.0",
160-
"@zag-js/checkbox": "0.76.0",
161-
"@zag-js/clipboard": "0.76.0",
162-
"@zag-js/collapsible": "0.76.0",
163-
"@zag-js/collection": "0.76.0",
164-
"@zag-js/color-picker": "0.76.0",
165-
"@zag-js/color-utils": "0.76.0",
166-
"@zag-js/combobox": "0.76.0",
167-
"@zag-js/core": "0.76.0",
168-
"@zag-js/date-picker": "0.76.0",
169-
"@zag-js/date-utils": "0.76.0",
170-
"@zag-js/dialog": "0.76.0",
171-
"@zag-js/dom-query": "0.76.0",
172-
"@zag-js/editable": "0.76.0",
173-
"@zag-js/file-upload": "0.76.0",
174-
"@zag-js/file-utils": "0.76.0",
175-
"@zag-js/highlight-word": "0.76.0",
176-
"@zag-js/hover-card": "0.76.0",
177-
"@zag-js/i18n-utils": "0.76.0",
178-
"@zag-js/menu": "0.76.0",
179-
"@zag-js/number-input": "0.76.0",
180-
"@zag-js/pagination": "0.76.0",
181-
"@zag-js/pin-input": "0.76.0",
182-
"@zag-js/popover": "0.76.0",
183-
"@zag-js/presence": "0.76.0",
184-
"@zag-js/progress": "0.76.0",
185-
"@zag-js/qr-code": "0.76.0",
186-
"@zag-js/radio-group": "0.76.0",
187-
"@zag-js/rating-group": "0.76.0",
188-
"@zag-js/react": "0.76.0",
189-
"@zag-js/select": "0.76.0",
190-
"@zag-js/signature-pad": "0.76.0",
191-
"@zag-js/slider": "0.76.0",
192-
"@zag-js/splitter": "0.76.0",
193-
"@zag-js/steps": "0.76.0",
194-
"@zag-js/switch": "0.76.0",
195-
"@zag-js/tabs": "0.76.0",
196-
"@zag-js/tags-input": "0.76.0",
197-
"@zag-js/time-picker": "0.76.0",
198-
"@zag-js/timer": "0.76.0",
199-
"@zag-js/toast": "0.76.0",
200-
"@zag-js/toggle-group": "0.76.0",
201-
"@zag-js/tooltip": "0.76.0",
202-
"@zag-js/tree-view": "0.76.0",
203-
"@zag-js/types": "0.76.0"
156+
"@zag-js/accordion": "0.77.0",
157+
"@zag-js/anatomy": "0.77.0",
158+
"@zag-js/avatar": "0.77.0",
159+
"@zag-js/carousel": "0.77.0",
160+
"@zag-js/checkbox": "0.77.0",
161+
"@zag-js/clipboard": "0.77.0",
162+
"@zag-js/collapsible": "0.77.0",
163+
"@zag-js/collection": "0.77.0",
164+
"@zag-js/color-picker": "0.77.0",
165+
"@zag-js/color-utils": "0.77.0",
166+
"@zag-js/combobox": "0.77.0",
167+
"@zag-js/core": "0.77.0",
168+
"@zag-js/date-picker": "0.77.0",
169+
"@zag-js/date-utils": "0.77.0",
170+
"@zag-js/dialog": "0.77.0",
171+
"@zag-js/dom-query": "0.77.0",
172+
"@zag-js/editable": "0.77.0",
173+
"@zag-js/file-upload": "0.77.0",
174+
"@zag-js/file-utils": "0.77.0",
175+
"@zag-js/highlight-word": "0.77.0",
176+
"@zag-js/hover-card": "0.77.0",
177+
"@zag-js/i18n-utils": "0.77.0",
178+
"@zag-js/menu": "0.77.0",
179+
"@zag-js/number-input": "0.77.0",
180+
"@zag-js/pagination": "0.77.0",
181+
"@zag-js/pin-input": "0.77.0",
182+
"@zag-js/popover": "0.77.0",
183+
"@zag-js/presence": "0.77.0",
184+
"@zag-js/progress": "0.77.0",
185+
"@zag-js/qr-code": "0.77.0",
186+
"@zag-js/radio-group": "0.77.0",
187+
"@zag-js/rating-group": "0.77.0",
188+
"@zag-js/react": "0.77.0",
189+
"@zag-js/select": "0.77.0",
190+
"@zag-js/signature-pad": "0.77.0",
191+
"@zag-js/slider": "0.77.0",
192+
"@zag-js/splitter": "0.77.0",
193+
"@zag-js/steps": "0.77.0",
194+
"@zag-js/switch": "0.77.0",
195+
"@zag-js/tabs": "0.77.0",
196+
"@zag-js/tags-input": "0.77.0",
197+
"@zag-js/time-picker": "0.77.0",
198+
"@zag-js/timer": "0.77.0",
199+
"@zag-js/toast": "0.77.0",
200+
"@zag-js/toggle-group": "0.77.0",
201+
"@zag-js/tooltip": "0.77.0",
202+
"@zag-js/tree-view": "0.77.0",
203+
"@zag-js/types": "0.77.0"
204204
},
205205
"devDependencies": {
206206
"@biomejs/biome": "1.9.4",
@@ -217,7 +217,7 @@
217217
"@types/react": "18.3.12",
218218
"@types/react-dom": "18.3.1",
219219
"@vitejs/plugin-react": "4.3.3",
220-
"@zag-js/stringify-state": "0.76.0",
220+
"@zag-js/stringify-state": "0.77.0",
221221
"clean-package": "2.2.0",
222222
"globby": "14.0.2",
223223
"jsdom": "25.0.1",

‎packages/react/src/components/collection.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1-
import { type CollectionItem, type CollectionOptions, ListCollection } from '@zag-js/collection'
1+
import {
2+
type CollectionItem,
3+
type CollectionOptions,
4+
type FilePathTreeNode,
5+
ListCollection,
6+
TreeCollection,
7+
type TreeCollectionOptions,
8+
type TreeNode,
9+
filePathToTree,
10+
} from '@zag-js/collection'
211
import { ref } from '@zag-js/core'
312

413
export type { CollectionItem, ListCollection } from '@zag-js/collection'
514

615
export const createListCollection = <T extends CollectionItem>(
716
options: CollectionOptions<T>,
817
): ListCollection<T> => ref(new ListCollection(options))
18+
19+
export type { TreeCollection, TreeNode } from '@zag-js/collection'
20+
21+
export const createTreeCollection = <T extends TreeNode>(
22+
options: TreeCollectionOptions<T>,
23+
): TreeCollection<T> => ref(new TreeCollection(options))
24+
25+
export const createFileTreeCollection = (paths: string[]): TreeCollection<FilePathTreeNode> =>
26+
ref(filePathToTree(paths))

‎packages/react/src/components/combobox/combobox-root.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const ComboboxImpl = <T extends CollectionItem>(
3636
'disabled',
3737
'disableLayer',
3838
'form',
39-
'getSelectionValue',
4039
'highlightedValue',
4140
'id',
4241
'ids',

‎packages/react/src/components/select/use-select-context.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import type { UseSelectReturn } from './use-select'
44

55
export interface UseSelectContext<T extends CollectionItem> extends UseSelectReturn<T> {}
66

7-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
8-
export const [SelectProvider, useSelectContext] = createContext<UseSelectContext<any>>({
7+
export const [SelectProvider, useSelectContext] = createContext<UseSelectContext<CollectionItem>>({
98
name: 'SelectContext',
109
hookName: 'useSelectContext',
1110
providerName: '<SelectProvider />',

‎packages/react/src/components/toast/create-toaster.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import * as toast from '@zag-js/toast'
33
import type { ReactNode } from 'react'
44
import type { Optional } from '../../types'
55

6-
export interface CreateToasterProps
7-
extends Optional<Partial<toast.GroupMachineContext<ReactNode>>, 'id'> {
6+
export interface CreateToasterProps extends Optional<Partial<toast.GroupMachineContext>, 'id'> {
87
placement: toast.Placement
98
}
109

0 commit comments

Comments
 (0)