@dxos/react-ui-list 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

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.
Files changed (31) hide show
  1. package/dist/lib/browser/index.mjs +25 -18
  2. package/dist/lib/browser/index.mjs.map +3 -3
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +24 -17
  5. package/dist/lib/node/index.cjs.map +3 -3
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +25 -18
  8. package/dist/lib/node-esm/index.mjs.map +3 -3
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/dist/types/src/components/List/List.d.ts +1 -1
  11. package/dist/types/src/components/List/List.d.ts.map +1 -1
  12. package/dist/types/src/components/List/ListItem.d.ts +6 -9
  13. package/dist/types/src/components/List/ListItem.d.ts.map +1 -1
  14. package/dist/types/src/components/List/ListRoot.d.ts +3 -6
  15. package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
  16. package/dist/types/src/components/Tree/Tree.d.ts +4 -2
  17. package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
  18. package/dist/types/src/components/Tree/TreeItem.d.ts +2 -1
  19. package/dist/types/src/components/Tree/TreeItem.d.ts.map +1 -1
  20. package/dist/types/src/components/Tree/TreeItemHeading.d.ts.map +1 -1
  21. package/dist/types/src/components/Tree/TreeItemToggle.d.ts +1 -0
  22. package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map +1 -1
  23. package/dist/types/src/components/Tree/helpers.d.ts +1 -1
  24. package/dist/types/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +18 -18
  26. package/src/components/List/ListItem.tsx +10 -4
  27. package/src/components/Tree/Tree.tsx +9 -5
  28. package/src/components/Tree/TreeItem.tsx +6 -6
  29. package/src/components/Tree/TreeItemHeading.tsx +2 -3
  30. package/src/components/Tree/TreeItemToggle.tsx +3 -2
  31. package/src/components/Tree/helpers.ts +1 -1
package/dist/types/src/components/Tree/Tree.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,GAAG,IAAI;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,eAAe,GAC/D,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,qBAAqB,GAAG,YAAY,CAAC,CAAC,GACtE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,GAAG,cAAc,GAAG,UAAU,CAAC,CAAC;AAElG,eAAO,MAAM,IAAI,GAAI,CAAC,oJAanB,SAAS,CAAC,CAAC,CAAC,sBAgCd,CAAC"}
1
+ {"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,GAAG,IAAI;IAAE,IAAI,CAAC,EAAE,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,eAAe,GAC1F,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,qBAAqB,GAAG,YAAY,CAAC,CAAC,GACtE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,CAAC,CAAC;AAElH,eAAO,MAAM,IAAI,GAAI,CAAC,6KAgBnB,SAAS,CAAC,CAAC,CAAC,sBAiCd,CAAC"}
package/dist/types/src/components/Tree/TreeItem.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const isTreeData: (data: unknown) => data is TreeData;
10
10
  export type TreeItemProps<T = any> = {
11
11
  item: T;
12
12
  path: string[];
13
+ levelOffset?: number;
13
14
  last: boolean;
14
15
  draggable?: boolean;
15
16
  renderColumns?: FC<{
@@ -32,6 +33,6 @@ export type TreeItemProps<T = any> = {
32
33
  option: boolean;
33
34
  }) => void;
34
35
  };
35
- export declare const RawTreeItem: <T = any>({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, }: TreeItemProps<T>) => React.JSX.Element;
36
+ export declare const RawTreeItem: <T = any>({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset, }: TreeItemProps<T>) => React.JSX.Element;
36
37
  export declare const TreeItem: FC<TreeItemProps>;
37
38
  //# sourceMappingURL=TreeItem.d.ts.map
package/dist/types/src/components/Tree/TreeItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItem.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAA2D,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAsBtC,eAAO,MAAM,cAAc;;;;EAIzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,eAAO,MAAM,UAAU,SAAU,OAAO,KAAG,IAAI,IAAI,QAAsC,CAAC;AAE1F,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,GAAG,IAAI;IACnC,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,EAAE,CAAC;QACjB,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KACtC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,sHAS1B,aAAa,CAAC,CAAC,CAAC,sBA6MlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAwB,EAAE,CAAC,aAAa,CAAC,CAAC"}
1
+ {"version":3,"file":"TreeItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItem.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,EAA2D,KAAK,EAAE,EAAsB,MAAM,OAAO,CAAC;AAEpH,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAqBtC,eAAO,MAAM,cAAc;;;;EAIzB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,eAAO,MAAM,UAAU,SAAU,OAAO,KAAG,IAAI,IAAI,QAAsC,CAAC;AAE1F,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,GAAG,IAAI;IACnC,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,EAAE,CAAC;QACjB,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,EAAE,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,WAAW,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KACtC,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,mIAU1B,aAAa,CAAC,CAAC,CAAC,sBA4MlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAwB,EAAE,CAAC,aAAa,CAAC,CAAC"}
package/dist/types/src/components/Tree/TreeItemHeading.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItemHeading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemHeading.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAElG,OAAO,EAAmD,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAM7F,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,eAAe,8HAwD3B,CAAC"}
1
+ {"version":3,"file":"TreeItemHeading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemHeading.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAElG,OAAO,EAAmD,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAM7F,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,eAAe,8HAuD3B,CAAC"}
package/dist/types/src/components/Tree/TreeItemToggle.d.ts CHANGED
@@ -3,6 +3,7 @@ export type TreeItemToggleProps = {
3
3
  open?: boolean;
4
4
  isBranch?: boolean;
5
5
  onToggle?: () => void;
6
+ hidden?: boolean;
6
7
  };
