@proyecto-viviana/solid-stately 0.2.3 → 0.2.7
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/LICENSE +21 -0
- package/dist/autocomplete/createAutocompleteState.d.ts +2 -1
- package/dist/checkbox/createCheckboxGroupState.d.ts +10 -1
- package/dist/collections/types.d.ts +11 -0
- package/dist/color/getColorChannels.d.ts +20 -0
- package/dist/data/createAsyncList.d.ts +111 -0
- package/dist/data/createListData.d.ts +65 -0
- package/dist/data/createTreeData.d.ts +61 -0
- package/dist/data/index.d.ts +3 -0
- package/dist/datepicker/index.d.ts +10 -0
- package/dist/grid/types.d.ts +5 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +3737 -2697
- package/dist/index.js.map +1 -7
- package/dist/menu/index.d.ts +8 -0
- package/dist/radio/createRadioGroupState.d.ts +10 -1
- package/dist/select/createSelectState.d.ts +17 -0
- package/dist/selection/index.d.ts +11 -0
- package/dist/toast/createToastState.d.ts +7 -1
- package/dist/toggle/createToggleGroupState.d.ts +45 -0
- package/dist/toggle/index.d.ts +1 -0
- package/dist/tree/TreeCollection.d.ts +3 -2
- package/package.json +6 -5
- package/src/autocomplete/createAutocompleteState.ts +10 -11
- package/src/calendar/createDateFieldState.ts +24 -1
- package/src/checkbox/createCheckboxGroupState.ts +42 -6
- package/src/collections/ListCollection.ts +152 -146
- package/src/collections/createListState.ts +266 -264
- package/src/collections/createMenuState.ts +106 -106
- package/src/collections/createSelectionState.ts +336 -336
- package/src/collections/index.ts +46 -46
- package/src/collections/types.ts +181 -169
- package/src/color/Color.ts +951 -951
- package/src/color/createColorAreaState.ts +293 -293
- package/src/color/createColorFieldState.ts +292 -292
- package/src/color/createColorSliderState.ts +241 -241
- package/src/color/createColorWheelState.ts +211 -211
- package/src/color/getColorChannels.ts +34 -0
- package/src/color/index.ts +47 -47
- package/src/color/types.ts +127 -127
- package/src/combobox/createComboBoxState.ts +703 -703
- package/src/combobox/index.ts +13 -13
- package/src/data/createAsyncList.ts +377 -0
- package/src/data/createListData.ts +298 -0
- package/src/data/createTreeData.ts +433 -0
- package/src/data/index.ts +25 -0
- package/src/datepicker/index.ts +36 -0
- package/src/disclosure/createDisclosureState.ts +4 -4
- package/src/dnd/createDragState.ts +153 -153
- package/src/dnd/createDraggableCollectionState.ts +165 -165
- package/src/dnd/createDropState.ts +212 -212
- package/src/dnd/createDroppableCollectionState.ts +357 -357
- package/src/dnd/index.ts +76 -76
- package/src/dnd/types.ts +317 -317
- package/src/form/createFormValidationState.ts +389 -389
- package/src/form/index.ts +15 -15
- package/src/grid/types.ts +5 -0
- package/src/index.ts +49 -0
- package/src/menu/index.ts +19 -0
- package/src/numberfield/createNumberFieldState.ts +427 -383
- package/src/numberfield/index.ts +5 -5
- package/src/overlays/createOverlayTriggerState.ts +67 -67
- package/src/overlays/index.ts +5 -5
- package/src/radio/createRadioGroupState.ts +44 -6
- package/src/searchfield/createSearchFieldState.ts +62 -62
- package/src/searchfield/index.ts +5 -5
- package/src/select/createSelectState.ts +290 -181
- package/src/select/index.ts +5 -5
- package/src/selection/index.ts +28 -0
- package/src/slider/createSliderState.ts +211 -211
- package/src/slider/index.ts +6 -6
- package/src/tabs/createTabListState.ts +37 -11
- package/src/toast/createToastState.d.ts +6 -1
- package/src/toast/createToastState.ts +8 -1
- package/src/toggle/createToggleGroupState.ts +127 -0
- package/src/toggle/index.ts +6 -0
- package/src/tooltip/createTooltipTriggerState.ts +183 -183
- package/src/tooltip/index.ts +6 -6
- package/src/tree/TreeCollection.ts +208 -175
- package/src/tree/createTreeState.ts +392 -392
- package/src/tree/index.ts +13 -13
- package/src/tree/types.ts +174 -174
|
@@ -1,175 +1,208 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* TreeCollection implementation.
|
|
3
|
-
* Based on @react-stately/tree/TreeCollection.
|
|
4
|
-
*
|
|
5
|
-
* A flattened view of tree nodes that respects expanded state.
|
|
6
|
-
* Only visible nodes (root + expanded children) are included in iteration.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import type { Key } from '../collections/types';
|
|
10
|
-
import type { TreeCollection as ITreeCollection, TreeNode, TreeItemData } from './types';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Creates a TreeCollection from hierarchical data.
|
|
14
|
-
* The collection is flattened based on expanded keys.
|
|
15
|
-
*/
|
|
16
|
-
export class TreeCollection<T> implements ITreeCollection<T> {
|
|
17
|
-
private keyMap: Map<Key, TreeNode<T>> = new Map();
|
|
18
|
-
private
|
|
19
|
-
private
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
this.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
if (
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return this.
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
return
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
)
|
|
174
|
-
|
|
175
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* TreeCollection implementation.
|
|
3
|
+
* Based on @react-stately/tree/TreeCollection.
|
|
4
|
+
*
|
|
5
|
+
* A flattened view of tree nodes that respects expanded state.
|
|
6
|
+
* Only visible nodes (root + expanded children) are included in iteration.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import type { Key } from '../collections/types';
|
|
10
|
+
import type { TreeCollection as ITreeCollection, TreeNode, TreeItemData } from './types';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Creates a TreeCollection from hierarchical data.
|
|
14
|
+
* The collection is flattened based on expanded keys.
|
|
15
|
+
*/
|
|
16
|
+
export class TreeCollection<T> implements ITreeCollection<T> {
|
|
17
|
+
private keyMap: Map<Key, TreeNode<T>> = new Map();
|
|
18
|
+
private visibleRows: TreeNode<T>[] = [];
|
|
19
|
+
private firstKey: Key | null = null;
|
|
20
|
+
private lastKey: Key | null = null;
|
|
21
|
+
|
|
22
|
+
constructor(
|
|
23
|
+
items: TreeItemData<T>[],
|
|
24
|
+
expandedKeys: Set<Key>
|
|
25
|
+
) {
|
|
26
|
+
this.buildCollection(items, expandedKeys);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
private buildCollection(items: TreeItemData<T>[], expandedKeys: Set<Key>): void {
|
|
30
|
+
let globalIndex = 0;
|
|
31
|
+
let previousNode: TreeNode<T> | null = null;
|
|
32
|
+
|
|
33
|
+
const visit = (
|
|
34
|
+
item: TreeItemData<T>,
|
|
35
|
+
level: number,
|
|
36
|
+
parentKey: Key | null,
|
|
37
|
+
indexInParent: number
|
|
38
|
+
): TreeNode<T> => {
|
|
39
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
40
|
+
const isExpanded = hasChildren && expandedKeys.has(item.key);
|
|
41
|
+
|
|
42
|
+
// Build child nodes first (even if not visible, for the map)
|
|
43
|
+
const childNodes: TreeNode<T>[] = [];
|
|
44
|
+
if (hasChildren && item.children) {
|
|
45
|
+
for (let i = 0; i < item.children.length; i++) {
|
|
46
|
+
const childNode = visit(item.children[i], level + 1, item.key, i);
|
|
47
|
+
childNodes.push(childNode);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const node: TreeNode<T> = {
|
|
52
|
+
type: 'item',
|
|
53
|
+
key: item.key,
|
|
54
|
+
value: item.value,
|
|
55
|
+
textValue: item.textValue || String(item.key),
|
|
56
|
+
level,
|
|
57
|
+
index: indexInParent,
|
|
58
|
+
parentKey,
|
|
59
|
+
hasChildNodes: hasChildren || false,
|
|
60
|
+
childNodes,
|
|
61
|
+
isDisabled: item.isDisabled,
|
|
62
|
+
isExpandable: hasChildren,
|
|
63
|
+
isExpanded,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// Always add to keyMap (for getItem lookups)
|
|
67
|
+
this.keyMap.set(item.key, node);
|
|
68
|
+
|
|
69
|
+
return node;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
// First pass: build all nodes
|
|
73
|
+
const rootNodes: TreeNode<T>[] = [];
|
|
74
|
+
for (let i = 0; i < items.length; i++) {
|
|
75
|
+
const node = visit(items[i], 0, null, i);
|
|
76
|
+
rootNodes.push(node);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Second pass: build visible rows list
|
|
80
|
+
const addVisibleNodes = (nodes: TreeNode<T>[]): void => {
|
|
81
|
+
for (const node of nodes) {
|
|
82
|
+
node.rowIndex = globalIndex++;
|
|
83
|
+
this.visibleRows.push(node);
|
|
84
|
+
node.prevKey = previousNode?.key ?? null;
|
|
85
|
+
node.nextKey = undefined;
|
|
86
|
+
if (previousNode) {
|
|
87
|
+
previousNode.nextKey = node.key;
|
|
88
|
+
}
|
|
89
|
+
previousNode = node;
|
|
90
|
+
|
|
91
|
+
if (node.isExpanded && node.childNodes.length > 0) {
|
|
92
|
+
addVisibleNodes(node.childNodes);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
addVisibleNodes(rootNodes);
|
|
98
|
+
this.firstKey = this.visibleRows[0]?.key ?? null;
|
|
99
|
+
this.lastKey = this.visibleRows[this.visibleRows.length - 1]?.key ?? null;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Collection properties
|
|
103
|
+
|
|
104
|
+
get size(): number {
|
|
105
|
+
return this.visibleRows.length;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
get rows(): TreeNode<T>[] {
|
|
109
|
+
return this.visibleRows;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
get rowCount(): number {
|
|
113
|
+
return this.visibleRows.length;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Collection methods
|
|
117
|
+
|
|
118
|
+
getKeys(): Iterable<Key> {
|
|
119
|
+
return this.visibleRows.map((node) => node.key);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
getItem(key: Key): TreeNode<T> | null {
|
|
123
|
+
return this.keyMap.get(key) ?? null;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
at(index: number): TreeNode<T> | null {
|
|
127
|
+
if (index < 0 || index >= this.visibleRows.length) {
|
|
128
|
+
return null;
|
|
129
|
+
}
|
|
130
|
+
return this.visibleRows[index];
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
getKeyBefore(key: Key): Key | null {
|
|
134
|
+
const node = this.keyMap.get(key);
|
|
135
|
+
let previousKey = node?.prevKey ?? null;
|
|
136
|
+
while (previousKey != null) {
|
|
137
|
+
const candidate = this.keyMap.get(previousKey);
|
|
138
|
+
if (!candidate) break;
|
|
139
|
+
if (candidate.type !== 'content') {
|
|
140
|
+
return candidate.key;
|
|
141
|
+
}
|
|
142
|
+
previousKey = candidate.prevKey ?? null;
|
|
143
|
+
}
|
|
144
|
+
return null;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
getKeyAfter(key: Key): Key | null {
|
|
148
|
+
const node = this.keyMap.get(key);
|
|
149
|
+
let nextKey = node?.nextKey ?? null;
|
|
150
|
+
while (nextKey != null) {
|
|
151
|
+
const candidate = this.keyMap.get(nextKey);
|
|
152
|
+
if (!candidate) break;
|
|
153
|
+
if (candidate.type !== 'content') {
|
|
154
|
+
return candidate.key;
|
|
155
|
+
}
|
|
156
|
+
nextKey = candidate.nextKey ?? null;
|
|
157
|
+
}
|
|
158
|
+
return null;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
getFirstKey(): Key | null {
|
|
162
|
+
if (this.firstKey == null) return null;
|
|
163
|
+
const candidate = this.keyMap.get(this.firstKey);
|
|
164
|
+
if (candidate?.type === 'content') {
|
|
165
|
+
return this.getKeyAfter(candidate.key);
|
|
166
|
+
}
|
|
167
|
+
return this.firstKey;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
getLastKey(): Key | null {
|
|
171
|
+
if (this.lastKey == null) return null;
|
|
172
|
+
const candidate = this.keyMap.get(this.lastKey);
|
|
173
|
+
if (candidate?.type === 'content') {
|
|
174
|
+
return this.getKeyBefore(candidate.key);
|
|
175
|
+
}
|
|
176
|
+
return this.lastKey;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
getChildren(key: Key): Iterable<TreeNode<T>> {
|
|
180
|
+
const node = this.keyMap.get(key);
|
|
181
|
+
return node?.childNodes ?? [];
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
getTextValue(key: Key): string {
|
|
185
|
+
const node = this.keyMap.get(key);
|
|
186
|
+
return node?.textValue ?? '';
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
getParentKey(key: Key): Key | null {
|
|
190
|
+
const node = this.keyMap.get(key);
|
|
191
|
+
return node?.parentKey ?? null;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
[Symbol.iterator](): Iterator<TreeNode<T>> {
|
|
195
|
+
return this.visibleRows[Symbol.iterator]();
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* Factory function to create a TreeCollection.
|
|
201
|
+
* Useful for the collectionFactory pattern in TreeStateOptions.
|
|
202
|
+
*/
|
|
203
|
+
export function createTreeCollection<T>(
|
|
204
|
+
items: TreeItemData<T>[],
|
|
205
|
+
expandedKeys: Set<Key>
|
|
206
|
+
): TreeCollection<T> {
|
|
207
|
+
return new TreeCollection(items, expandedKeys);
|
|
208
|
+
}
|