@sps-woodland/side-nav 8.50.2 → 8.51.1
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/README.md +39 -1
- package/lib/index.d.ts +1 -4
- package/lib/index.js +20 -243
- package/lib/index.umd.cjs +9 -9
- package/lib/style.css +1 -1
- package/package.json +6 -8
- package/vite.config.mjs +6 -13
- package/lib/side-nav/SideNav.css.d.ts +0 -29
- package/lib/side-nav/SideNav.d.ts +0 -8
- package/lib/side-nav/navContext.d.ts +0 -4
- package/lib/side-nav-header/SideNavHeader.d.ts +0 -3
- package/lib/side-nav-item/SideNavItem.d.ts +0 -24
- package/lib/side-nav-section/SideNavSection.d.ts +0 -6
package/README.md
CHANGED
|
@@ -1,3 +1,41 @@
|
|
|
1
1
|
## [@sps-woodland/side-nav](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/side-nav#readme)
|
|
2
2
|
|
|
3
|
-
SPS Woodland Design System side navigation components
|
|
3
|
+
SPS Woodland Design System side navigation components.
|
|
4
|
+
|
|
5
|
+
> **Heads up — this is a wrapper package.** The component source now lives in
|
|
6
|
+
> [`@sps-woodland/core`](../core). This package re-exports from core so existing
|
|
7
|
+
> imports keep working, but new code should prefer the core paths.
|
|
8
|
+
|
|
9
|
+
### Preferred imports (core)
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import {
|
|
13
|
+
SideNav,
|
|
14
|
+
SideNavHeader,
|
|
15
|
+
SideNavSection,
|
|
16
|
+
SideNavItem,
|
|
17
|
+
} from "@sps-woodland/core/side-nav";
|
|
18
|
+
|
|
19
|
+
// Or per-component:
|
|
20
|
+
import { SideNavItem } from "@sps-woodland/core/side-nav-item";
|
|
21
|
+
import { SideNavHeader } from "@sps-woodland/core/side-nav-header";
|
|
22
|
+
import { SideNavSection } from "@sps-woodland/core/side-nav-section";
|
|
23
|
+
|
|
24
|
+
import "@sps-woodland/core/side-nav/style.css";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
`SideNav` is barrel-only (the family name and the parent component share a
|
|
28
|
+
name). The three child components each additionally have their own flat
|
|
29
|
+
subpath.
|
|
30
|
+
|
|
31
|
+
### Legacy imports (still supported)
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import {
|
|
35
|
+
SideNav,
|
|
36
|
+
SideNavHeader,
|
|
37
|
+
SideNavSection,
|
|
38
|
+
SideNavItem,
|
|
39
|
+
} from "@sps-woodland/side-nav";
|
|
40
|
+
import "@sps-woodland/side-nav/style.css";
|
|
41
|
+
```
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,233 +1,14 @@
|
|
|
1
|
+
import { SideNav as t, SideNavHeader as d, SideNavSection as n, SideNavItem as o } from "@sps-woodland/core/side-nav";
|
|
2
|
+
export * from "@sps-woodland/core/side-nav";
|
|
1
3
|
import * as e from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { code as N } from "@spscommerce/utils";
|
|
5
|
-
function U(t, n, a) {
|
|
6
|
-
return n in t ? Object.defineProperty(t, n, {
|
|
7
|
-
value: a,
|
|
8
|
-
enumerable: !0,
|
|
9
|
-
configurable: !0,
|
|
10
|
-
writable: !0
|
|
11
|
-
}) : t[n] = a, t;
|
|
12
|
-
}
|
|
13
|
-
function H(t, n) {
|
|
14
|
-
var a = Object.keys(t);
|
|
15
|
-
if (Object.getOwnPropertySymbols) {
|
|
16
|
-
var i = Object.getOwnPropertySymbols(t);
|
|
17
|
-
n && (i = i.filter(function(d) {
|
|
18
|
-
return Object.getOwnPropertyDescriptor(t, d).enumerable;
|
|
19
|
-
})), a.push.apply(a, i);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
}
|
|
23
|
-
function j(t) {
|
|
24
|
-
for (var n = 1; n < arguments.length; n++) {
|
|
25
|
-
var a = arguments[n] != null ? arguments[n] : {};
|
|
26
|
-
n % 2 ? H(Object(a), !0).forEach(function(i) {
|
|
27
|
-
U(t, i, a[i]);
|
|
28
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : H(Object(a)).forEach(function(i) {
|
|
29
|
-
Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(a, i));
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
return t;
|
|
33
|
-
}
|
|
34
|
-
var q = (t, n, a) => {
|
|
35
|
-
for (var i of Object.keys(t)) {
|
|
36
|
-
var d;
|
|
37
|
-
if (t[i] !== ((d = n[i]) !== null && d !== void 0 ? d : a[i]))
|
|
38
|
-
return !1;
|
|
39
|
-
}
|
|
40
|
-
return !0;
|
|
41
|
-
}, B = (t) => (n) => {
|
|
42
|
-
var a = t.defaultClassName, i = j(j({}, t.defaultVariants), n);
|
|
43
|
-
for (var d in i) {
|
|
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
|
-
// @ts-expect-error
|
|
50
|
-
t.variantClassNames[d][o]
|
|
51
|
-
);
|
|
52
|
-
v && (a += " " + v);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
for (var [m, p] of t.compoundVariants)
|
|
56
|
-
q(m, i, t.defaultVariants) && (a += " " + p);
|
|
57
|
-
return a;
|
|
58
|
-
}, L = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco0", z = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco1", M = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco2", W = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco3", Y = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco4", J = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco5", Q = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco6", G = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco7", X = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco8", O = B({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), Z = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcof", F = "pkg_sps-woodland_side-nav__version_8_50_2__hash_1j8bvcog";
|
|
59
|
-
function x({
|
|
60
|
-
children: t,
|
|
61
|
-
className: n,
|
|
62
|
-
...a
|
|
63
|
-
}) {
|
|
64
|
-
return /* @__PURE__ */ e.createElement("div", { className: z, ...a }, /* @__PURE__ */ e.createElement("div", { className: M }, t));
|
|
65
|
-
}
|
|
66
|
-
k.set(x, {
|
|
67
|
-
name: "SideNavHeader",
|
|
68
|
-
props: {}
|
|
69
|
-
});
|
|
70
|
-
const V = D({
|
|
71
|
-
filterValue: "",
|
|
72
|
-
activeItem: ""
|
|
73
|
-
});
|
|
74
|
-
function I({
|
|
75
|
-
children: t,
|
|
76
|
-
className: n,
|
|
77
|
-
onSelect: a,
|
|
78
|
-
as: i,
|
|
79
|
-
keyId: d,
|
|
80
|
-
selectableAsParent: r,
|
|
81
|
-
defaultExpanded: l = !0,
|
|
82
|
-
expanded: o,
|
|
83
|
-
onExpandedChange: v,
|
|
84
|
-
...m
|
|
85
|
-
}) {
|
|
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
|
-
};
|
|
89
|
-
return e.useEffect(() => {
|
|
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(
|
|
92
|
-
"li",
|
|
93
|
-
{
|
|
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
|
|
102
|
-
}),
|
|
103
|
-
onClick: () => {
|
|
104
|
-
a && r ? a(d) : a && !r && T(!f);
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
/* @__PURE__ */ e.createElement(p, { className: F, ...m }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
|
|
108
|
-
K,
|
|
109
|
-
{
|
|
110
|
-
className: Z,
|
|
111
|
-
icon: f ? "chevron-down" : "chevron-right",
|
|
112
|
-
onClick: () => {
|
|
113
|
-
T(!f);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
)), _)
|
|
117
|
-
), f && h) : /* @__PURE__ */ e.createElement(
|
|
118
|
-
"li",
|
|
119
|
-
{
|
|
120
|
-
ref: s,
|
|
121
|
-
className: O({
|
|
122
|
-
selected: c.activeItem === d,
|
|
123
|
-
inFilter: u
|
|
124
|
-
})
|
|
125
|
-
},
|
|
126
|
-
/* @__PURE__ */ e.createElement(
|
|
127
|
-
p,
|
|
128
|
-
{
|
|
129
|
-
className: F,
|
|
130
|
-
onClick: () => {
|
|
131
|
-
a && a(d);
|
|
132
|
-
},
|
|
133
|
-
...m
|
|
134
|
-
},
|
|
135
|
-
t
|
|
136
|
-
)
|
|
137
|
-
));
|
|
138
|
-
}
|
|
139
|
-
k.set(I, {
|
|
140
|
-
name: "SideNavItem",
|
|
141
|
-
props: {
|
|
142
|
-
keyId: { type: "string", required: !0 },
|
|
143
|
-
onSelect: { type: "function" },
|
|
144
|
-
selectableAsParent: { type: "boolean" },
|
|
145
|
-
defaultExpanded: { type: "boolean" },
|
|
146
|
-
expanded: { type: "boolean" },
|
|
147
|
-
onExpandedChange: { type: "function" },
|
|
148
|
-
as: { type: "string" }
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
function y({
|
|
152
|
-
children: t,
|
|
153
|
-
className: n,
|
|
154
|
-
title: a,
|
|
155
|
-
onSelect: i,
|
|
156
|
-
...d
|
|
157
|
-
}) {
|
|
158
|
-
const [r, l] = w(t, [{ type: I }]), o = C(r, (v) => v.type === I ? [
|
|
159
|
-
{
|
|
160
|
-
onSelect: i ? (m) => i(m) : () => {
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
] : []);
|
|
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);
|
|
165
|
-
}
|
|
166
|
-
k.set(y, {
|
|
167
|
-
name: "SideNavSection",
|
|
168
|
-
props: {
|
|
169
|
-
title: { type: "string" }
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
function A({
|
|
173
|
-
children: t,
|
|
174
|
-
className: n,
|
|
175
|
-
activeNavItem: a,
|
|
176
|
-
onChange: i,
|
|
177
|
-
filterable: d,
|
|
178
|
-
filterInputPlaceholder: r,
|
|
179
|
-
...l
|
|
180
|
-
}) {
|
|
181
|
-
const [
|
|
182
|
-
o,
|
|
183
|
-
v,
|
|
184
|
-
m
|
|
185
|
-
] = w(t, [
|
|
186
|
-
{ type: x },
|
|
187
|
-
{ type: y },
|
|
188
|
-
{ type: I }
|
|
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 ? [
|
|
192
|
-
{
|
|
193
|
-
onSelect: (S) => u(S)
|
|
194
|
-
}
|
|
195
|
-
] : []), c = C(
|
|
196
|
-
v,
|
|
197
|
-
(s) => s.type === y ? [
|
|
198
|
-
{
|
|
199
|
-
onSelect: (S) => u(S)
|
|
200
|
-
}
|
|
201
|
-
] : []
|
|
202
|
-
);
|
|
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(
|
|
204
|
-
"input",
|
|
205
|
-
{
|
|
206
|
-
type: "text",
|
|
207
|
-
className: "sps-text-input__input",
|
|
208
|
-
placeholder: r,
|
|
209
|
-
onChange: (s) => {
|
|
210
|
-
g(s.target.value);
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
))))), c, /* @__PURE__ */ e.createElement("ul", { className: G }, E)));
|
|
214
|
-
}
|
|
215
|
-
k.set(A, {
|
|
216
|
-
name: "SideNav",
|
|
217
|
-
props: {
|
|
218
|
-
activeNavItem: { type: "string", required: !0 },
|
|
219
|
-
onChange: { type: "(keyId: string) => void" },
|
|
220
|
-
filterable: { type: "boolean" },
|
|
221
|
-
filterInputPlaceholder: { type: "string" }
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
const $ = {
|
|
4
|
+
import { code as a } from "@spscommerce/utils";
|
|
5
|
+
const s = {
|
|
225
6
|
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."),
|
|
226
7
|
components: [
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
8
|
+
t,
|
|
9
|
+
d,
|
|
10
|
+
n,
|
|
11
|
+
o
|
|
231
12
|
],
|
|
232
13
|
examples: {
|
|
233
14
|
general: {
|
|
@@ -239,7 +20,7 @@ const $ = {
|
|
|
239
20
|
description: "Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",
|
|
240
21
|
examples: {
|
|
241
22
|
filter: {
|
|
242
|
-
react:
|
|
23
|
+
react: a`
|
|
243
24
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
244
25
|
import { Icon } from "@sps-woodland/core";
|
|
245
26
|
|
|
@@ -297,10 +78,10 @@ const $ = {
|
|
|
297
78
|
},
|
|
298
79
|
icons: {
|
|
299
80
|
label: "Icons",
|
|
300
|
-
description: ({ Link:
|
|
81
|
+
description: ({ Link: i }) => /* @__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(i, { to: "/style-and-layout/icons" }, "View All Icons")),
|
|
301
82
|
examples: {
|
|
302
83
|
icons: {
|
|
303
|
-
react:
|
|
84
|
+
react: a`
|
|
304
85
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
305
86
|
import { Icon } from "@sps-woodland/core";
|
|
306
87
|
|
|
@@ -353,7 +134,7 @@ const $ = {
|
|
|
353
134
|
description: "Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",
|
|
354
135
|
examples: {
|
|
355
136
|
icons: {
|
|
356
|
-
react:
|
|
137
|
+
react: a`
|
|
357
138
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
358
139
|
import { Icon } from "@sps-woodland/core";
|
|
359
140
|
|
|
@@ -412,7 +193,7 @@ const $ = {
|
|
|
412
193
|
description: "When nesting, you can enable items to be selectable even if they have nested items.",
|
|
413
194
|
examples: {
|
|
414
195
|
icons: {
|
|
415
|
-
react:
|
|
196
|
+
react: a`
|
|
416
197
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
417
198
|
import { Icon } from "@sps-woodland/core";
|
|
418
199
|
|
|
@@ -475,7 +256,7 @@ const $ = {
|
|
|
475
256
|
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
257
|
examples: {
|
|
477
258
|
icons: {
|
|
478
|
-
react:
|
|
259
|
+
react: a`
|
|
479
260
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
480
261
|
import { Icon } from "@sps-woodland/core";
|
|
481
262
|
|
|
@@ -514,7 +295,7 @@ const $ = {
|
|
|
514
295
|
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
296
|
examples: {
|
|
516
297
|
icons: {
|
|
517
|
-
react:
|
|
298
|
+
react: a`
|
|
518
299
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
519
300
|
import { Icon } from "@sps-woodland/core";
|
|
520
301
|
|
|
@@ -565,7 +346,7 @@ const $ = {
|
|
|
565
346
|
description: "Use Sections to break up content into different categories. Sections utilize Subtitles.",
|
|
566
347
|
examples: {
|
|
567
348
|
icons: {
|
|
568
|
-
react:
|
|
349
|
+
react: a`
|
|
569
350
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
570
351
|
import { Icon } from "@sps-woodland/core";
|
|
571
352
|
|
|
@@ -623,7 +404,7 @@ const $ = {
|
|
|
623
404
|
description: "Use Tags to indicate a number of additional detail related to the navigation item.",
|
|
624
405
|
examples: {
|
|
625
406
|
icons: {
|
|
626
|
-
react:
|
|
407
|
+
react: a`
|
|
627
408
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
628
409
|
import { Tag } from "@sps-woodland/tags";
|
|
629
410
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -673,13 +454,9 @@ const $ = {
|
|
|
673
454
|
}
|
|
674
455
|
}
|
|
675
456
|
}
|
|
676
|
-
},
|
|
677
|
-
"Side Navigation":
|
|
457
|
+
}, r = {
|
|
458
|
+
"Side Navigation": s
|
|
678
459
|
};
|
|
679
460
|
export {
|
|
680
|
-
|
|
681
|
-
A as SideNav,
|
|
682
|
-
x as SideNavHeader,
|
|
683
|
-
I as SideNavItem,
|
|
684
|
-
y as SideNavSection
|
|
461
|
+
r as MANIFEST
|
|
685
462
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@sps-woodland/core/side-nav"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/side-nav","react","@spscommerce/utils"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.SideNav={},i.sideNav,i.React,i.utils))})(this,(function(i,t,r,d){"use strict";function m(a){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(o,n,s.get?s:{enumerable:!0,get:()=>a[n]})}}return o.default=a,Object.freeze(o)}const e=m(r),v={"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:[t.SideNav,t.SideNavHeader,t.SideNavSection,t.SideNavItem],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:d.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:d.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:d.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:d.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,7 @@
|
|
|
198
198
|
</div>
|
|
199
199
|
)
|
|
200
200
|
}
|
|
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:
|
|
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:d.code`
|
|
202
202
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
203
203
|
import { Icon } from "@sps-woodland/core";
|
|
204
204
|
|
|
@@ -228,7 +228,7 @@
|
|
|
228
228
|
</div>
|
|
229
229
|
)
|
|
230
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:
|
|
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:d.code`
|
|
232
232
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
233
233
|
import { Icon } from "@sps-woodland/core";
|
|
234
234
|
|
|
@@ -270,7 +270,7 @@
|
|
|
270
270
|
</div>
|
|
271
271
|
)
|
|
272
272
|
}
|
|
273
|
-
`}}},sections:{label:"Sections",description:"Use Sections to break up content into different categories. Sections utilize Subtitles.",examples:{icons:{react:
|
|
273
|
+
`}}},sections:{label:"Sections",description:"Use Sections to break up content into different categories. Sections utilize Subtitles.",examples:{icons:{react:d.code`
|
|
274
274
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
275
275
|
import { Icon } from "@sps-woodland/core";
|
|
276
276
|
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
</div>
|
|
320
320
|
)
|
|
321
321
|
}
|
|
322
|
-
`}}},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:d.code`
|
|
323
323
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
324
324
|
import { Tag } from "@sps-woodland/tags";
|
|
325
325
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -364,4 +364,4 @@
|
|
|
364
364
|
</div>
|
|
365
365
|
)
|
|
366
366
|
}
|
|
367
|
-
`}}}}}};
|
|
367
|
+
`}}}}}};i.MANIFEST=v,Object.keys(t).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(i,a)&&Object.defineProperty(i,a,{enumerable:!0,get:()=>t[a]})}),Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p0{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_core__version_8_51_1__hash_1wtt70p1{background-color:#fff;border-bottom:.0625rem solid #d2d4d4ff;margin-bottom:0;padding:.5rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p2{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_core__version_8_51_1__hash_1wtt70p2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p3{border-bottom:.0625rem solid #d2d4d4ff;padding:.5rem 0}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p4{margin:6px 21px}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p5{margin:0;padding:.5rem 0}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p5+.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p5{border-top:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p7{list-style:none;margin-top:0;margin-bottom:0;padding:0;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8{padding-left:0}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p9{display:block;width:100%}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #007db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pd{display:none}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pe{display:block;width:100%}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pf{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_core__version_8_51_1__hash_1wtt70pg{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_core__version_8_51_1__hash_1wtt70pg:hover{background-color:#f3f4f4}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p9>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:2.125rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p9>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:3rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p9>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:3.875rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p9>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:undefined}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pe>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:2.125rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pe>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:3rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pe>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{padding-left:3.875rem}.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70p8>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pe>.pkg_sps-woodland_core__version_8_51_1__hash_1wtt70pg{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.51.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
+
"./style.css": "./lib/style.css",
|
|
20
21
|
"./lib/style.css": {
|
|
21
22
|
"import": "./lib/style.css",
|
|
22
23
|
"require": "./lib/style.css"
|
|
@@ -29,22 +30,19 @@
|
|
|
29
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
30
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/tokens": "8.50.2"
|
|
33
|
+
"@sps-woodland/core": "8.51.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "9.0.3",
|
|
37
|
-
"@vanilla-extract/css": "1.17.4",
|
|
38
|
-
"@vanilla-extract/recipes": "0.2.5",
|
|
39
37
|
"react": "16.14.0",
|
|
40
38
|
"react-dom": "16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.
|
|
42
|
-
"@sps-woodland/tokens": "8.50.2"
|
|
39
|
+
"@sps-woodland/core": "8.51.1"
|
|
43
40
|
},
|
|
44
41
|
"scripts": {
|
|
45
|
-
"build": "pnpm run build:js && pnpm run build:types",
|
|
42
|
+
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|
|
46
43
|
"build:js": "vite build",
|
|
47
44
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
45
|
+
"build:css": "cp ../core/lib/side-nav/style.css lib/style.css 2>/dev/null || echo 'side-nav style.css not found, skipping'",
|
|
48
46
|
"watch": "vite build --watch",
|
|
49
47
|
"clean": "git clean -fdX",
|
|
50
48
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,31 +1,24 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
-
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
2
|
import { defineConfig } from "vite";
|
|
4
|
-
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
3
|
import pkg from "./package.json";
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
// Side-nav is now a wrapper package that re-exports from @sps-woodland/core.
|
|
6
|
+
// No vanilla-extract needed - CSS is provided by the mono-package.
|
|
7
|
+
|
|
8
|
+
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
8
9
|
|
|
9
10
|
export default defineConfig({
|
|
10
|
-
plugins: [
|
|
11
|
-
vanillaExtractPlugin(
|
|
12
|
-
getVanillaExtractPluginProps({
|
|
13
|
-
packageName: pkg.name,
|
|
14
|
-
packageVersion,
|
|
15
|
-
})
|
|
16
|
-
),
|
|
17
|
-
],
|
|
18
11
|
build: {
|
|
19
12
|
lib: {
|
|
20
13
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
14
|
name: "SideNav",
|
|
22
15
|
fileName: "index",
|
|
23
|
-
cssFileName: "style",
|
|
24
16
|
},
|
|
25
17
|
outDir: path.resolve(__dirname, "./lib"),
|
|
26
18
|
emptyOutDir: false,
|
|
27
19
|
rollupOptions: {
|
|
28
|
-
|
|
20
|
+
// External must match subpath imports like @sps-woodland/core/side-nav
|
|
21
|
+
external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
|
|
29
22
|
},
|
|
30
23
|
},
|
|
31
24
|
});
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export declare const sideNavContainer: string;
|
|
2
|
-
export declare const sideNavHeader: string;
|
|
3
|
-
export declare const sideNavTitle: string;
|
|
4
|
-
export declare const sideNavFilterSection: string;
|
|
5
|
-
export declare const sideNavFilterWrapper: string;
|
|
6
|
-
export declare const sideNavSection: string;
|
|
7
|
-
export declare const sideNavSectionTitle: string;
|
|
8
|
-
export declare const sideNavBranch: string;
|
|
9
|
-
export declare const sideNavExpand: string;
|
|
10
|
-
export declare const sideNavLeaf: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
11
|
-
selected: {
|
|
12
|
-
true: {
|
|
13
|
-
backgroundColor: string;
|
|
14
|
-
boxShadow: `inset ${string} 0 ${string}`;
|
|
15
|
-
color: "#1f282c";
|
|
16
|
-
fontWeight: number;
|
|
17
|
-
};
|
|
18
|
-
false: {};
|
|
19
|
-
};
|
|
20
|
-
inFilter: {
|
|
21
|
-
true: {};
|
|
22
|
-
false: {
|
|
23
|
-
display: "none";
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
}>;
|
|
27
|
-
export declare const sideNavExpandLeaf: string;
|
|
28
|
-
export declare const sideNavExpandIcon: string;
|
|
29
|
-
export declare const sideNavLink: string;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function SideNav({ children, className, activeNavItem, onChange, filterable, filterInputPlaceholder, ...rest }: ComponentProps<{
|
|
4
|
-
activeNavItem: string;
|
|
5
|
-
onChange?: (keyId: string) => void;
|
|
6
|
-
filterable?: boolean;
|
|
7
|
-
filterInputPlaceholder?: string;
|
|
8
|
-
}, HTMLDivElement>): React.ReactElement;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { PolymorphicComponentProps } from "@sps-woodland/core";
|
|
3
|
-
type SideNavItemProps<T extends React.ElementType> = PolymorphicComponentProps<{
|
|
4
|
-
onSelect?: (key: string) => void;
|
|
5
|
-
selectableAsParent?: boolean;
|
|
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;
|
|
22
|
-
}, T>;
|
|
23
|
-
export declare function SideNavItem<T extends React.ElementType = "a">({ children, className, onSelect, as, keyId, selectableAsParent, defaultExpanded, expanded, onExpandedChange, ...rest }: SideNavItemProps<T>): React.ReactElement;
|
|
24
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function SideNavSection({ children, className, title, onSelect, ...rest }: ComponentProps<{
|
|
4
|
-
title?: string;
|
|
5
|
-
onSelect?: (string: string) => void;
|
|
6
|
-
}, HTMLDivElement>): React.ReactElement;
|