@dxos/react-ui-list 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f
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/lib/browser/index.mjs +42 -18
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +40 -17
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +42 -18
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/List/List.d.ts +1 -1
- package/dist/types/src/components/List/List.d.ts.map +1 -1
- package/dist/types/src/components/List/ListItem.d.ts +6 -9
- package/dist/types/src/components/List/ListItem.d.ts.map +1 -1
- package/dist/types/src/components/List/ListRoot.d.ts +3 -6
- package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.d.ts +4 -2
- package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.stories.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItem.d.ts +2 -1
- package/dist/types/src/components/Tree/TreeItem.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemHeading.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts +1 -0
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map +1 -1
- package/dist/types/src/components/Tree/helpers.d.ts +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +2 -0
- package/dist/types/src/util/index.d.ts.map +1 -0
- package/dist/types/src/util/path.d.ts +14 -0
- package/dist/types/src/util/path.d.ts.map +1 -0
- package/dist/types/src/util/path.test.d.ts +2 -0
- package/dist/types/src/util/path.test.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +17 -18
- package/src/components/List/ListItem.tsx +10 -4
- package/src/components/Tree/Tree.stories.tsx +1 -1
- package/src/components/Tree/Tree.tsx +9 -5
- package/src/components/Tree/TreeItem.tsx +6 -6
- package/src/components/Tree/TreeItemHeading.tsx +2 -3
- package/src/components/Tree/TreeItemToggle.tsx +3 -2
- package/src/components/Tree/helpers.ts +1 -1
- package/src/index.ts +1 -0
- package/src/util/index.ts +5 -0
- package/src/util/path.test.ts +24 -0
- package/src/util/path.ts +21 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvE,KAAK,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAIF,eAAO,MAAO,YAAY
|
|
1
|
+
{"version":3,"file":"ListRoot.d.ts","sourceRoot":"","sources":["../../../../../src/components/List/ListRoot.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEhF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvE,KAAK,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAC3C,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG;QAAE,IAAI,CAAC,EAAE,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;CACrD,CAAC;AAIF,eAAO,MAAO,YAAY;cAlBnB,MAAM,SAAS;IAkBM,cAAc,4CAA8C,CAAC;AAEzF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc,IAAI;IACxD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,eAAe,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC,GACA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC,CAAC;AAI3D,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,cAAc,oEAQ9C,aAAa,CAAC,CAAC,CAAC,sBA4DlB,CAAC"}
|
|
@@ -3,7 +3,9 @@ import { type TreegridRootProps } from '@dxos/react-ui';
|
|
|
3
3
|
import { type TreeContextType } from './TreeContext';
|
|
4
4
|
import { type TreeItemProps } from './TreeItem';
|
|
5
5
|
export type TreeProps<T = any> = {
|
|
6
|
+
root?: T;
|
|
7
|
+
path?: string[];
|
|
6
8
|
id: string;
|
|
7
|
-
} & TreeContextType & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> & Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;
|
|
8
|
-
export declare const Tree: <T = any>({ id, getItems, getProps, isOpen, isCurrent, draggable, gridTemplateColumns, classNames, renderColumns, canDrop, onOpenChange, onSelect, }: TreeProps<T>) => React.JSX.Element;
|
|
9
|
+
} & TreeContextType & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> & Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
|
|
10
|
+
export declare const Tree: <T = any>({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable, gridTemplateColumns, classNames, renderColumns, canDrop, onOpenChange, onSelect, levelOffset, }: TreeProps<T>) => React.JSX.Element;
|
|
9
11
|
//# sourceMappingURL=Tree.d.ts.map
|
|
@@ -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,
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAIrB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAU9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgF3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,OAAO,IAAI,CAI3C,CAAC"}
|
|
@@ -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
|
|
@@ -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;
|
|
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"}
|
|
@@ -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,
|
|
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"}
|
|
@@ -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
|
|
@@ -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;
|
|
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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const DEFAULT_INDENTATION = 8;
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const paddingIndentation: (level: number, indentation?: number) => {
|
|
3
3
|
paddingInlineStart: string;
|
|
4
4
|
};
|
|
5
5
|
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const Path: {
|
|
2
|
+
create: (...args: string[]) => string;
|
|
3
|
+
parts: (path: string) => string[];
|
|
4
|
+
length: (path: string) => number;
|
|
5
|
+
first: (path: string) => string;
|
|
6
|
+
last: (path: string) => string;
|
|
7
|
+
parent: (path: string) => string;
|
|
8
|
+
hasRoot: (path: string, id: string) => boolean;
|
|
9
|
+
hasChild: (path: string, compare: string) => boolean;
|
|
10
|
+
hasDescendent: (path: string, compare: string) => boolean;
|
|
11
|
+
siblings: (path: string, compare: string) => boolean;
|
|
12
|
+
onPath: (path: string, id: string) => boolean;
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=path.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../src/util/path.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI;sBACG,MAAM,EAAE;kBAEZ,MAAM;mBACL,MAAM;kBACP,MAAM;iBACP,MAAM;mBACJ,MAAM;oBAEL,MAAM,MAAM,MAAM;qBACjB,MAAM,WAAW,MAAM;0BAClB,MAAM,WAAW,MAAM;qBAC5B,MAAM,WAAW,MAAM;mBACzB,MAAM,MAAM,MAAM;CAClC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"path.test.d.ts","sourceRoot":"","sources":["../../../../src/util/path.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.7.
|
|
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.
|
|
3
|
+
"version": "0.7.5-labs.c0e040f",
|
|
4
4
|
"description": "A list component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -25,17 +25,16 @@
|
|
|
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": "
|
|
29
|
-
"@dxos/debug": "0.7.5-labs.
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/invariant": "0.7.5-labs.
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/react-ui-attention": "0.7.5-labs.
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
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.c0e040f",
|
|
30
|
+
"@dxos/echo-schema": "0.7.5-labs.c0e040f",
|
|
31
|
+
"@dxos/invariant": "0.7.5-labs.c0e040f",
|
|
32
|
+
"@dxos/live-object": "0.7.5-labs.c0e040f",
|
|
33
|
+
"@dxos/log": "0.7.5-labs.c0e040f",
|
|
34
|
+
"@dxos/react-ui-text-tooltip": "0.7.5-labs.c0e040f",
|
|
35
|
+
"@dxos/react-ui-attention": "0.7.5-labs.c0e040f",
|
|
36
|
+
"@dxos/util": "0.7.5-labs.c0e040f",
|
|
37
|
+
"@dxos/react-ui-types": "0.7.5-labs.c0e040f"
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
40
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -45,18 +44,18 @@
|
|
|
45
44
|
"react": "~18.2.0",
|
|
46
45
|
"react-dom": "~18.2.0",
|
|
47
46
|
"vite": "5.4.7",
|
|
48
|
-
"@dxos/random": "0.7.5-labs.
|
|
49
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
47
|
+
"@dxos/random": "0.7.5-labs.c0e040f",
|
|
48
|
+
"@dxos/react-ui": "0.7.5-labs.c0e040f",
|
|
49
|
+
"@dxos/storybook-utils": "0.7.5-labs.c0e040f",
|
|
50
|
+
"@dxos/react-ui-theme": "0.7.5-labs.c0e040f"
|
|
52
51
|
},
|
|
53
52
|
"peerDependencies": {
|
|
54
53
|
"@phosphor-icons/react": "^2.1.5",
|
|
55
54
|
"effect": "^3.12.3",
|
|
56
55
|
"react": "~18.2.0",
|
|
57
56
|
"react-dom": "~18.2.0",
|
|
58
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
59
|
-
"@dxos/react-ui
|
|
57
|
+
"@dxos/react-ui-theme": "0.7.5-labs.c0e040f",
|
|
58
|
+
"@dxos/react-ui": "0.7.5-labs.c0e040f"
|
|
60
59
|
},
|
|
61
60
|
"publishConfig": {
|
|
62
61
|
"access": "public"
|
|
@@ -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
|
|
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 && (
|
|
@@ -12,12 +12,12 @@ import React, { useEffect } from 'react';
|
|
|
12
12
|
import { create, type ReactiveObject } from '@dxos/live-object';
|
|
13
13
|
import { faker } from '@dxos/random';
|
|
14
14
|
import { Icon } from '@dxos/react-ui';
|
|
15
|
-
import { Path } from '@dxos/react-ui-mosaic';
|
|
16
15
|
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
17
16
|
|
|
18
17
|
import { Tree } from './Tree';
|
|
19
18
|
import { type TreeData } from './TreeItem';
|
|
20
19
|
import { createTree, updateState, type TestItem } from './testing';
|
|
20
|
+
import { Path } from '../../util';
|
|
21
21
|
|
|
22
22
|
faker.seed(1234);
|
|
23
23
|
|
|
@@ -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
|
|
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={
|
|
53
|
+
path={treePath}
|
|
54
|
+
levelOffset={levelOffset}
|
|
51
55
|
draggable={draggable}
|
|
52
56
|
renderColumns={renderColumns}
|
|
53
57
|
canDrop={canDrop}
|
|
@@ -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,
|
|
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 -
|
|
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]
|
|
221
|
+
'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface',
|
|
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={
|
|
244
|
+
style={paddingIndentation(level)}
|
|
245
245
|
>
|
|
246
246
|
<div role='none' className='flex items-center'>
|
|
247
247
|
<TreeItemToggle open={open} isBranch={isBranch} onToggle={handleOpenChange} />
|
|
@@ -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
|
|
61
|
-
'disabled
|
|
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}
|
|
@@ -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-
|
|
26
|
+
classNames={mx('is-4 dx-focus-ring-inset pli-0', hidden ? 'hidden' : !isBranch && 'invisible')}
|
|
26
27
|
onClick={onToggle}
|
|
27
28
|
>
|
|
28
29
|
<Icon
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
export const DEFAULT_INDENTATION = 8;
|
|
6
6
|
|
|
7
|
-
export const
|
|
7
|
+
export const paddingIndentation = (level: number, indentation = DEFAULT_INDENTATION) => ({
|
|
8
8
|
paddingInlineStart: `${(level - 1) * indentation}px`,
|
|
9
9
|
});
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { describe, expect, test } from 'vitest';
|
|
6
|
+
|
|
7
|
+
import { Path } from './path';
|
|
8
|
+
|
|
9
|
+
describe('paths', () => {
|
|
10
|
+
test('create', () => {
|
|
11
|
+
const path = Path.create('a', 'b', 'c');
|
|
12
|
+
expect(Path.first(path)).to.eq('a');
|
|
13
|
+
expect(Path.last(path)).to.eq('c');
|
|
14
|
+
|
|
15
|
+
expect(Path.hasRoot(path, 'a')).to.be.true;
|
|
16
|
+
expect(Path.hasRoot(path, 'x')).to.be.false;
|
|
17
|
+
|
|
18
|
+
expect(Path.hasChild(Path.create('a', 'b'), path)).to.be.true;
|
|
19
|
+
expect(Path.hasChild(Path.create('a'), path)).to.be.false;
|
|
20
|
+
|
|
21
|
+
expect(Path.hasDescendent(Path.create('a', 'b'), path)).to.be.true;
|
|
22
|
+
expect(Path.hasDescendent(Path.create('a'), path)).to.be.true;
|
|
23
|
+
});
|
|
24
|
+
});
|
package/src/util/path.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
const SEPARATOR = '~';
|
|
6
|
+
|
|
7
|
+
export const Path = {
|
|
8
|
+
create: (...args: string[]) => args.join(SEPARATOR),
|
|
9
|
+
|
|
10
|
+
parts: (path: string) => path.split(SEPARATOR),
|
|
11
|
+
length: (path: string) => path.split(SEPARATOR).length,
|
|
12
|
+
first: (path: string) => path.split(SEPARATOR)[0] ?? path,
|
|
13
|
+
last: (path: string) => path.split(SEPARATOR).at(-1) ?? path,
|
|
14
|
+
parent: (path: string) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
|
|
15
|
+
|
|
16
|
+
hasRoot: (path: string, id: string) => Path.first(path) === id,
|
|
17
|
+
hasChild: (path: string, compare: string) => Path.parent(compare) === path,
|
|
18
|
+
hasDescendent: (path: string, compare: string) => compare !== path && compare.startsWith(path),
|
|
19
|
+
siblings: (path: string, compare: string) => Path.parent(path) === Path.parent(compare),
|
|
20
|
+
onPath: (path: string, id: string) => Path.parts(path).includes(id),
|
|
21
|
+
};
|