7
8
  export declare const TreeItemToggle: React.MemoExoticComponent<React.ForwardRefExoticComponent<TreeItemToggleProps & React.RefAttributes<HTMLButtonElement>>>;
8
9
  //# sourceMappingURL=TreeItemToggle.d.ts.map
package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TreeItemToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,0HAoB1B,CAAC"}
1
+ {"version":3,"file":"TreeItemToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/TreeItemToggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,cAAc,0HAoB1B,CAAC"}
package/dist/types/src/components/Tree/helpers.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare const DEFAULT_INDENTATION = 8;
2
- export declare const paddingIndendation: (level: number, indentation?: number) => {
2
+ export declare const paddingIndentation: (level: number, indentation?: number) => {
3
3
  paddingInlineStart: string;
4
4
  };
5
5
  //# sourceMappingURL=helpers.d.ts.map
package/dist/types/tsconfig.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"version":"5.7.2"}
1
+ {"version":"5.7.3"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-list",
3
- "version": "0.7.5-labs.a279d8c",
3
+ "version": "0.7.5-labs.ea4b4c2",
4
4
  "description": "A list component.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,17 +25,17 @@
25
25
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
26
26
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
27
27
  "@preact/signals-core": "^1.6.0",
28
- "@radix-ui/react-context": "^1.0.0",
29
- "@dxos/debug": "0.7.5-labs.a279d8c",
30
- "@dxos/live-object": "0.7.5-labs.a279d8c",
31
- "@dxos/invariant": "0.7.5-labs.a279d8c",
32
- "@dxos/log": "0.7.5-labs.a279d8c",
33
- "@dxos/react-ui-text-tooltip": "0.7.5-labs.a279d8c",
34
- "@dxos/echo-schema": "0.7.5-labs.a279d8c",
35
- "@dxos/react-ui-attention": "0.7.5-labs.a279d8c",
36
- "@dxos/react-ui-types": "0.7.5-labs.a279d8c",
37
- "@dxos/util": "0.7.5-labs.a279d8c",
38
- "@dxos/react-ui-mosaic": "0.7.5-labs.a279d8c"
28
+ "@radix-ui/react-context": "1.1.1",
29
+ "@dxos/debug": "0.7.5-labs.ea4b4c2",
30
+ "@dxos/echo-schema": "0.7.5-labs.ea4b4c2",
31
+ "@dxos/live-object": "0.7.5-labs.ea4b4c2",
32
+ "@dxos/invariant": "0.7.5-labs.ea4b4c2",
33
+ "@dxos/react-ui-attention": "0.7.5-labs.ea4b4c2",
34
+ "@dxos/log": "0.7.5-labs.ea4b4c2",
35
+ "@dxos/react-ui-text-tooltip": "0.7.5-labs.ea4b4c2",
36
+ "@dxos/react-ui-mosaic": "0.7.5-labs.ea4b4c2",
37
+ "@dxos/util": "0.7.5-labs.ea4b4c2",
38
+ "@dxos/react-ui-types": "0.7.5-labs.ea4b4c2"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@phosphor-icons/react": "^2.1.5",
@@ -45,18 +45,18 @@
45
45
  "react": "~18.2.0",
46
46
  "react-dom": "~18.2.0",
47
47
  "vite": "5.4.7",
48
- "@dxos/random": "0.7.5-labs.a279d8c",
49
- "@dxos/react-ui": "0.7.5-labs.a279d8c",
50
- "@dxos/react-ui-theme": "0.7.5-labs.a279d8c",
51
- "@dxos/storybook-utils": "0.7.5-labs.a279d8c"
48
+ "@dxos/random": "0.7.5-labs.ea4b4c2",
49
+ "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
50
+ "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2",
51
+ "@dxos/storybook-utils": "0.7.5-labs.ea4b4c2"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "@phosphor-icons/react": "^2.1.5",
55
55
  "effect": "^3.12.3",
56
56
  "react": "~18.2.0",
57
57
  "react-dom": "~18.2.0",
58
- "@dxos/react-ui": "0.7.5-labs.a279d8c",
59
- "@dxos/react-ui-theme": "0.7.5-labs.a279d8c"
58
+ "@dxos/react-ui": "0.7.5-labs.ea4b4c2",
59
+ "@dxos/react-ui-theme": "0.7.5-labs.ea4b4c2"
60
60
  },
