@sps-woodland/side-nav 8.48.1 → 8.49.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/lib/index.js +194 -92
- package/lib/index.umd.cjs +79 -7
- package/lib/side-nav-item/SideNavItem.d.ts +16 -1
- package/lib/style.css +1 -1
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { createContext as
|
|
3
|
-
import { Metadata as
|
|
4
|
-
import { code as
|
|
2
|
+
import { createContext as D } from "react";
|
|
3
|
+
import { Metadata as k, selectChildren as w, Icon as K, modChildren as C, cl as R } from "@sps-woodland/core";
|
|
4
|
+
import { code as N } from "@spscommerce/utils";
|
|
5
5
|
function U(t, n, a) {
|
|
6
6
|
return n in t ? Object.defineProperty(t, n, {
|
|
7
7
|
value: a,
|
|
@@ -10,7 +10,7 @@ function U(t, n, a) {
|
|
|
10
10
|
writable: !0
|
|
11
11
|
}) : t[n] = a, t;
|
|
12
12
|
}
|
|
13
|
-
function
|
|
13
|
+
function H(t, n) {
|
|
14
14
|
var a = Object.keys(t);
|
|
15
15
|
if (Object.getOwnPropertySymbols) {
|
|
16
16
|
var i = Object.getOwnPropertySymbols(t);
|
|
@@ -20,54 +20,54 @@ function w(t, n) {
|
|
|
20
20
|
}
|
|
21
21
|
return a;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function j(t) {
|
|
24
24
|
for (var n = 1; n < arguments.length; n++) {
|
|
25
25
|
var a = arguments[n] != null ? arguments[n] : {};
|
|
26
|
-
n % 2 ?
|
|
26
|
+
n % 2 ? H(Object(a), !0).forEach(function(i) {
|
|
27
27
|
U(t, i, a[i]);
|
|
28
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) :
|
|
28
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : H(Object(a)).forEach(function(i) {
|
|
29
29
|
Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(a, i));
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
return t;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var q = (t, n, a) => {
|
|
35
35
|
for (var i of Object.keys(t)) {
|
|
36
36
|
var d;
|
|
37
37
|
if (t[i] !== ((d = n[i]) !== null && d !== void 0 ? d : a[i]))
|
|
38
38
|
return !1;
|
|
39
39
|
}
|
|
40
40
|
return !0;
|
|
41
|
-
},
|
|
42
|
-
var a = t.defaultClassName, i =
|
|
41
|
+
}, B = (t) => (n) => {
|
|
42
|
+
var a = t.defaultClassName, i = j(j({}, t.defaultVariants), n);
|
|
43
43
|
for (var d in i) {
|
|
44
|
-
var
|
|
45
|
-
if (
|
|
46
|
-
var
|
|
47
|
-
typeof
|
|
48
|
-
var
|
|
44
|
+
var r, l = (r = i[d]) !== null && r !== void 0 ? r : t.defaultVariants[d];
|
|
45
|
+
if (l != null) {
|
|
46
|
+
var o = l;
|
|
47
|
+
typeof o == "boolean" && (o = o === !0 ? "true" : "false");
|
|
48
|
+
var v = (
|
|
49
49
|
// @ts-expect-error
|
|
50
|
-
t.variantClassNames[d][
|
|
50
|
+
t.variantClassNames[d][o]
|
|
51
51
|
);
|
|
52
|
-
|
|
52
|
+
v && (a += " " + v);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
for (var [
|
|
56
|
-
|
|
55
|
+
for (var [m, p] of t.compoundVariants)
|
|
56
|
+
q(m, i, t.defaultVariants) && (a += " " + p);
|
|
57
57
|
return a;
|
|
58
|
-
},
|
|
59
|
-
function
|
|
58
|
+
}, L = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco0", z = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco1", M = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco2", W = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco3", Y = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco4", J = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco5", Q = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco6", G = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco7", X = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8", O = B({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), Z = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcof", F = "pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog";
|
|
59
|
+
function x({
|
|
60
60
|
children: t,
|
|
61
61
|
className: n,
|
|
62
62
|
...a
|
|
63
63
|
}) {
|
|
64
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
64
|
+
return /* @__PURE__ */ e.createElement("div", { className: z, ...a }, /* @__PURE__ */ e.createElement("div", { className: M }, t));
|
|
65
65
|
}
|
|
66
|
-
|
|
66
|
+
k.set(x, {
|
|
67
67
|
name: "SideNavHeader",
|
|
68
68
|
props: {}
|
|
69
69
|
});
|
|
70
|
-
const
|
|
70
|
+
const V = D({
|
|
71
71
|
filterValue: "",
|
|
72
72
|
activeItem: ""
|
|
73
73
|
});
|
|
@@ -77,130 +77,142 @@ function I({
|
|
|
77
77
|
onSelect: a,
|
|
78
78
|
as: i,
|
|
79
79
|
keyId: d,
|
|
80
|
-
selectableAsParent:
|
|
81
|
-
|
|
80
|
+
selectableAsParent: r,
|
|
81
|
+
defaultExpanded: l = !0,
|
|
82
|
+
expanded: o,
|
|
83
|
+
onExpandedChange: v,
|
|
84
|
+
...m
|
|
82
85
|
}) {
|
|
83
|
-
const
|
|
86
|
+
const p = i ?? "a", [h, _] = w(t, [{ type: I }]), [b, g] = e.useState(l), [u, E] = e.useState(!0), c = e.useContext(V), s = e.useRef(null), S = o !== void 0, f = c.filterValue.length > 0 ? !0 : o ?? b, T = (P) => {
|
|
87
|
+
S || g(P), v?.(P);
|
|
88
|
+
};
|
|
84
89
|
return e.useEffect(() => {
|
|
85
|
-
|
|
86
|
-
}, [
|
|
90
|
+
E(s.current?.innerText.toLowerCase().includes(c.filterValue.toLowerCase()) || !1), c.filterValue.length > 0 && !S && g(!0);
|
|
91
|
+
}, [c]), /* @__PURE__ */ e.createElement(e.Fragment, null, h.length ? /* @__PURE__ */ e.createElement("ul", { className: X }, /* @__PURE__ */ e.createElement(
|
|
87
92
|
"li",
|
|
88
93
|
{
|
|
89
|
-
ref:
|
|
90
|
-
className:
|
|
91
|
-
selected:
|
|
92
|
-
|
|
94
|
+
ref: s,
|
|
95
|
+
className: O({
|
|
96
|
+
selected: r && c.activeItem === d,
|
|
97
|
+
// Visibility under the filter must not depend on
|
|
98
|
+
// `selectableAsParent` — otherwise a non-selectable parent (a
|
|
99
|
+
// pure section header) is hidden (`display:none`) while its
|
|
100
|
+
// children remain, flattening the tree.
|
|
101
|
+
inFilter: u
|
|
93
102
|
}),
|
|
94
103
|
onClick: () => {
|
|
95
|
-
a &&
|
|
104
|
+
a && r ? a(d) : a && !r && T(!f);
|
|
96
105
|
}
|
|
97
106
|
},
|
|
98
|
-
/* @__PURE__ */ e.createElement(
|
|
99
|
-
|
|
107
|
+
/* @__PURE__ */ e.createElement(p, { className: F, ...m }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
|
|
108
|
+
K,
|
|
100
109
|
{
|
|
101
|
-
className:
|
|
102
|
-
icon:
|
|
110
|
+
className: Z,
|
|
111
|
+
icon: f ? "chevron-down" : "chevron-right",
|
|
103
112
|
onClick: () => {
|
|
104
|
-
|
|
113
|
+
T(!f);
|
|
105
114
|
}
|
|
106
115
|
}
|
|
107
|
-
)),
|
|
108
|
-
),
|
|
116
|
+
)), _)
|
|
117
|
+
), f && h) : /* @__PURE__ */ e.createElement(
|
|
109
118
|
"li",
|
|
110
119
|
{
|
|
111
|
-
ref:
|
|
112
|
-
className:
|
|
113
|
-
selected:
|
|
120
|
+
ref: s,
|
|
121
|
+
className: O({
|
|
122
|
+
selected: c.activeItem === d,
|
|
114
123
|
inFilter: u
|
|
115
124
|
})
|
|
116
125
|
},
|
|
117
126
|
/* @__PURE__ */ e.createElement(
|
|
118
|
-
|
|
127
|
+
p,
|
|
119
128
|
{
|
|
120
|
-
className:
|
|
129
|
+
className: F,
|
|
121
130
|
onClick: () => {
|
|
122
131
|
a && a(d);
|
|
123
132
|
},
|
|
124
|
-
...
|
|
133
|
+
...m
|
|
125
134
|
},
|
|
126
135
|
t
|
|
127
136
|
)
|
|
128
137
|
));
|
|
129
138
|
}
|
|
130
|
-
|
|
139
|
+
k.set(I, {
|
|
131
140
|
name: "SideNavItem",
|
|
132
141
|
props: {
|
|
133
142
|
keyId: { type: "string", required: !0 },
|
|
134
143
|
onSelect: { type: "function" },
|
|
135
144
|
selectableAsParent: { type: "boolean" },
|
|
145
|
+
defaultExpanded: { type: "boolean" },
|
|
146
|
+
expanded: { type: "boolean" },
|
|
147
|
+
onExpandedChange: { type: "function" },
|
|
136
148
|
as: { type: "string" }
|
|
137
149
|
}
|
|
138
150
|
});
|
|
139
|
-
function
|
|
151
|
+
function y({
|
|
140
152
|
children: t,
|
|
141
153
|
className: n,
|
|
142
154
|
title: a,
|
|
143
155
|
onSelect: i,
|
|
144
156
|
...d
|
|
145
157
|
}) {
|
|
146
|
-
const [
|
|
158
|
+
const [r, l] = w(t, [{ type: I }]), o = C(r, (v) => v.type === I ? [
|
|
147
159
|
{
|
|
148
|
-
onSelect: i ? (
|
|
160
|
+
onSelect: i ? (m) => i(m) : () => {
|
|
149
161
|
}
|
|
150
162
|
}
|
|
151
163
|
] : []);
|
|
152
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
164
|
+
return /* @__PURE__ */ e.createElement("div", { className: J, ...d }, a && /* @__PURE__ */ e.createElement("div", { className: Q }, a), /* @__PURE__ */ e.createElement("ul", { className: G }, o), l);
|
|
153
165
|
}
|
|
154
|
-
|
|
166
|
+
k.set(y, {
|
|
155
167
|
name: "SideNavSection",
|
|
156
168
|
props: {
|
|
157
169
|
title: { type: "string" }
|
|
158
170
|
}
|
|
159
171
|
});
|
|
160
|
-
function
|
|
172
|
+
function A({
|
|
161
173
|
children: t,
|
|
162
174
|
className: n,
|
|
163
175
|
activeNavItem: a,
|
|
164
176
|
onChange: i,
|
|
165
177
|
filterable: d,
|
|
166
|
-
filterInputPlaceholder:
|
|
167
|
-
...
|
|
178
|
+
filterInputPlaceholder: r,
|
|
179
|
+
...l
|
|
168
180
|
}) {
|
|
169
181
|
const [
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
] =
|
|
174
|
-
{ type:
|
|
175
|
-
{ type:
|
|
182
|
+
o,
|
|
183
|
+
v,
|
|
184
|
+
m
|
|
185
|
+
] = w(t, [
|
|
186
|
+
{ type: x },
|
|
187
|
+
{ type: y },
|
|
176
188
|
{ type: I }
|
|
177
|
-
]),
|
|
178
|
-
|
|
179
|
-
},
|
|
189
|
+
]), p = e.useRef(a), [h, _] = e.useState(a), [b, g] = e.useState(""), u = (s) => {
|
|
190
|
+
_(s), i && i(s);
|
|
191
|
+
}, E = C(m, (s) => s.type === I ? [
|
|
180
192
|
{
|
|
181
|
-
onSelect: (
|
|
193
|
+
onSelect: (S) => u(S)
|
|
182
194
|
}
|
|
183
|
-
] : []),
|
|
184
|
-
|
|
185
|
-
(
|
|
195
|
+
] : []), c = C(
|
|
196
|
+
v,
|
|
197
|
+
(s) => s.type === y ? [
|
|
186
198
|
{
|
|
187
|
-
onSelect: (
|
|
199
|
+
onSelect: (S) => u(S)
|
|
188
200
|
}
|
|
189
201
|
] : []
|
|
190
202
|
);
|
|
191
|
-
return a !==
|
|
203
|
+
return a !== p.current && (_(a), p.current = a), /* @__PURE__ */ e.createElement(V.Provider, { value: { filterValue: b, activeItem: h } }, /* @__PURE__ */ e.createElement("div", { className: R(L), ...l }, o, d && /* @__PURE__ */ e.createElement("div", { className: W }, /* @__PURE__ */ e.createElement("div", { className: Y }, /* @__PURE__ */ e.createElement("div", { className: "sps-text-input" }, /* @__PURE__ */ e.createElement("div", { className: "sps-form-control" }, /* @__PURE__ */ e.createElement("i", { className: "sps-text-input__icon sps-icon sps-icon-filter" }), /* @__PURE__ */ e.createElement(
|
|
192
204
|
"input",
|
|
193
205
|
{
|
|
194
206
|
type: "text",
|
|
195
207
|
className: "sps-text-input__input",
|
|
196
|
-
placeholder:
|
|
197
|
-
onChange: (
|
|
198
|
-
|
|
208
|
+
placeholder: r,
|
|
209
|
+
onChange: (s) => {
|
|
210
|
+
g(s.target.value);
|
|
199
211
|
}
|
|
200
212
|
}
|
|
201
|
-
))))),
|
|
213
|
+
))))), c, /* @__PURE__ */ e.createElement("ul", { className: G }, E)));
|
|
202
214
|
}
|
|
203
|
-
|
|
215
|
+
k.set(A, {
|
|
204
216
|
name: "SideNav",
|
|
205
217
|
props: {
|
|
206
218
|
activeNavItem: { type: "string", required: !0 },
|
|
@@ -209,12 +221,12 @@ h.set(H, {
|
|
|
209
221
|
filterInputPlaceholder: { type: "string" }
|
|
210
222
|
}
|
|
211
223
|
});
|
|
212
|
-
const
|
|
224
|
+
const $ = {
|
|
213
225
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page."),
|
|
214
226
|
components: [
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
227
|
+
A,
|
|
228
|
+
x,
|
|
229
|
+
y,
|
|
218
230
|
I
|
|
219
231
|
],
|
|
220
232
|
examples: {
|
|
@@ -227,7 +239,7 @@ const Q = {
|
|
|
227
239
|
description: "Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",
|
|
228
240
|
examples: {
|
|
229
241
|
filter: {
|
|
230
|
-
react:
|
|
242
|
+
react: N`
|
|
231
243
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
232
244
|
import { Icon } from "@sps-woodland/core";
|
|
233
245
|
|
|
@@ -288,7 +300,7 @@ const Q = {
|
|
|
288
300
|
description: ({ Link: t }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Use Icons to further illustrate what the navigation item contains. If one navigation item has an Icon, all of the need to have an Icon. Do not use an Icon more than once in a single Side Navigation. Example: A bell icon to represent a Notifications navigation item."), /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/icons" }, "View All Icons")),
|
|
289
301
|
examples: {
|
|
290
302
|
icons: {
|
|
291
|
-
react:
|
|
303
|
+
react: N`
|
|
292
304
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
293
305
|
import { Icon } from "@sps-woodland/core";
|
|
294
306
|
|
|
@@ -341,7 +353,7 @@ const Q = {
|
|
|
341
353
|
description: "Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",
|
|
342
354
|
examples: {
|
|
343
355
|
icons: {
|
|
344
|
-
react:
|
|
356
|
+
react: N`
|
|
345
357
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
346
358
|
import { Icon } from "@sps-woodland/core";
|
|
347
359
|
|
|
@@ -400,7 +412,7 @@ const Q = {
|
|
|
400
412
|
description: "When nesting, you can enable items to be selectable even if they have nested items.",
|
|
401
413
|
examples: {
|
|
402
414
|
icons: {
|
|
403
|
-
react:
|
|
415
|
+
react: N`
|
|
404
416
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
405
417
|
import { Icon } from "@sps-woodland/core";
|
|
406
418
|
|
|
@@ -458,12 +470,102 @@ const Q = {
|
|
|
458
470
|
}
|
|
459
471
|
}
|
|
460
472
|
},
|
|
473
|
+
defaultExpanded: {
|
|
474
|
+
label: "Collapsed by Default",
|
|
475
|
+
description: "Branches are expanded on mount by default. Pass `defaultExpanded={false}` to render a branch collapsed initially — the user can still expand it with the chevron.",
|
|
476
|
+
examples: {
|
|
477
|
+
icons: {
|
|
478
|
+
react: N`
|
|
479
|
+
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
480
|
+
import { Icon } from "@sps-woodland/core";
|
|
481
|
+
|
|
482
|
+
function Component() {
|
|
483
|
+
return (
|
|
484
|
+
<div className={grid.root}>
|
|
485
|
+
<div className={grid[4]}>
|
|
486
|
+
<SideNav activeNavItem="">
|
|
487
|
+
<SideNavHeader>
|
|
488
|
+
<Icon icon="status-ok" className={sprinkles({ mr: "sm" })} />
|
|
489
|
+
Title
|
|
490
|
+
</SideNavHeader>
|
|
491
|
+
<SideNavSection title="">
|
|
492
|
+
<SideNavItem keyId="parent1" defaultExpanded={false}>
|
|
493
|
+
Parent 1
|
|
494
|
+
<SideNavItem keyId="child1">Child 1</SideNavItem>
|
|
495
|
+
<SideNavItem keyId="child2">Child 2</SideNavItem>
|
|
496
|
+
</SideNavItem>
|
|
497
|
+
<SideNavItem keyId="parent2" defaultExpanded={false}>
|
|
498
|
+
Parent 2
|
|
499
|
+
<SideNavItem keyId="child3">Child 3</SideNavItem>
|
|
500
|
+
<SideNavItem keyId="child4">Child 4</SideNavItem>
|
|
501
|
+
</SideNavItem>
|
|
502
|
+
</SideNavSection>
|
|
503
|
+
</SideNav>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
)
|
|
507
|
+
}
|
|
508
|
+
`
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
},
|
|
512
|
+
controlledExpansion: {
|
|
513
|
+
label: "Controlled Expansion",
|
|
514
|
+
description: "Provide `expanded` together with `onExpandedChange` to own a branch's expanded state. Here the parents behave like an accordion — opening one closes the other.",
|
|
515
|
+
examples: {
|
|
516
|
+
icons: {
|
|
517
|
+
react: N`
|
|
518
|
+
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
519
|
+
import { Icon } from "@sps-woodland/core";
|
|
520
|
+
|
|
521
|
+
function Component() {
|
|
522
|
+
const [openKey, setOpenKey] = React.useState("parent1");
|
|
523
|
+
return (
|
|
524
|
+
<div className={grid.root}>
|
|
525
|
+
<div className={grid[4]}>
|
|
526
|
+
<SideNav activeNavItem="">
|
|
527
|
+
<SideNavHeader>
|
|
528
|
+
<Icon icon="status-ok" className={sprinkles({ mr: "sm" })} />
|
|
529
|
+
Title
|
|
530
|
+
</SideNavHeader>
|
|
531
|
+
<SideNavSection title="">
|
|
532
|
+
<SideNavItem
|
|
533
|
+
keyId="parent1"
|
|
534
|
+
expanded={openKey === "parent1"}
|
|
535
|
+
onExpandedChange={(open) => setOpenKey(open ? "parent1" : "")}
|
|
536
|
+
>
|
|
537
|
+
Parent 1
|
|
538
|
+
<SideNavItem keyId="child1">Child 1</SideNavItem>
|
|
539
|
+
<SideNavItem keyId="child2">Child 2</SideNavItem>
|
|
540
|
+
</SideNavItem>
|
|
541
|
+
<SideNavItem
|
|
542
|
+
keyId="parent2"
|
|
543
|
+
expanded={openKey === "parent2"}
|
|
544
|
+
onExpandedChange={(open) => setOpenKey(open ? "parent2" : "")}
|
|
545
|
+
>
|
|
546
|
+
Parent 2
|
|
547
|
+
<SideNavItem keyId="child3">Child 3</SideNavItem>
|
|
548
|
+
<SideNavItem keyId="child4">Child 4</SideNavItem>
|
|
549
|
+
</SideNavItem>
|
|
550
|
+
</SideNavSection>
|
|
551
|
+
</SideNav>
|
|
552
|
+
</div>
|
|
553
|
+
<div className={grid[4]}>
|
|
554
|
+
<p>Currently open: <b>{openKey || "none"}</b></p>
|
|
555
|
+
</div>
|
|
556
|
+
</div>
|
|
557
|
+
)
|
|
558
|
+
}
|
|
559
|
+
`
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
},
|
|
461
563
|
sections: {
|
|
462
564
|
label: "Sections",
|
|
463
565
|
description: "Use Sections to break up content into different categories. Sections utilize Subtitles.",
|
|
464
566
|
examples: {
|
|
465
567
|
icons: {
|
|
466
|
-
react:
|
|
568
|
+
react: N`
|
|
467
569
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
468
570
|
import { Icon } from "@sps-woodland/core";
|
|
469
571
|
|
|
@@ -521,7 +623,7 @@ const Q = {
|
|
|
521
623
|
description: "Use Tags to indicate a number of additional detail related to the navigation item.",
|
|
522
624
|
examples: {
|
|
523
625
|
icons: {
|
|
524
|
-
react:
|
|
626
|
+
react: N`
|
|
525
627
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
526
628
|
import { Tag } from "@sps-woodland/tags";
|
|
527
629
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -571,13 +673,13 @@ const Q = {
|
|
|
571
673
|
}
|
|
572
674
|
}
|
|
573
675
|
}
|
|
574
|
-
},
|
|
575
|
-
"Side Navigation":
|
|
676
|
+
}, ne = {
|
|
677
|
+
"Side Navigation": $
|
|
576
678
|
};
|
|
577
679
|
export {
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
680
|
+
ne as MANIFEST,
|
|
681
|
+
A as SideNav,
|
|
682
|
+
x as SideNavHeader,
|
|
581
683
|
I as SideNavItem,
|
|
582
|
-
|
|
684
|
+
y as SideNavSection
|
|
583
685
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(s,
|
|
1
|
+
(function(s,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],h):(s=typeof globalThis<"u"?globalThis:s||self,h(s.SideNav={},s.React,s.core,s.utils))})(this,(function(s,h,o,c){"use strict";function D(a){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:()=>a[t]})}}return n.default=a,Object.freeze(n)}const e=D(h);function M(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function P(a,n){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(a);n&&(i=i.filter(function(d){return Object.getOwnPropertyDescriptor(a,d).enumerable})),t.push.apply(t,i)}return t}function j(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?P(Object(t),!0).forEach(function(i){M(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var q=(a,n,t)=>{for(var i of Object.keys(a)){var d;if(a[i]!==((d=n[i])!==null&&d!==void 0?d:t[i]))return!1}return!0},K=a=>n=>{var t=a.defaultClassName,i=j(j({},a.defaultVariants),n);for(var d in i){var l,N=(l=i[d])!==null&&l!==void 0?l:a.defaultVariants[d];if(N!=null){var v=N;typeof v=="boolean"&&(v=v===!0?"true":"false");var p=a.variantClassNames[d][v];p&&(t+=" "+p)}}for(var[I,u]of a.compoundVariants)q(I,i,a.defaultVariants)&&(t+=" "+u);return t},R="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco0",U="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco1",B="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco2",L="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco3",z="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco4",W="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco5",Y="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco6",H="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco7",J="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8",O=K({defaultClassName:"pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),Q="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcof",F="pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog";function y({children:a,className:n,...t}){return e.createElement("div",{className:U,...t},e.createElement("div",{className:B},a))}o.Metadata.set(y,{name:"SideNavHeader",props:{}});const G=h.createContext({filterValue:"",activeItem:""});function m({children:a,className:n,onSelect:t,as:i,keyId:d,selectableAsParent:l,defaultExpanded:N=!0,expanded:v,onExpandedChange:p,...I}){const u=i??"a",[k,b]=o.selectChildren(a,[{type:m}]),[x,E]=e.useState(N),[g,T]=e.useState(!0),S=e.useContext(G),r=e.useRef(null),_=v!==void 0,C=S.filterValue.length>0?!0:v??x,A=V=>{_||E(V),p?.(V)};return e.useEffect(()=>{T(r.current?.innerText.toLowerCase().includes(S.filterValue.toLowerCase())||!1),S.filterValue.length>0&&!_&&E(!0)},[S]),e.createElement(e.Fragment,null,k.length?e.createElement("ul",{className:J},e.createElement("li",{ref:r,className:O({selected:l&&S.activeItem===d,inFilter:g}),onClick:()=>{t&&l?t(d):t&&!l&&A(!C)}},e.createElement(u,{className:F,...I},e.createElement("div",null,e.createElement(o.Icon,{className:Q,icon:C?"chevron-down":"chevron-right",onClick:()=>{A(!C)}})),b)),C&&k):e.createElement("li",{ref:r,className:O({selected:S.activeItem===d,inFilter:g})},e.createElement(u,{className:F,onClick:()=>{t&&t(d)},...I},a)))}o.Metadata.set(m,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},onSelect:{type:"function"},selectableAsParent:{type:"boolean"},defaultExpanded:{type:"boolean"},expanded:{type:"boolean"},onExpandedChange:{type:"function"},as:{type:"string"}}});function f({children:a,className:n,title:t,onSelect:i,...d}){const[l,N]=o.selectChildren(a,[{type:m}]),v=o.modChildren(l,p=>p.type===m?[{onSelect:i?I=>i(I):()=>{}}]:[]);return e.createElement("div",{className:W,...d},t&&e.createElement("div",{className:Y},t),e.createElement("ul",{className:H},v),N)}o.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function w({children:a,className:n,activeNavItem:t,onChange:i,filterable:d,filterInputPlaceholder:l,...N}){const[v,p,I]=o.selectChildren(a,[{type:y},{type:f},{type:m}]),u=e.useRef(t),[k,b]=e.useState(t),[x,E]=e.useState(""),g=r=>{b(r),i&&i(r)},T=o.modChildren(I,r=>r.type===m?[{onSelect:_=>g(_)}]:[]),S=o.modChildren(p,r=>r.type===f?[{onSelect:_=>g(_)}]:[]);return t!==u.current&&(b(t),u.current=t),e.createElement(G.Provider,{value:{filterValue:x,activeItem:k}},e.createElement("div",{className:o.cl(R),...N},v,d&&e.createElement("div",{className:L},e.createElement("div",{className:z},e.createElement("div",{className:"sps-text-input"},e.createElement("div",{className:"sps-form-control"},e.createElement("i",{className:"sps-text-input__icon sps-icon sps-icon-filter"}),e.createElement("input",{type:"text",className:"sps-text-input__input",placeholder:l,onChange:r=>{E(r.target.value)}}))))),S,e.createElement("ul",{className:H},T)))}o.Metadata.set(w,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},onChange:{type:"(keyId: string) => void"},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const X={"Side Navigation":{description:()=>e.createElement("p",null,"Side Navigations are used to provide quick access to a series of related pages or content. It can be used to navigate between different page views, or as an anchor-style menu to scroll to specific content on the same page."),components:[w,y,f,m],examples:{general:{label:"Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"The navigation benefits from subsections or nested structures"),e.createElement("li",null,"There are too many items for Tabbed Navigation"),e.createElement("li",null,"The navigation items have long names")),e.createElement("p",null,"Avoid using the Side Navigation if:"),e.createElement("ul",null,e.createElement("li",null,"Tabbed Navigation is sufficient"),e.createElement("li",null,"The full width of the page is required to sufficiently display content")))},filter:{label:"Filter",description:"Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",examples:{filter:{react:c.code`
|
|
2
2
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
3
3
|
import { Icon } from "@sps-woodland/core";
|
|
4
4
|
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
)
|
|
52
52
|
}
|
|
53
|
-
`}}},icons:{label:"Icons",description:({Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use Icons to further illustrate what the navigation item contains. If one navigation item has an Icon, all of the need to have an Icon. Do not use an Icon more than once in a single Side Navigation. Example: A bell icon to represent a Notifications navigation item."),e.createElement(a,{to:"/style-and-layout/icons"},"View All Icons")),examples:{icons:{react:
|
|
53
|
+
`}}},icons:{label:"Icons",description:({Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use Icons to further illustrate what the navigation item contains. If one navigation item has an Icon, all of the need to have an Icon. Do not use an Icon more than once in a single Side Navigation. Example: A bell icon to represent a Notifications navigation item."),e.createElement(a,{to:"/style-and-layout/icons"},"View All Icons")),examples:{icons:{react:c.code`
|
|
54
54
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
55
55
|
import { Icon } from "@sps-woodland/core";
|
|
56
56
|
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
</div>
|
|
95
95
|
)
|
|
96
96
|
}
|
|
97
|
-
`}}},nesting:{label:"Nesting",description:"Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",examples:{icons:{react:
|
|
97
|
+
`}}},nesting:{label:"Nesting",description:"Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",examples:{icons:{react:c.code`
|
|
98
98
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
99
99
|
import { Icon } from "@sps-woodland/core";
|
|
100
100
|
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
</div>
|
|
145
145
|
)
|
|
146
146
|
}
|
|
147
|
-
`}}},moreNesting:{label:"Parent Node Selectable",description:"When nesting, you can enable items to be selectable even if they have nested items.",examples:{icons:{react:
|
|
147
|
+
`}}},moreNesting:{label:"Parent Node Selectable",description:"When nesting, you can enable items to be selectable even if they have nested items.",examples:{icons:{react:c.code`
|
|
148
148
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
149
149
|
import { Icon } from "@sps-woodland/core";
|
|
150
150
|
|
|
@@ -198,7 +198,79 @@
|
|
|
198
198
|
</div>
|
|
199
199
|
)
|
|
200
200
|
}
|
|
201
|
-
`}}},
|
|
201
|
+
`}}},defaultExpanded:{label:"Collapsed by Default",description:"Branches are expanded on mount by default. Pass `defaultExpanded={false}` to render a branch collapsed initially — the user can still expand it with the chevron.",examples:{icons:{react:c.code`
|
|
202
|
+
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
203
|
+
import { Icon } from "@sps-woodland/core";
|
|
204
|
+
|
|
205
|
+
function Component() {
|
|
206
|
+
return (
|
|
207
|
+
<div className={grid.root}>
|
|
208
|
+
<div className={grid[4]}>
|
|
209
|
+
<SideNav activeNavItem="">
|
|
210
|
+
<SideNavHeader>
|
|
211
|
+
<Icon icon="status-ok" className={sprinkles({ mr: "sm" })} />
|
|
212
|
+
Title
|
|
213
|
+
</SideNavHeader>
|
|
214
|
+
<SideNavSection title="">
|
|
215
|
+
<SideNavItem keyId="parent1" defaultExpanded={false}>
|
|
216
|
+
Parent 1
|
|
217
|
+
<SideNavItem keyId="child1">Child 1</SideNavItem>
|
|
218
|
+
<SideNavItem keyId="child2">Child 2</SideNavItem>
|
|
219
|
+
</SideNavItem>
|
|
220
|
+
<SideNavItem keyId="parent2" defaultExpanded={false}>
|
|
221
|
+
Parent 2
|
|
222
|
+
<SideNavItem keyId="child3">Child 3</SideNavItem>
|
|
223
|
+
<SideNavItem keyId="child4">Child 4</SideNavItem>
|
|
224
|
+
</SideNavItem>
|
|
225
|
+
</SideNavSection>
|
|
226
|
+
</SideNav>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
)
|
|
230
|
+
}
|
|
231
|
+
`}}},controlledExpansion:{label:"Controlled Expansion",description:"Provide `expanded` together with `onExpandedChange` to own a branch's expanded state. Here the parents behave like an accordion — opening one closes the other.",examples:{icons:{react:c.code`
|
|
232
|
+
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
233
|
+
import { Icon } from "@sps-woodland/core";
|
|
234
|
+
|
|
235
|
+
function Component() {
|
|
236
|
+
const [openKey, setOpenKey] = React.useState("parent1");
|
|
237
|
+
return (
|
|
238
|
+
<div className={grid.root}>
|
|
239
|
+
<div className={grid[4]}>
|
|
240
|
+
<SideNav activeNavItem="">
|
|
241
|
+
<SideNavHeader>
|
|
242
|
+
<Icon icon="status-ok" className={sprinkles({ mr: "sm" })} />
|
|
243
|
+
Title
|
|
244
|
+
</SideNavHeader>
|
|
245
|
+
<SideNavSection title="">
|
|
246
|
+
<SideNavItem
|
|
247
|
+
keyId="parent1"
|
|
248
|
+
expanded={openKey === "parent1"}
|
|
249
|
+
onExpandedChange={(open) => setOpenKey(open ? "parent1" : "")}
|
|
250
|
+
>
|
|
251
|
+
Parent 1
|
|
252
|
+
<SideNavItem keyId="child1">Child 1</SideNavItem>
|
|
253
|
+
<SideNavItem keyId="child2">Child 2</SideNavItem>
|
|
254
|
+
</SideNavItem>
|
|
255
|
+
<SideNavItem
|
|
256
|
+
keyId="parent2"
|
|
257
|
+
expanded={openKey === "parent2"}
|
|
258
|
+
onExpandedChange={(open) => setOpenKey(open ? "parent2" : "")}
|
|
259
|
+
>
|
|
260
|
+
Parent 2
|
|
261
|
+
<SideNavItem keyId="child3">Child 3</SideNavItem>
|
|
262
|
+
<SideNavItem keyId="child4">Child 4</SideNavItem>
|
|
263
|
+
</SideNavItem>
|
|
264
|
+
</SideNavSection>
|
|
265
|
+
</SideNav>
|
|
266
|
+
</div>
|
|
267
|
+
<div className={grid[4]}>
|
|
268
|
+
<p>Currently open: <b>{openKey || "none"}</b></p>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
)
|
|
272
|
+
}
|
|
273
|
+
`}}},sections:{label:"Sections",description:"Use Sections to break up content into different categories. Sections utilize Subtitles.",examples:{icons:{react:c.code`
|
|
202
274
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
203
275
|
import { Icon } from "@sps-woodland/core";
|
|
204
276
|
|
|
@@ -247,7 +319,7 @@
|
|
|
247
319
|
</div>
|
|
248
320
|
)
|
|
249
321
|
}
|
|
250
|
-
`}}},tags:{label:"Tags",description:"Use Tags to indicate a number of additional detail related to the navigation item.",examples:{icons:{react:
|
|
322
|
+
`}}},tags:{label:"Tags",description:"Use Tags to indicate a number of additional detail related to the navigation item.",examples:{icons:{react:c.code`
|
|
251
323
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
252
324
|
import { Tag } from "@sps-woodland/tags";
|
|
253
325
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -292,4 +364,4 @@
|
|
|
292
364
|
</div>
|
|
293
365
|
)
|
|
294
366
|
}
|
|
295
|
-
`}}}}}};s.MANIFEST=
|
|
367
|
+
`}}}}}};s.MANIFEST=X,s.SideNav=w,s.SideNavHeader=y,s.SideNavItem=m,s.SideNavSection=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -4,6 +4,21 @@ type SideNavItemProps<T extends React.ElementType> = PolymorphicComponentProps<{
|
|
|
4
4
|
onSelect?: (key: string) => void;
|
|
5
5
|
selectableAsParent?: boolean;
|
|
6
6
|
keyId: string;
|
|
7
|
+
/**
|
|
8
|
+
* Initial expanded state for an UNCONTROLLED branch (an item with nested
|
|
9
|
+
* items). Defaults to `true` to preserve existing behavior; pass `false` to
|
|
10
|
+
* render it collapsed. Ignored when `expanded` is provided.
|
|
11
|
+
*/
|
|
12
|
+
defaultExpanded?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Controlled expanded state. When provided, the branch is controlled: it
|
|
15
|
+
* renders according to this value and reports user toggles via
|
|
16
|
+
* `onExpandedChange` (the consumer owns the state). Omit it for the
|
|
17
|
+
* uncontrolled `defaultExpanded` behavior.
|
|
18
|
+
*/
|
|
19
|
+
expanded?: boolean;
|
|
20
|
+
/** Called with the next expanded state when the user toggles a branch. */
|
|
21
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
7
22
|
}, T>;
|
|
8
|
-
export declare function SideNavItem<T extends React.ElementType = "a">({ children, className, onSelect, as, keyId, selectableAsParent, ...rest }: SideNavItemProps<T>): React.ReactElement;
|
|
23
|
+
export declare function SideNavItem<T extends React.ElementType = "a">({ children, className, onSelect, as, keyId, selectableAsParent, defaultExpanded, expanded, onExpandedChange, ...rest }: SideNavItemProps<T>): React.ReactElement;
|
|
9
24
|
export {};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_side-
|
|
1
|
+
.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco0{word-wrap:break-word;background-clip:border-box;background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;border-radius:.125rem;display:flex;flex-direction:column;min-width:0;position:relative}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco1{background-color:#fff;border-bottom:.0625rem solid #d2d4d4ff;margin-bottom:0;padding:.5rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco2{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco3{border-bottom:.0625rem solid #d2d4d4ff;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco5{border-top:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco7{list-style:none;margin-top:0;margin-bottom:0;padding:0;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #007db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcof{font-size:.625rem;vertical-align:middle;display:inline-block;line-height:1.25rem;margin-top:0;margin-right:.25rem;margin-bottom:0;margin-left:-.875rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{color:#1f282c;cursor:pointer;display:flex;font-size:.875rem;line-height:1.25rem;padding:.5rem 1rem .5rem 1.25rem;text-decoration:none}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_49_0__hash_1j8bvcog{padding-left:undefined}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/side-nav",
|
|
3
3
|
"description": "SPS Woodland Design System side navigation components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.49.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/tokens": "8.
|
|
32
|
+
"@sps-woodland/core": "8.49.0",
|
|
33
|
+
"@sps-woodland/tokens": "8.49.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "9.0.3",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vanilla-extract/recipes": "0.2.5",
|
|
39
39
|
"react": "16.14.0",
|
|
40
40
|
"react-dom": "16.14.0",
|
|
41
|
-
"@sps-woodland/
|
|
42
|
-
"@sps-woodland/
|
|
41
|
+
"@sps-woodland/tokens": "8.49.0",
|
|
42
|
+
"@sps-woodland/core": "8.49.0"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|