@edux-design/tree-select 0.2.4 → 0.3.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/CHANGELOG.md +83 -0
- package/README.md +118 -3
- package/dist/index.css +39 -0
- package/dist/index.d.mts +92 -18
- package/dist/index.d.ts +92 -18
- package/dist/index.js +257 -66
- package/dist/index.mjs +257 -66
- package/docs/DS15_INVENTORY.md +52 -0
- package/docs/DS15_VERIFICATION.md +62 -0
- package/package.json +7 -14
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Add controlled current-item state, consistent pointer and keyboard activation, accessible item labels and imperative visible-row focus and scrolling. Keep rename, drag, modifier and interactive-child behaviour isolated. Describe built-in mutation output truthfully as TreeSelectNode[].
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
- @edux-design/menus@1.1.0
|
|
14
|
+
- @edux-design/tooltips@0.2.0
|
|
15
|
+
|
|
16
|
+
## 0.2.5
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Udpated inline component for tree item label
|
|
21
|
+
|
|
22
|
+
## 0.2.4
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Exposed new meta data for drag items
|
|
27
|
+
|
|
28
|
+
## 0.2.3
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- Republish icons, kanban board, and tree select with the latest package updates.
|
|
33
|
+
- TreeSelect `onDataChange` now emits an optional `meta` argument as `onDataChange(nextTree, meta?)`, including drag metadata such as `draggedRootIds`, `draggedIds`, source and target parents, sibling index, and projected depth for drag-and-drop persistence.
|
|
34
|
+
- Updated dependencies
|
|
35
|
+
- @edux-design/icons@0.1.16
|
|
36
|
+
|
|
37
|
+
## 0.2.2
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- Added acrtion bar
|
|
42
|
+
|
|
43
|
+
## 0.2.1
|
|
44
|
+
|
|
45
|
+
### Patch Changes
|
|
46
|
+
|
|
47
|
+
- Add more props
|
|
48
|
+
|
|
49
|
+
## 0.2.0
|
|
50
|
+
|
|
51
|
+
### Minor Changes
|
|
52
|
+
|
|
53
|
+
- Moved react / dom to peer deps
|
|
54
|
+
|
|
55
|
+
### Patch Changes
|
|
56
|
+
|
|
57
|
+
- Updated dependencies
|
|
58
|
+
- @edux-design/tooltips@0.1.0
|
|
59
|
+
- @edux-design/buttons@0.1.0
|
|
60
|
+
- @edux-design/icons@0.1.0
|
|
61
|
+
- @edux-design/utils@0.1.0
|
|
62
|
+
|
|
63
|
+
## 0.1.2
|
|
64
|
+
|
|
65
|
+
### Patch Changes
|
|
66
|
+
|
|
67
|
+
- Removed react/dom from build
|
|
68
|
+
|
|
69
|
+
## 0.1.1
|
|
70
|
+
|
|
71
|
+
### Patch Changes
|
|
72
|
+
|
|
73
|
+
- Added missing props - delete, labels
|
|
74
|
+
|
|
75
|
+
## 0.1.0
|
|
76
|
+
|
|
77
|
+
### Minor Changes
|
|
78
|
+
|
|
79
|
+
- Added all trree select props
|
|
80
|
+
|
|
81
|
+
## 0.0.1
|
|
82
|
+
|
|
83
|
+
- Initial release.
|
package/README.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
TreeSelect renders hierarchical data with expand/collapse controls, optional inline editing, optional add-item actions, and drag-and-drop reordering. The component is controlled: you own the tree data and receive updates via callbacks.
|
|
4
4
|
|
|
5
|
+
## Token contracts
|
|
6
|
+
|
|
7
|
+
Selection and drag-preview states use the existing semantic colour and shadow
|
|
8
|
+
tokens. Selected rows blend `--color-primary-600` at 8% opacity, dragged rows
|
|
9
|
+
blend `--color-fg-base` at 4%, the drop indicator uses `bg-bg-primary-base`,
|
|
10
|
+
and the drag overlay uses `shadow-lg`. These preserve the existing state
|
|
11
|
+
geometry while avoiding raw colour literals.
|
|
12
|
+
|
|
5
13
|
---
|
|
6
14
|
|
|
7
15
|
## Installation
|
|
@@ -12,7 +20,7 @@ pnpm add @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-
|
|
|
12
20
|
npm install @edux-design/tree-select @edux-design/forms @edux-design/buttons @edux-design/icons @edux-design/menus @edux-design/tooltips @dnd-kit/core @dnd-kit/sortable
|
|
13
21
|
```
|
|
14
22
|
|
|
15
|
-
Peer
|
|
23
|
+
Peer dependencies support React and React DOM 18 or later.
|
|
16
24
|
|
|
17
25
|
---
|
|
18
26
|
|
|
@@ -51,6 +59,80 @@ export function Example() {
|
|
|
51
59
|
}
|
|
52
60
|
```
|
|
53
61
|
|
|
62
|
+
### Navigation and current item
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { useRef, useState } from "react";
|
|
66
|
+
import { TreeSelect, type TreeSelectHandle } from "@edux-design/tree-select";
|
|
67
|
+
|
|
68
|
+
function Navigation() {
|
|
69
|
+
const [currentId, setCurrentId] = useState<string | null>(null);
|
|
70
|
+
const tree = useRef<TreeSelectHandle>(null);
|
|
71
|
+
return (
|
|
72
|
+
<TreeSelect
|
|
73
|
+
ref={tree}
|
|
74
|
+
data={data}
|
|
75
|
+
aria-label="Document navigation"
|
|
76
|
+
currentId={currentId}
|
|
77
|
+
onNodeActivate={({ id, node, event, inputSource }) => {
|
|
78
|
+
// Resolve domain navigation here; update current only after acceptance.
|
|
79
|
+
setCurrentId(id);
|
|
80
|
+
}}
|
|
81
|
+
getItemLabel={(node) => String(node.label ?? node.id)}
|
|
82
|
+
rowClassName="cursor-pointer"
|
|
83
|
+
labelClassName="min-w-0 flex-1"
|
|
84
|
+
/>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
`onNodeActivate` receives `{ id, node, depth, parentId, hasChildren, event,
|
|
90
|
+
inputSource }`. IDs and parent IDs are normalised strings; `node` is the original
|
|
91
|
+
node object. `inputSource` is `"pointer"` with a React mouse event or `"keyboard"`
|
|
92
|
+
with a React keyboard event. Plain row clicks and row Enter/Space activate once;
|
|
93
|
+
repeated keydown events do not activate. Ctrl/Meta/Shift/Alt suppress activation;
|
|
94
|
+
Ctrl/Meta/Shift retain the existing adjacent-sibling drag selection behaviour.
|
|
95
|
+
|
|
96
|
+
Tree controls, drag handles, rename editors and interactive custom-label
|
|
97
|
+
children do not activate the row. Focusable tooltip/status children are also
|
|
98
|
+
isolated. Use `data-tree-interactive` on any additional custom interaction region.
|
|
99
|
+
A child or root capture handler can cancel activation with `preventDefault()`;
|
|
100
|
+
`stopPropagation()` also keeps child events with that child. The activation
|
|
101
|
+
callback owns navigation, including cancellation or rejecting a navigation target.
|
|
102
|
+
There is no automatic current-item update. Native disabled child controls retain
|
|
103
|
+
their native disabled behaviour. TreeSelect has no global disabled prop.
|
|
104
|
+
|
|
105
|
+
`currentId` is controlled and independent from multi-drag selection. Its visible
|
|
106
|
+
row uses existing semantic current-state colours and `aria-current="page"`.
|
|
107
|
+
`aria-selected` continues to describe drag selection. Hidden, filtered or removed
|
|
108
|
+
current IDs do not highlight a different row.
|
|
109
|
+
|
|
110
|
+
The forwarded ref is a `TreeSelectHandle`, with:
|
|
111
|
+
|
|
112
|
+
- `getRowElement(id): HTMLDivElement | null` for the live visible row;
|
|
113
|
+
- `focusItem(id, options?: FocusOptions): boolean` for explicit row focus;
|
|
114
|
+
- `scrollToItem(id, options?: ScrollIntoViewOptions): boolean` for scrolling
|
|
115
|
+
without focus movement (default block/inline `nearest`).
|
|
116
|
+
|
|
117
|
+
Missing, collapsed, filtered, removed or unmounted targets return null/false;
|
|
118
|
+
these methods never expand, activate or change selection/current state. Scroll
|
|
119
|
+
returns false when the environment has no native `scrollIntoView`. Handles and
|
|
120
|
+
row elements belong to one instance and are cleared on unmount. Root native div
|
|
121
|
+
attributes/events are supported; the ref itself is the imperative handle.
|
|
122
|
+
|
|
123
|
+
Rows use roving focus. Arrow Up/Down, Home/End move between visible rows; Right
|
|
124
|
+
expands or moves to the first child, Left collapses or moves to the parent. F2
|
|
125
|
+
starts label editing at an editable level. Descendant controls retain their own
|
|
126
|
+
keyboard events. `getItemLabel(node)` supplies accessible names for rich labels;
|
|
127
|
+
without it the fallback is string/number label text or the node's ID.
|
|
128
|
+
|
|
129
|
+
`renderLabel` retains its original context and adds `isCurrent`, `isSelected`,
|
|
130
|
+
`isFocused` (focus within the row) and `getRowElement()`. A drag overlay returns null from its context's
|
|
131
|
+
`getRowElement`. `rowClassName` and `labelClassName` accept strings or functions
|
|
132
|
+
of that same label context, so host styling can use supported slots. Other
|
|
133
|
+
private CSS selectors, such as host-specific per-node action suppression, are
|
|
134
|
+
not replaced by a new per-node settings API in this release.
|
|
135
|
+
|
|
54
136
|
### Drag and drop
|
|
55
137
|
|
|
56
138
|
```jsx
|
|
@@ -123,7 +205,11 @@ export function ChevronExample() {
|
|
|
123
205
|
Tree data to render. This component is controlled; updates are emitted through `onDataChange`.
|
|
124
206
|
|
|
125
207
|
### `onDataChange` (function)
|
|
126
|
-
Called with `(nextTree, meta
|
|
208
|
+
Called with `(nextTree, meta)` when edits, add actions, deletes, or drag-and-drop reordering occur.
|
|
209
|
+
Existing node metadata is preserved. Built-in add actions create nodes with `id`
|
|
210
|
+
and `label` only; enrich new nodes with required domain metadata in this callback.
|
|
211
|
+
The emitted tree is typed `TreeSelectNode[]` with unknown extension keys, while
|
|
212
|
+
activation and label contexts retain the supplied node subtype.
|
|
127
213
|
|
|
128
214
|
```ts
|
|
129
215
|
type TreeSelectChangeMeta = {
|
|
@@ -179,6 +265,29 @@ import { MenuList, MenuItem } from "@edux-design/menus";
|
|
|
179
265
|
/>;
|
|
180
266
|
```
|
|
181
267
|
|
|
268
|
+
### `renderLabel` (function)
|
|
269
|
+
Renders custom inline content where the label normally appears. This is the supported way to compose metadata like `Tag` elements next to the item title.
|
|
270
|
+
|
|
271
|
+
```jsx
|
|
272
|
+
import { Tag } from "@edux-design/tags";
|
|
273
|
+
|
|
274
|
+
<TreeSelect
|
|
275
|
+
data={data}
|
|
276
|
+
renderLabel={({ id, node, hasChildren }) => (
|
|
277
|
+
<>
|
|
278
|
+
<span>{node.label ?? id}</span>
|
|
279
|
+
<Tag
|
|
280
|
+
size="small"
|
|
281
|
+
tone="subtle"
|
|
282
|
+
variant={hasChildren ? "information" : "neutral"}
|
|
283
|
+
>
|
|
284
|
+
{hasChildren ? "Group" : "Leaf"}
|
|
285
|
+
</Tag>
|
|
286
|
+
</>
|
|
287
|
+
)}
|
|
288
|
+
/>;
|
|
289
|
+
```
|
|
290
|
+
|
|
182
291
|
### `maxLabelLength` (number)
|
|
183
292
|
Limits label width by character count and truncates with an ellipsis when exceeded.
|
|
184
293
|
|
|
@@ -244,6 +353,7 @@ levelConfig={{
|
|
|
244
353
|
- `levelConfig` can override editability, actions, and tooltips per depth.
|
|
245
354
|
- Drag-and-drop supports reordering within a level and moving items between levels.
|
|
246
355
|
- Drag handle alignment is set so child handles align under the parent toggle.
|
|
356
|
+
- `renderLabel` customizes both the row content and the single-item drag overlay.
|
|
247
357
|
|
|
248
358
|
---
|
|
249
359
|
|
|
@@ -255,4 +365,9 @@ pnpm --filter @edux-design/tree-select check-types
|
|
|
255
365
|
pnpm --filter @edux-design/tree-select build
|
|
256
366
|
```
|
|
257
367
|
|
|
258
|
-
Storybook examples live in `src/demos/TreeSelect.stories.jsx
|
|
368
|
+
Storybook examples live in `src/demos/TreeSelect.stories.jsx` and
|
|
369
|
+
`src/demos/TreeSelectInteraction.stories.tsx`. The interaction demos cover
|
|
370
|
+
navigation, nested editing, filtering, narrow widths, multi-drag, both brands
|
|
371
|
+
and light/dark themes; browser play functions exercise keyboard and pointer
|
|
372
|
+
behaviour and run axe checks. See [DS15 inventory](docs/DS15_INVENTORY.md) for
|
|
373
|
+
consumer boundaries and registry-versus-installed baseline evidence.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* src/styles.css */
|
|
2
|
+
[data-data-component=tree-select] {
|
|
3
|
+
color: var(--theme-foreground, revert-layer);
|
|
4
|
+
}
|
|
5
|
+
[data-data-component=tree-select] [data-tree-row] {
|
|
6
|
+
border-radius: var(--theme-radius, revert-layer);
|
|
7
|
+
}
|
|
8
|
+
[data-data-component=tree-select] [data-tree-row][data-selected=true] {
|
|
9
|
+
background: var(--theme-hover-surface, revert-layer);
|
|
10
|
+
}
|
|
11
|
+
[data-data-component=tree-select] [data-tree-row]:hover {
|
|
12
|
+
background: var(--theme-hover-surface, revert-layer);
|
|
13
|
+
}
|
|
14
|
+
[data-data-component=tree-select] [data-tree-row] > button {
|
|
15
|
+
background: var(--theme-surface, revert-layer);
|
|
16
|
+
color: var(--theme-foreground, revert-layer);
|
|
17
|
+
border-color: var(--theme-border, revert-layer);
|
|
18
|
+
border-radius: var(--theme-radius, revert-layer);
|
|
19
|
+
box-shadow: var(--theme-control-shadow, revert-layer);
|
|
20
|
+
}
|
|
21
|
+
[data-data-component=tree-select] [data-tree-input] {
|
|
22
|
+
color: var(--theme-foreground, revert-layer);
|
|
23
|
+
}
|
|
24
|
+
[data-data-component=tree-select] [data-tree-row]:focus-visible,
|
|
25
|
+
[data-data-component=tree-select] [data-tree-label]:focus-visible,
|
|
26
|
+
[data-data-component=tree-select] [data-tree-input]:focus-visible,
|
|
27
|
+
[data-data-component=tree-select] button:not([data-button-component]):focus-visible {
|
|
28
|
+
outline: var(--theme-focus-outline, revert-layer);
|
|
29
|
+
outline-offset: var(--theme-focus-offset-outset, revert-layer);
|
|
30
|
+
}
|
|
31
|
+
[data-data-component=tree-select] [data-data-part=tree-overlay] {
|
|
32
|
+
background: var(--theme-surface, revert-layer);
|
|
33
|
+
color: var(--theme-foreground, revert-layer);
|
|
34
|
+
border-color: var(--theme-border, revert-layer);
|
|
35
|
+
box-shadow: var(--theme-control-shadow, revert-layer);
|
|
36
|
+
}
|
|
37
|
+
[data-data-component=tree-select] [data-data-part=tree-indicator] {
|
|
38
|
+
background: var(--theme-inverse-surface, revert-layer);
|
|
39
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,25 +1,99 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { RefAttributes, ReactElement } from 'react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
type TreeSelectId = string | number;
|
|
5
|
+
interface TreeSelectNode {
|
|
6
|
+
id: TreeSelectId;
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
children?: TreeSelectNode[];
|
|
9
|
+
[key: string]: unknown;
|
|
10
|
+
}
|
|
11
|
+
type TreeSelectExpanded = "all" | number | readonly TreeSelectId[] | ReadonlySet<TreeSelectId>;
|
|
12
|
+
interface TreeSelectItemContext<T extends TreeSelectNode = TreeSelectNode> {
|
|
13
|
+
/** Normalised string ID, including when node.id is numeric. */
|
|
14
|
+
id: string;
|
|
15
|
+
node: T;
|
|
16
|
+
depth: number;
|
|
17
|
+
parentId: string | null;
|
|
18
|
+
hasChildren: boolean;
|
|
19
|
+
}
|
|
20
|
+
interface TreeSelectLabelContext<T extends TreeSelectNode = TreeSelectNode> extends TreeSelectItemContext<T> {
|
|
21
|
+
isExpanded: boolean;
|
|
22
|
+
isCurrent: boolean;
|
|
23
|
+
isSelected: boolean;
|
|
24
|
+
isFocused: boolean;
|
|
25
|
+
/** Returns the live visible row; null in an unmounted row or drag overlay. */
|
|
26
|
+
getRowElement(): HTMLDivElement | null;
|
|
27
|
+
}
|
|
28
|
+
type TreeSelectActivation<T extends TreeSelectNode = TreeSelectNode> = TreeSelectItemContext<T> & ({
|
|
29
|
+
inputSource: "pointer";
|
|
30
|
+
event: React.MouseEvent<HTMLDivElement>;
|
|
31
|
+
} | {
|
|
32
|
+
inputSource: "keyboard";
|
|
33
|
+
event: React.KeyboardEvent<HTMLDivElement>;
|
|
34
|
+
});
|
|
35
|
+
interface TreeSelectHandle {
|
|
36
|
+
getRowElement(id: TreeSelectId): HTMLDivElement | null;
|
|
37
|
+
focusItem(id: TreeSelectId, options?: FocusOptions): boolean;
|
|
38
|
+
scrollToItem(id: TreeSelectId, options?: ScrollIntoViewOptions): boolean;
|
|
39
|
+
}
|
|
40
|
+
interface TreeSelectChangeMeta {
|
|
41
|
+
reason: "drag" | "edit" | "add-child" | "add-sibling" | "delete";
|
|
42
|
+
activeId?: string | null;
|
|
43
|
+
draggedRootIds?: string[];
|
|
44
|
+
draggedIds?: string[];
|
|
45
|
+
sourceParentId?: string | null;
|
|
46
|
+
targetParentId?: string | null;
|
|
47
|
+
targetSiblingIndex?: number | null;
|
|
48
|
+
projectedDepth?: number | null;
|
|
49
|
+
}
|
|
50
|
+
interface TreeSelectLevelSettings {
|
|
51
|
+
editable?: boolean;
|
|
52
|
+
actions?: {
|
|
53
|
+
addChild?: boolean;
|
|
54
|
+
addSibling?: boolean;
|
|
55
|
+
delete?: boolean;
|
|
56
|
+
};
|
|
57
|
+
tooltips?: {
|
|
58
|
+
addChild?: string;
|
|
59
|
+
addSibling?: string;
|
|
60
|
+
delete?: string;
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
interface TreeSelectProps<T extends TreeSelectNode = TreeSelectNode> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
|
|
64
|
+
data: T[];
|
|
65
|
+
onDataChange?: (data: TreeSelectNode[], meta: TreeSelectChangeMeta) => void;
|
|
6
66
|
allowDragAndDrop?: boolean;
|
|
7
67
|
allowMultiDrag?: boolean;
|
|
8
68
|
isEditable?: boolean;
|
|
9
69
|
allowDelete?: boolean;
|
|
10
70
|
useChevron?: boolean;
|
|
11
|
-
actionButtonsPosition?:
|
|
12
|
-
maxLabelLength
|
|
13
|
-
maxDepth
|
|
14
|
-
addChildTooltip
|
|
15
|
-
addSiblingTooltip
|
|
16
|
-
deleteTooltip
|
|
17
|
-
onLabelChange:
|
|
18
|
-
levelConfig
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
71
|
+
actionButtonsPosition?: "start" | "end";
|
|
72
|
+
maxLabelLength?: number;
|
|
73
|
+
maxDepth?: number;
|
|
74
|
+
addChildTooltip?: string;
|
|
75
|
+
addSiblingTooltip?: string;
|
|
76
|
+
deleteTooltip?: string;
|
|
77
|
+
onLabelChange?: (id: string, nextLabel: string) => void;
|
|
78
|
+
levelConfig?: {
|
|
79
|
+
default?: TreeSelectLevelSettings;
|
|
80
|
+
levels?: Record<number, TreeSelectLevelSettings>;
|
|
81
|
+
};
|
|
82
|
+
defaultExpanded?: TreeSelectExpanded;
|
|
83
|
+
expanded?: TreeSelectExpanded;
|
|
84
|
+
onExpandedChange?: (expanded: Set<string>) => void;
|
|
85
|
+
renderAdditionalActionsMenu?: (context: TreeSelectItemContext<T>) => React.ReactNode;
|
|
86
|
+
renderLabel?: (context: TreeSelectLabelContext<T>) => React.ReactNode;
|
|
87
|
+
onNodeActivate?: (activation: TreeSelectActivation<T>) => void;
|
|
88
|
+
currentId?: TreeSelectId | null;
|
|
89
|
+
getItemLabel?: (node: T) => string;
|
|
90
|
+
rowClassName?: string | ((context: TreeSelectLabelContext<T>) => string | undefined);
|
|
91
|
+
labelClassName?: string | ((context: TreeSelectLabelContext<T>) => string | undefined);
|
|
92
|
+
"aria-label"?: string;
|
|
93
|
+
"aria-labelledby"?: string;
|
|
94
|
+
}
|
|
24
95
|
|
|
25
|
-
|
|
96
|
+
/** The implementation preserves the node subtype supplied by the consumer. */
|
|
97
|
+
declare const TreeSelect: <T extends TreeSelectNode = TreeSelectNode>(props: TreeSelectProps<T> & RefAttributes<TreeSelectHandle>) => ReactElement;
|
|
98
|
+
|
|
99
|
+
export { TreeSelect, type TreeSelectActivation, type TreeSelectChangeMeta, type TreeSelectExpanded, type TreeSelectHandle, type TreeSelectId, type TreeSelectItemContext, type TreeSelectLabelContext, type TreeSelectLevelSettings, type TreeSelectNode, type TreeSelectProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,25 +1,99 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { RefAttributes, ReactElement } from 'react';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
type TreeSelectId = string | number;
|
|
5
|
+
interface TreeSelectNode {
|
|
6
|
+
id: TreeSelectId;
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
children?: TreeSelectNode[];
|
|
9
|
+
[key: string]: unknown;
|
|
10
|
+
}
|
|
11
|
+
type TreeSelectExpanded = "all" | number | readonly TreeSelectId[] | ReadonlySet<TreeSelectId>;
|
|
12
|
+
interface TreeSelectItemContext<T extends TreeSelectNode = TreeSelectNode> {
|
|
13
|
+
/** Normalised string ID, including when node.id is numeric. */
|
|
14
|
+
id: string;
|
|
15
|
+
node: T;
|
|
16
|
+
depth: number;
|
|
17
|
+
parentId: string | null;
|
|
18
|
+
hasChildren: boolean;
|
|
19
|
+
}
|
|
20
|
+
interface TreeSelectLabelContext<T extends TreeSelectNode = TreeSelectNode> extends TreeSelectItemContext<T> {
|
|
21
|
+
isExpanded: boolean;
|
|
22
|
+
isCurrent: boolean;
|
|
23
|
+
isSelected: boolean;
|
|
24
|
+
isFocused: boolean;
|
|
25
|
+
/** Returns the live visible row; null in an unmounted row or drag overlay. */
|
|
26
|
+
getRowElement(): HTMLDivElement | null;
|
|
27
|
+
}
|
|
28
|
+
type TreeSelectActivation<T extends TreeSelectNode = TreeSelectNode> = TreeSelectItemContext<T> & ({
|
|
29
|
+
inputSource: "pointer";
|
|
30
|
+
event: React.MouseEvent<HTMLDivElement>;
|
|
31
|
+
} | {
|
|
32
|
+
inputSource: "keyboard";
|
|
33
|
+
event: React.KeyboardEvent<HTMLDivElement>;
|
|
34
|
+
});
|
|
35
|
+
interface TreeSelectHandle {
|
|
36
|
+
getRowElement(id: TreeSelectId): HTMLDivElement | null;
|
|
37
|
+
focusItem(id: TreeSelectId, options?: FocusOptions): boolean;
|
|
38
|
+
scrollToItem(id: TreeSelectId, options?: ScrollIntoViewOptions): boolean;
|
|
39
|
+
}
|
|
40
|
+
interface TreeSelectChangeMeta {
|
|
41
|
+
reason: "drag" | "edit" | "add-child" | "add-sibling" | "delete";
|
|
42
|
+
activeId?: string | null;
|
|
43
|
+
draggedRootIds?: string[];
|
|
44
|
+
draggedIds?: string[];
|
|
45
|
+
sourceParentId?: string | null;
|
|
46
|
+
targetParentId?: string | null;
|
|
47
|
+
targetSiblingIndex?: number | null;
|
|
48
|
+
projectedDepth?: number | null;
|
|
49
|
+
}
|
|
50
|
+
interface TreeSelectLevelSettings {
|
|
51
|
+
editable?: boolean;
|
|
52
|
+
actions?: {
|
|
53
|
+
addChild?: boolean;
|
|
54
|
+
addSibling?: boolean;
|
|
55
|
+
delete?: boolean;
|
|
56
|
+
};
|
|
57
|
+
tooltips?: {
|
|
58
|
+
addChild?: string;
|
|
59
|
+
addSibling?: string;
|
|
60
|
+
delete?: string;
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
interface TreeSelectProps<T extends TreeSelectNode = TreeSelectNode> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "defaultValue"> {
|
|
64
|
+
data: T[];
|
|
65
|
+
onDataChange?: (data: TreeSelectNode[], meta: TreeSelectChangeMeta) => void;
|
|
6
66
|
allowDragAndDrop?: boolean;
|
|
7
67
|
allowMultiDrag?: boolean;
|
|
8
68
|
isEditable?: boolean;
|
|
9
69
|
allowDelete?: boolean;
|
|
10
70
|
useChevron?: boolean;
|
|
11
|
-
actionButtonsPosition?:
|
|
12
|
-
maxLabelLength
|
|
13
|
-
maxDepth
|
|
14
|
-
addChildTooltip
|
|
15
|
-
addSiblingTooltip
|
|
16
|
-
deleteTooltip
|
|
17
|
-
onLabelChange:
|
|
18
|
-
levelConfig
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
71
|
+
actionButtonsPosition?: "start" | "end";
|
|
72
|
+
maxLabelLength?: number;
|
|
73
|
+
maxDepth?: number;
|
|
74
|
+
addChildTooltip?: string;
|
|
75
|
+
addSiblingTooltip?: string;
|
|
76
|
+
deleteTooltip?: string;
|
|
77
|
+
onLabelChange?: (id: string, nextLabel: string) => void;
|
|
78
|
+
levelConfig?: {
|
|
79
|
+
default?: TreeSelectLevelSettings;
|
|
80
|
+
levels?: Record<number, TreeSelectLevelSettings>;
|
|
81
|
+
};
|
|
82
|
+
defaultExpanded?: TreeSelectExpanded;
|
|
83
|
+
expanded?: TreeSelectExpanded;
|
|
84
|
+
onExpandedChange?: (expanded: Set<string>) => void;
|
|
85
|
+
renderAdditionalActionsMenu?: (context: TreeSelectItemContext<T>) => React.ReactNode;
|
|
86
|
+
renderLabel?: (context: TreeSelectLabelContext<T>) => React.ReactNode;
|
|
87
|
+
onNodeActivate?: (activation: TreeSelectActivation<T>) => void;
|
|
88
|
+
currentId?: TreeSelectId | null;
|
|
89
|
+
getItemLabel?: (node: T) => string;
|
|
90
|
+
rowClassName?: string | ((context: TreeSelectLabelContext<T>) => string | undefined);
|
|
91
|
+
labelClassName?: string | ((context: TreeSelectLabelContext<T>) => string | undefined);
|
|
92
|
+
"aria-label"?: string;
|
|
93
|
+
"aria-labelledby"?: string;
|
|
94
|
+
}
|
|
24
95
|
|
|
25
|
-
|
|
96
|
+
/** The implementation preserves the node subtype supplied by the consumer. */
|
|
97
|
+
declare const TreeSelect: <T extends TreeSelectNode = TreeSelectNode>(props: TreeSelectProps<T> & RefAttributes<TreeSelectHandle>) => ReactElement;
|
|
98
|
+
|
|
99
|
+
export { TreeSelect, type TreeSelectActivation, type TreeSelectChangeMeta, type TreeSelectExpanded, type TreeSelectHandle, type TreeSelectId, type TreeSelectItemContext, type TreeSelectLabelContext, type TreeSelectLevelSettings, type TreeSelectNode, type TreeSelectProps };
|