61
61
  "publishConfig": {
62
62
  "access": "public"
package/src/components/List/ListItem.tsx CHANGED
@@ -74,13 +74,14 @@ export const [ListItemProvider, useListItemContext] = createContext<ListItemCont
74
74
  export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
75
75
  PropsWithChildren<{
76
76
  item: T;
77
- }>
77
+ }> &
78
+ HTMLAttributes<HTMLDivElement>
78
79
  >;
79
80
 
80
81
  /**
81
82
  * Draggable list item.
82
83
  */
83
- export const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {
84
+ export const ListItem = <T extends ListItemRecord>({ children, classNames, item, ...props }: ListItemProps<T>) => {
84
85
  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
85
86
  const ref = useRef<HTMLDivElement | null>(null);
86
87
  const dragHandleRef = useRef<HTMLElement | null>(null);
@@ -164,8 +165,13 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item
164
165
 
165
166
  return (
166
167
  <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
167
- <div className='relative'>
168
- <div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>
168
+ <div role='none' className='relative'>
169
+ <div
170
+ ref={ref}
171
+ role='listitem'
172
+ className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}
173
+ {...props}
174
+ >
169
175
  {children}
170
176
  </div>
171
177
  {state.type === 'is-dragging-over' && state.closestEdge && (
package/src/components/Tree/Tree.tsx CHANGED
@@ -9,11 +9,13 @@ import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
9
9
  import { type TreeContextType, TreeProvider } from './TreeContext';
10
10
  import { TreeItem, type TreeItemProps } from './TreeItem';
11
11
 
12
- export type TreeProps<T = any> = { id: string } & TreeContextType &
12
+ export type TreeProps<T = any> = { root?: T; path?: string[]; id: string } & TreeContextType &
13
13
  Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
14
- Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;
14
+ Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
15
15
 
16
16
  export const Tree = <T = any,>({
17
+ root,
18
+ path,
17
19
  id,
18
20
  getItems,
19
21
  getProps,
@@ -26,6 +28,7 @@ export const Tree = <T = any,>({
26
28
  canDrop,
27
29
  onOpenChange,
28
30
  onSelect,
31
+ levelOffset,
29
32
  }: TreeProps<T>) => {
30
33
  const context = useMemo(
31
34
  () => ({
@@ -36,8 +39,8 @@ export const Tree = <T = any,>({
36
39
  }),
37
40
  [getItems, getProps, isOpen, isCurrent],
38
41
  );
39
- const items = getItems();
40
- const path = useMemo(() => [id], [id]);
42
+ const items = getItems(root);
43
+ const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
41
44
 
42
45
  return (
43
46
  <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
@@ -47,7 +50,8 @@ export const Tree = <T = any,>({
47
50
  key={item.id}
48
51
  item={item}
49
52
  last={index === items.length - 1}
50
- path={path}
53
+ path={treePath}
54
+ levelOffset={levelOffset}
51
55
  draggable={draggable}
52
56
  renderColumns={renderColumns}
53
57
  canDrop={canDrop}
package/src/components/Tree/TreeItem.tsx CHANGED
@@ -16,7 +16,6 @@ import { S } from '@dxos/echo-schema';
16
16
  import { invariant } from '@dxos/invariant';
17
17
  import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
18
18
  import {
19
- focusRing,
20
19
  ghostHover,
21
20
  hoverableControls,
22
21
  hoverableFocusedKeyboardControls,
@@ -27,7 +26,7 @@ import {
27
26
  import { useTree } from './TreeContext';
28
27
  import { TreeItemHeading } from './TreeItemHeading';
29
28
  import { TreeItemToggle } from './TreeItemToggle';
30
- import { DEFAULT_INDENTATION, paddingIndendation } from './helpers';
29
+ import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
31
30
 
32
31
  type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
33
32
 
@@ -47,6 +46,7 @@ export const isTreeData = (data: unknown): data is TreeData => S.is(TreeDataSche
47
46
  export type TreeItemProps<T = any> = {
48
47
  item: T;
49
48
  path: string[];
49
+ levelOffset?: number;
50
50
  last: boolean;
51
51
  draggable?: boolean;
52
52
  renderColumns?: FC<{
@@ -70,6 +70,7 @@ export const RawTreeItem = <T = any,>({
70
70
  canDrop,
71
71
  onOpenChange,
72
72
  onSelect,
73
+ levelOffset = 2,
73
74
  }: TreeItemProps<T>) => {
74
75
  const { getItems, getProps, isOpen, isCurrent } = useTree();
75
76
  const items = getItems(item);
@@ -77,7 +78,7 @@ export const RawTreeItem = <T = any,>({
77
78
  const path = useMemo(() => [..._path, id], [_path, id]);
78
79
  const open = isOpen(path, item);
79
80
  const current = isCurrent(path, item);
80
- const level = path.length - 2;
81
+ const level = path.length - levelOffset;
81
82
  const isBranch = !!parentOf;
82
83
  const mode: ItemMode = last ? 'last-in-group' : open ? 'expanded' : 'standard';
83
84
  const data = useMemo(() => ({ id, path, item }) satisfies TreeData, [id, path, item]);
@@ -217,13 +218,12 @@ export const RawTreeItem = <T = any,>({
217
218
  aria-labelledby={`${id}__label`}
218
219
  parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
219
220
  classNames={mx(
220
- 'grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input',
221
+ 'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-input',
221
222
  hoverableControls,
222
223
  hoverableFocusedKeyboardControls,
223
224
  hoverableFocusedWithinControls,
224
225
  hoverableDescriptionIcons,
225
226
  ghostHover,
226
- focusRing,
227
227
  className,
228
228
  )}
229
229
  data-itemid={id}
@@ -241,7 +241,7 @@ export const RawTreeItem = <T = any,>({
241
241
  <Treegrid.Cell
242
242
  indent
243
243
  classNames='relative grid grid-cols-subgrid col-[tree-row]'
244
- style={paddingIndendation(level)}
244
+ style={paddingIndentation(level)}
245
245
  >
246
246
  <div role='none' className='flex items-center'>
247
247
  <TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
package/src/components/Tree/TreeItemHeading.tsx CHANGED
@@ -51,14 +51,13 @@ export const TreeItemHeading = memo(
51
51
  asChild
52
52
  ref={forwardedRef}
53
53
  >
54
- {/* TODO(wittjosiah): Class precedence. See #8149. */}
55
54
  <Button
56
55
  data-testid='treeItem.heading'
57
56
  variant='ghost'
58
57
  density='fine'
59
58
  classNames={mx(
60
- 'grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent',
61
- 'disabled:!cursor-default disabled:!opacity-100',
59
+ 'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
60
+ 'disabled:cursor-default disabled:opacity-100',
62
61
  className,
63
62
  )}
64
63
  disabled={disabled}
package/src/components/Tree/TreeItemToggle.tsx CHANGED
@@ -11,10 +11,11 @@ export type TreeItemToggleProps = {
11
11
  open?: boolean;
12
12
  isBranch?: boolean;
13
13
  onToggle?: () => void;
14
+ hidden?: boolean;
14
15
  };
15
16
 
16
17
  export const TreeItemToggle = memo(
17
- forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, onToggle }, forwardedRef) => {
18
+ forwardRef<HTMLButtonElement, TreeItemToggleProps>(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
18
19
  return (
19
20
  <Button
20
21
  ref={forwardedRef}
@@ -22,7 +23,7 @@ export const TreeItemToggle = memo(
22
23
  aria-expanded={open}
23
24
  variant='ghost'
24
25
  density='fine'
25
- classNames={mx('is-6 !pli-1', !isBranch && 'invisible')}
26
+ classNames={mx('is-4 dx-focus-ring-inset pli-0', hidden ? 'hidden' : !isBranch && 'invisible')}
26
27
  onClick={onToggle}
27
28
  >
28
29
  <Icon
package/src/components/Tree/helpers.ts CHANGED
@@ -4,6 +4,6 @@
4
4
 
5
5
  export const DEFAULT_INDENTATION = 8;
6
6
 
7
- export const paddingIndendation = (level: number, indentation = DEFAULT_INDENTATION) => ({
7
+ export const paddingIndentation = (level: number, indentation = DEFAULT_INDENTATION) => ({
8
8
  paddingInlineStart: `${(level - 1) * indentation}px`,
9
9
  });