@sps-woodland/side-nav 8.51.2 → 8.52.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/README.md +1 -39
- package/lib/index.d.ts +4 -1
- package/lib/index.js +243 -20
- package/lib/index.umd.cjs +9 -9
- package/lib/side-nav/SideNav.css.d.ts +29 -0
- package/lib/side-nav/SideNav.d.ts +8 -0
- package/lib/side-nav/navContext.d.ts +4 -0
- package/lib/side-nav-header/SideNavHeader.d.ts +3 -0
- package/lib/side-nav-item/SideNavItem.d.ts +24 -0
- package/lib/side-nav-section/SideNavSection.d.ts +6 -0
- package/lib/style.css +1 -1
- package/package.json +8 -6
- package/vite.config.mjs +13 -6
package/README.md
CHANGED
|
@@ -1,41 +1,3 @@
|
|
|
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
|
|
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
|
-
```
|
|
3
|
+
SPS Woodland Design System side navigation components
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,14 +1,233 @@
|
|
|
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";
|
|
3
1
|
import * as e from "react";
|
|
4
|
-
import {
|
|
5
|
-
|
|
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
|
+
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_52_0__hash_1j8bvco0", z = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco1", M = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco2", W = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco3", Y = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco4", J = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco5", Q = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco6", G = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco7", X = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8", O = B({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), Z = "pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcof", F = "pkg_sps-woodland_side-nav__version_8_52_0__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 $ = {
|
|
6
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."),
|
|
7
226
|
components: [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
227
|
+
A,
|
|
228
|
+
x,
|
|
229
|
+
y,
|
|
230
|
+
I
|
|
12
231
|
],
|
|
13
232
|
examples: {
|
|
14
233
|
general: {
|
|
@@ -20,7 +239,7 @@ const s = {
|
|
|
20
239
|
description: "Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",
|
|
21
240
|
examples: {
|
|
22
241
|
filter: {
|
|
23
|
-
react:
|
|
242
|
+
react: N`
|
|
24
243
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
25
244
|
import { Icon } from "@sps-woodland/core";
|
|
26
245
|
|
|
@@ -78,10 +297,10 @@ const s = {
|
|
|
78
297
|
},
|
|
79
298
|
icons: {
|
|
80
299
|
label: "Icons",
|
|
81
|
-
description: ({ Link:
|
|
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")),
|
|
82
301
|
examples: {
|
|
83
302
|
icons: {
|
|
84
|
-
react:
|
|
303
|
+
react: N`
|
|
85
304
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
86
305
|
import { Icon } from "@sps-woodland/core";
|
|
87
306
|
|
|
@@ -134,7 +353,7 @@ const s = {
|
|
|
134
353
|
description: "Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",
|
|
135
354
|
examples: {
|
|
136
355
|
icons: {
|
|
137
|
-
react:
|
|
356
|
+
react: N`
|
|
138
357
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
139
358
|
import { Icon } from "@sps-woodland/core";
|
|
140
359
|
|
|
@@ -193,7 +412,7 @@ const s = {
|
|
|
193
412
|
description: "When nesting, you can enable items to be selectable even if they have nested items.",
|
|
194
413
|
examples: {
|
|
195
414
|
icons: {
|
|
196
|
-
react:
|
|
415
|
+
react: N`
|
|
197
416
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
198
417
|
import { Icon } from "@sps-woodland/core";
|
|
199
418
|
|
|
@@ -256,7 +475,7 @@ const s = {
|
|
|
256
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.",
|
|
257
476
|
examples: {
|
|
258
477
|
icons: {
|
|
259
|
-
react:
|
|
478
|
+
react: N`
|
|
260
479
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
261
480
|
import { Icon } from "@sps-woodland/core";
|
|
262
481
|
|
|
@@ -295,7 +514,7 @@ const s = {
|
|
|
295
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.",
|
|
296
515
|
examples: {
|
|
297
516
|
icons: {
|
|
298
|
-
react:
|
|
517
|
+
react: N`
|
|
299
518
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
300
519
|
import { Icon } from "@sps-woodland/core";
|
|
301
520
|
|
|
@@ -346,7 +565,7 @@ const s = {
|
|
|
346
565
|
description: "Use Sections to break up content into different categories. Sections utilize Subtitles.",
|
|
347
566
|
examples: {
|
|
348
567
|
icons: {
|
|
349
|
-
react:
|
|
568
|
+
react: N`
|
|
350
569
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
351
570
|
import { Icon } from "@sps-woodland/core";
|
|
352
571
|
|
|
@@ -404,7 +623,7 @@ const s = {
|
|
|
404
623
|
description: "Use Tags to indicate a number of additional detail related to the navigation item.",
|
|
405
624
|
examples: {
|
|
406
625
|
icons: {
|
|
407
|
-
react:
|
|
626
|
+
react: N`
|
|
408
627
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
409
628
|
import { Tag } from "@sps-woodland/tags";
|
|
410
629
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -454,9 +673,13 @@ const s = {
|
|
|
454
673
|
}
|
|
455
674
|
}
|
|
456
675
|
}
|
|
457
|
-
},
|
|
458
|
-
"Side Navigation":
|
|
676
|
+
}, ne = {
|
|
677
|
+
"Side Navigation": $
|
|
459
678
|
};
|
|
460
679
|
export {
|
|
461
|
-
|
|
680
|
+
ne as MANIFEST,
|
|
681
|
+
A as SideNav,
|
|
682
|
+
x as SideNavHeader,
|
|
683
|
+
I as SideNavItem,
|
|
684
|
+
y as SideNavSection
|
|
462
685
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
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_52_0__hash_1j8bvco0",U="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco1",B="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco2",L="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco3",z="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco4",W="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco5",Y="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco6",H="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco7",J="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8",O=K({defaultClassName:"pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),Q="pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcof",F="pkg_sps-woodland_side-nav__version_8_52_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,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:c.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:c.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:c.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:c.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
|
+
`}}}}}};s.MANIFEST=X,s.SideNav=w,s.SideNavHeader=y,s.SideNavItem=m,s.SideNavSection=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,29 @@
|
|
|
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;
|
|
@@ -0,0 +1,8 @@
|
|
|
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;
|
|
@@ -0,0 +1,24 @@
|
|
|
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 {};
|
|
@@ -0,0 +1,6 @@
|
|
|
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;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_side-nav__version_8_52_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_52_0__hash_1j8bvco1{background-color:#fff;border-bottom:.0625rem solid #d2d4d4ff;margin-bottom:0;padding:.5rem}.pkg_sps-woodland_side-nav__version_8_52_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_52_0__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco3{border-bottom:.0625rem solid #d2d4d4ff;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco5{border-top:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_52_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_52_0__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #007db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_52_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_52_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_52_0__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_52_0__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_52_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.52.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",
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
-
"./style.css": "./lib/style.css",
|
|
21
20
|
"./lib/style.css": {
|
|
22
21
|
"import": "./lib/style.css",
|
|
23
22
|
"require": "./lib/style.css"
|
|
@@ -30,19 +29,22 @@
|
|
|
30
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
32
|
+
"@sps-woodland/core": "8.52.0",
|
|
33
|
+
"@sps-woodland/tokens": "8.52.0"
|
|
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",
|
|
37
39
|
"react": "16.14.0",
|
|
38
40
|
"react-dom": "16.14.0",
|
|
39
|
-
"@sps-woodland/core": "8.
|
|
41
|
+
"@sps-woodland/core": "8.52.0",
|
|
42
|
+
"@sps-woodland/tokens": "8.52.0"
|
|
40
43
|
},
|
|
41
44
|
"scripts": {
|
|
42
|
-
"build": "pnpm run build:js && pnpm run build:types
|
|
45
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
43
46
|
"build:js": "vite build",
|
|
44
47
|
"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'",
|
|
46
48
|
"watch": "vite build --watch",
|
|
47
49
|
"clean": "git clean -fdX",
|
|
48
50
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
+
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
2
3
|
import { defineConfig } from "vite";
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
3
5
|
import pkg from "./package.json";
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
// No vanilla-extract needed - CSS is provided by the mono-package.
|
|
7
|
-
|
|
8
|
-
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
9
8
|
|
|
10
9
|
export default defineConfig({
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
11
18
|
build: {
|
|
12
19
|
lib: {
|
|
13
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
14
21
|
name: "SideNav",
|
|
15
22
|
fileName: "index",
|
|
23
|
+
cssFileName: "style",
|
|
16
24
|
},
|
|
17
25
|
outDir: path.resolve(__dirname, "./lib"),
|
|
18
26
|
emptyOutDir: false,
|
|
19
27
|
rollupOptions: {
|
|
20
|
-
|
|
21
|
-
external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
|
|
28
|
+
external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
|
|
22
29
|
},
|
|
23
30
|
},
|
|
24
31
|
});
|