@studiolxd/brand 49.14.0 → 49.15.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 +16 -0
- package/dist/_types/molecules/TreeView/TreeView.d.ts +7 -1
- package/dist/tree-view.css +1 -1
- package/dist/tree-view.js +54 -53
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,22 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [49.15.0] — 2026-10-02
|
|
11
|
+
|
|
12
|
+
> **Minor.** El árbol de carpetas de creator, más limpio: sin chevron cuando la marca ya
|
|
13
|
+
> dice si la carpeta está abierta, y destinos de arrastre a todo el ancho.
|
|
14
|
+
|
|
15
|
+
### `TreeView` — lo que cambia
|
|
16
|
+
|
|
17
|
+
**Nueva prop `chevron`** (por defecto `true`). Con `chevron={false}` no se pinta ni el
|
|
18
|
+
chevron ni su ranura: solo queda la marca (`icon`/`iconExpanded`), que ocupa su ranura
|
|
19
|
+
fija, así que hojas y ramas siguen alineadas. El clic en la fila sigue abriendo y
|
|
20
|
+
cerrando, y el teclado no cambia.
|
|
21
|
+
|
|
22
|
+
**La sangría pasa de margen del grupo a `padding` de la fila.** Todas las filas miden
|
|
23
|
+
el ancho del árbol en cualquier nivel: el destino de arrastre, la selección y el anillo
|
|
24
|
+
de foco ya no encogen al bajar. Rótulo y marca quedan exactamente donde estaban.
|
|
25
|
+
|
|
10
26
|
## [49.14.0] — 2026-09-20
|
|
11
27
|
|
|
12
28
|
> **Minor.** El buscador, repasado con la página real delante. Seis cambios pedidos por
|
|
@@ -81,6 +81,12 @@ export interface TreeViewProps extends Omit<React.ComponentPropsWithoutRef<'ul'>
|
|
|
81
81
|
* No cambia el marcado: la fila sigue siendo el `role="treeitem"`.
|
|
82
82
|
*/
|
|
83
83
|
nodeRef?: (id: string, el: HTMLElement | null) => void;
|
|
84
|
+
/**
|
|
85
|
+
* Pinta el chevron (y su ranura) en las ramas. Con `false` solo queda la
|
|
86
|
+
* marca (`icon`), que ocupa su propia ranura fija: hojas y ramas siguen
|
|
87
|
+
* alineadas. Default: `true`.
|
|
88
|
+
*/
|
|
89
|
+
chevron?: boolean;
|
|
84
90
|
/** Se añade DESPUÉS de las clases propias. */
|
|
85
91
|
className?: string;
|
|
86
92
|
}
|
|
@@ -99,4 +105,4 @@ export interface TreeViewProps extends Omit<React.ComponentPropsWithoutRef<'ul'>
|
|
|
99
105
|
* para el único estado que sí lo pide: la carpeta que puede recibir lo que se
|
|
100
106
|
* está arrastrando (`dropTarget`).
|
|
101
107
|
*/
|
|
102
|
-
export declare function TreeView({ items, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, label, truncateFromLevel, nodeRef, className, ...rest }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
|
|
108
|
+
export declare function TreeView({ items, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, label, truncateFromLevel, nodeRef, chevron, className, ...rest }: TreeViewProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/tree-view.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tree-view,.tree-view__group{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.tree-
|
|
1
|
+
.tree-view,.tree-view__group{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.tree-view__item{color:var(--tree-view-color)}.tree-view__item:focus{outline:none}.tree-view__item:focus-visible>.tree-view__row{outline:var(--tree-view-focus-ring-width) solid var(--tree-view-focus-ring-color);outline-offset:var(--tree-view-focus-ring-offset)}.tree-view__row{align-items:center;gap:var(--tree-view-row-gap);padding-block:var(--tree-view-row-padding-block);border-radius:var(--tree-view-row-border-radius);border:var(--tree-view-drop-target-border-width) var(--tree-view-drop-target-border-style) transparent;font-family:var(--tree-view-font-family);font-size:var(--tree-view-font-size);font-weight:var(--tree-view-font-weight);line-height:var(--tree-view-line-height);cursor:var(--tree-view-cursor);padding-inline-start:calc(var(--tree-view-row-padding-inline) + var(--tree-view-level,0) * var(--tree-view-indent));padding-inline-end:var(--tree-view-row-padding-inline);display:flex}.tree-view__item[data-level="2"]>.tree-view__row{--tree-view-level:1}.tree-view__item[data-level="3"]>.tree-view__row{--tree-view-level:2}.tree-view__item[data-level="4"]>.tree-view__row{--tree-view-level:3}.tree-view__item[data-level="5"]>.tree-view__row{--tree-view-level:4}.tree-view__item[data-level="6"]>.tree-view__row{--tree-view-level:5}.tree-view__item[data-level="7"]>.tree-view__row{--tree-view-level:6}.tree-view__item[data-level="8"]>.tree-view__row{--tree-view-level:7}.tree-view__item[data-level="9"]>.tree-view__row{--tree-view-level:8}.tree-view__item[data-level="10"]>.tree-view__row{--tree-view-level:9}.tree-view__item[data-level="11"]>.tree-view__row{--tree-view-level:10}.tree-view__item[data-level="12"]>.tree-view__row{--tree-view-level:11}.tree-view__item:not(.tree-view__item--disabled)>.tree-view__row:hover{color:var(--tree-view-color);box-shadow:none}.tree-view__item.tree-view__item--selected>.tree-view__row{color:var(--tree-view-selected-color);font-weight:var(--tree-view-selected-font-weight)}.tree-view__item.tree-view__item--disabled>.tree-view__row{opacity:var(--tree-view-disabled-opacity);cursor:var(--tree-view-disabled-cursor)}.tree-view__item.tree-view__item--drop-target>.tree-view__row{background-color:var(--tree-view-drop-target-bg);border-color:var(--tree-view-drop-target-border-color);color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-target>.tree-view__row .tree-view__chevron{color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-disabled>.tree-view__row{opacity:var(--tree-view-drop-disabled-opacity);cursor:var(--tree-view-drop-disabled-cursor)}.tree-view__chevron-slot{inline-size:var(--tree-view-chevron-size);block-size:var(--tree-view-chevron-size);flex-shrink:0;display:inline-flex}.tree-view__chevron{color:var(--tree-view-chevron-color);transition:transform var(--tree-view-transition-duration) var(--tree-view-transition-easing);transform:rotate(0)}.tree-view__item[aria-expanded=true]>.tree-view__row .tree-view__chevron{transform:rotate(90deg)}.tree-view__icon{inline-size:var(--tree-view-icon-size);block-size:var(--tree-view-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tree-view__label{min-inline-size:0}.tree-view__label--truncated{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tree-view__actions{opacity:0;transition:opacity var(--tree-view-transition-duration) var(--tree-view-transition-easing);flex-shrink:0;align-items:center;margin-inline-start:auto;padding-inline-start:var(--tree-view-actions-gap);display:inline-flex}.tree-view__row:hover .tree-view__actions,.tree-view__item:focus-visible>.tree-view__row .tree-view__actions,.tree-view__actions:focus-within{opacity:1}.tree-view__actions:has([data-popup-open]){opacity:1}@media (hover:none){.tree-view__actions{opacity:1}}
|
package/dist/tree-view.js
CHANGED
|
@@ -13,86 +13,87 @@ function u(e, t, n = 1, r) {
|
|
|
13
13
|
parentId: r
|
|
14
14
|
}, ...e.children && t.has(e.id) ? u(e.children, t, n + 1, e.id) : []]);
|
|
15
15
|
}
|
|
16
|
-
function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, selected: h, defaultSelected: g, onSelectedChange: _, label: v, truncateFromLevel: y = 4, nodeRef: b,
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
}, [
|
|
20
|
-
let n =
|
|
21
|
-
r !== n &&
|
|
16
|
+
function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, selected: h, defaultSelected: g, onSelectedChange: _, label: v, truncateFromLevel: y = 4, nodeRef: b, chevron: x = !0, className: S, ...C }) {
|
|
17
|
+
let w = e("treeView"), T = r(), E = a(null), [D, O] = o(p ?? []), k = f !== void 0, A = k ? f : D, [j, M] = o(g), N = h !== void 0, P = N ? h : j, F = i(() => new Set(A), [A]), I = i(() => u(d, F), [d, F]), [L, R] = o(void 0), z = L && I.some((e) => e.node.id === L) ? L : P && I.some((e) => e.node.id === P) ? P : I[0]?.node.id, B = a(""), V = a(0), H = n((e) => {
|
|
18
|
+
k || O(e), m?.(e);
|
|
19
|
+
}, [k, m]), U = n((e, t) => {
|
|
20
|
+
let n = F.has(e), r = t ?? !n;
|
|
21
|
+
r !== n && H(r ? [...A, e] : A.filter((t) => t !== e));
|
|
22
22
|
}, [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
]),
|
|
27
|
-
|
|
28
|
-
}, [
|
|
29
|
-
let t =
|
|
30
|
-
t.length !== 0 &&
|
|
23
|
+
A,
|
|
24
|
+
F,
|
|
25
|
+
H
|
|
26
|
+
]), W = n((e) => {
|
|
27
|
+
N || M(e), _?.(e);
|
|
28
|
+
}, [N, _]), G = n((e) => {
|
|
29
|
+
let t = I.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !F.has(e));
|
|
30
|
+
t.length !== 0 && H([...A, ...t]);
|
|
31
31
|
}, [
|
|
32
|
-
|
|
32
|
+
A,
|
|
33
|
+
I,
|
|
33
34
|
F,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
z.current = r, B.current = n;
|
|
35
|
+
H
|
|
36
|
+
]), K = n((e) => `${T}-${e}`, [T]), q = n((e) => {
|
|
37
|
+
e && (R(e), E.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
|
|
38
|
+
}, []), J = n((e, t) => {
|
|
39
|
+
let n = Date.now(), r = n - V.current > l ? e : B.current + e;
|
|
40
|
+
B.current = r, V.current = n;
|
|
41
41
|
let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
|
|
42
|
-
for (let e = 0; e <
|
|
43
|
-
let t =
|
|
44
|
-
if ((
|
|
45
|
-
|
|
42
|
+
for (let e = 0; e < I.length; e++) {
|
|
43
|
+
let t = I[(i + e) % I.length].node.id;
|
|
44
|
+
if ((E.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
|
|
45
|
+
q(t);
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
}, [
|
|
50
|
-
function
|
|
51
|
-
let { node: n, parentId: r } = t, i =
|
|
49
|
+
}, [I, q]);
|
|
50
|
+
function Y(e, t) {
|
|
51
|
+
let { node: n, parentId: r } = t, i = I.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = F.has(n.id);
|
|
52
52
|
switch (e.key) {
|
|
53
53
|
case "ArrowDown":
|
|
54
|
-
e.preventDefault(),
|
|
54
|
+
e.preventDefault(), q(I[i + 1]?.node.id);
|
|
55
55
|
break;
|
|
56
56
|
case "ArrowUp":
|
|
57
|
-
e.preventDefault(),
|
|
57
|
+
e.preventDefault(), q(I[i - 1]?.node.id);
|
|
58
58
|
break;
|
|
59
59
|
case "ArrowRight":
|
|
60
|
-
e.preventDefault(), a && !o ?
|
|
60
|
+
e.preventDefault(), a && !o ? U(n.id, !0) : a && o && q(I[i + 1]?.node.id);
|
|
61
61
|
break;
|
|
62
62
|
case "ArrowLeft":
|
|
63
|
-
e.preventDefault(), a && o ?
|
|
63
|
+
e.preventDefault(), a && o ? U(n.id, !1) : r && q(r);
|
|
64
64
|
break;
|
|
65
65
|
case "Home":
|
|
66
|
-
e.preventDefault(),
|
|
66
|
+
e.preventDefault(), q(I[0]?.node.id);
|
|
67
67
|
break;
|
|
68
68
|
case "End":
|
|
69
|
-
e.preventDefault(),
|
|
69
|
+
e.preventDefault(), q(I[I.length - 1]?.node.id);
|
|
70
70
|
break;
|
|
71
71
|
case "Enter":
|
|
72
72
|
case " ":
|
|
73
|
-
e.preventDefault(), n.disabled ||
|
|
73
|
+
e.preventDefault(), n.disabled || W(n.id);
|
|
74
74
|
break;
|
|
75
75
|
case "*":
|
|
76
|
-
e.preventDefault(),
|
|
76
|
+
e.preventDefault(), G(t);
|
|
77
77
|
break;
|
|
78
78
|
default:
|
|
79
|
-
e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(),
|
|
79
|
+
e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), J(e.key, i));
|
|
80
80
|
break;
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
function X(e, n, r) {
|
|
84
84
|
return e.map((e) => {
|
|
85
|
-
let i = !!e.children?.length, a = i &&
|
|
85
|
+
let i = !!e.children?.length, a = i && F.has(e.id), o = P === e.id, l = a && e.iconExpanded || e.icon, u = n >= y, d = u && typeof e.label == "string" ? e.label : void 0, f = e.dropTarget ? "target" : e.dropDisabled ? "disabled" : void 0;
|
|
86
86
|
return /* @__PURE__ */ c("li", {
|
|
87
87
|
role: "treeitem",
|
|
88
88
|
"data-tree-item": e.id,
|
|
89
|
-
"aria-labelledby":
|
|
89
|
+
"aria-labelledby": K(e.id),
|
|
90
90
|
"aria-expanded": i ? a : void 0,
|
|
91
91
|
"aria-selected": o,
|
|
92
92
|
"aria-level": n,
|
|
93
|
+
"data-level": n,
|
|
93
94
|
"aria-disabled": e.disabled || void 0,
|
|
94
95
|
"data-drop": f,
|
|
95
|
-
tabIndex:
|
|
96
|
+
tabIndex: z === e.id ? 0 : -1,
|
|
96
97
|
className: [
|
|
97
98
|
"tree-view__item",
|
|
98
99
|
o ? "tree-view__item--selected" : "",
|
|
@@ -101,23 +102,23 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
|
|
|
101
102
|
e.dropDisabled ? "tree-view__item--drop-disabled" : ""
|
|
102
103
|
].filter(Boolean).join(" "),
|
|
103
104
|
onKeyDown: (t) => {
|
|
104
|
-
t.target === t.currentTarget &&
|
|
105
|
+
t.target === t.currentTarget && Y(t, {
|
|
105
106
|
node: e,
|
|
106
107
|
level: n,
|
|
107
108
|
parentId: r
|
|
108
109
|
});
|
|
109
110
|
},
|
|
110
111
|
onFocus: (t) => {
|
|
111
|
-
t.target === t.currentTarget &&
|
|
112
|
+
t.target === t.currentTarget && R(e.id);
|
|
112
113
|
},
|
|
113
114
|
onClick: e.disabled ? void 0 : (t) => {
|
|
114
|
-
t.stopPropagation(), i &&
|
|
115
|
+
t.stopPropagation(), i && U(e.id), W(e.id), q(e.id);
|
|
115
116
|
},
|
|
116
117
|
children: [/* @__PURE__ */ c("span", {
|
|
117
118
|
className: "tree-view__row",
|
|
118
119
|
ref: b ? (t) => b(e.id, t) : void 0,
|
|
119
120
|
children: [
|
|
120
|
-
/* @__PURE__ */ s("span", {
|
|
121
|
+
x && /* @__PURE__ */ s("span", {
|
|
121
122
|
className: "tree-view__chevron-slot",
|
|
122
123
|
"aria-hidden": "true",
|
|
123
124
|
children: i && /* @__PURE__ */ s(t, {
|
|
@@ -133,7 +134,7 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
|
|
|
133
134
|
}),
|
|
134
135
|
/* @__PURE__ */ s("span", {
|
|
135
136
|
className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
|
|
136
|
-
id:
|
|
137
|
+
id: K(e.id),
|
|
137
138
|
title: d,
|
|
138
139
|
children: e.label
|
|
139
140
|
}),
|
|
@@ -148,18 +149,18 @@ function d({ items: d, expanded: f, defaultExpanded: p, onExpandedChange: m, sel
|
|
|
148
149
|
}), i && a && /* @__PURE__ */ s("ul", {
|
|
149
150
|
role: "group",
|
|
150
151
|
className: "tree-view__group",
|
|
151
|
-
children:
|
|
152
|
+
children: X(e.children, n + 1, e.id)
|
|
152
153
|
})]
|
|
153
154
|
}, e.id);
|
|
154
155
|
});
|
|
155
156
|
}
|
|
156
157
|
return /* @__PURE__ */ s("ul", {
|
|
157
|
-
ref:
|
|
158
|
+
ref: E,
|
|
158
159
|
role: "tree",
|
|
159
|
-
"aria-label":
|
|
160
|
-
className: ["tree-view",
|
|
161
|
-
...
|
|
162
|
-
children:
|
|
160
|
+
"aria-label": w("label", v),
|
|
161
|
+
className: ["tree-view", S].filter(Boolean).join(" "),
|
|
162
|
+
...C,
|
|
163
|
+
children: X(d, 1)
|
|
163
164
|
});
|
|
164
165
|
}
|
|
165
166
|
//#endregion
|