@sps-woodland/side-nav 8.29.0 → 8.29.2
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 +56 -53
- package/lib/index.umd.cjs +2 -2
- package/lib/style.css +1 -1
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -2,66 +2,66 @@ import * as e from "react";
|
|
|
2
2
|
import { createContext as G } from "react";
|
|
3
3
|
import { Metadata as f, selectChildren as E, Icon as V, modChildren as b, cl as A } from "@sps-woodland/core";
|
|
4
4
|
import { code as S } from "@spscommerce/utils";
|
|
5
|
-
function U(
|
|
6
|
-
return n in
|
|
7
|
-
value:
|
|
5
|
+
function U(t, n, a) {
|
|
6
|
+
return n in t ? Object.defineProperty(t, n, {
|
|
7
|
+
value: a,
|
|
8
8
|
enumerable: !0,
|
|
9
9
|
configurable: !0,
|
|
10
10
|
writable: !0
|
|
11
|
-
}) :
|
|
11
|
+
}) : t[n] = a, t;
|
|
12
12
|
}
|
|
13
|
-
function C(
|
|
14
|
-
var
|
|
13
|
+
function C(t, n) {
|
|
14
|
+
var a = Object.keys(t);
|
|
15
15
|
if (Object.getOwnPropertySymbols) {
|
|
16
|
-
var i = Object.getOwnPropertySymbols(
|
|
16
|
+
var i = Object.getOwnPropertySymbols(t);
|
|
17
17
|
n && (i = i.filter(function(d) {
|
|
18
|
-
return Object.getOwnPropertyDescriptor(
|
|
19
|
-
})),
|
|
18
|
+
return Object.getOwnPropertyDescriptor(t, d).enumerable;
|
|
19
|
+
})), a.push.apply(a, i);
|
|
20
20
|
}
|
|
21
|
-
return
|
|
21
|
+
return a;
|
|
22
22
|
}
|
|
23
|
-
function T(
|
|
23
|
+
function T(t) {
|
|
24
24
|
for (var n = 1; n < arguments.length; n++) {
|
|
25
|
-
var
|
|
26
|
-
n % 2 ? C(Object(
|
|
27
|
-
U(
|
|
28
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(
|
|
29
|
-
Object.defineProperty(
|
|
25
|
+
var a = arguments[n] != null ? arguments[n] : {};
|
|
26
|
+
n % 2 ? C(Object(a), !0).forEach(function(i) {
|
|
27
|
+
U(t, i, a[i]);
|
|
28
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : C(Object(a)).forEach(function(i) {
|
|
29
|
+
Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(a, i));
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return t;
|
|
33
33
|
}
|
|
34
|
-
var D = (
|
|
35
|
-
for (var i of Object.keys(
|
|
34
|
+
var D = (t, n, a) => {
|
|
35
|
+
for (var i of Object.keys(t)) {
|
|
36
36
|
var d;
|
|
37
|
-
if (
|
|
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
|
-
}, R = (
|
|
42
|
-
var
|
|
41
|
+
}, R = (t) => (n) => {
|
|
42
|
+
var a = t.defaultClassName, i = T(T({}, t.defaultVariants), n);
|
|
43
43
|
for (var d in i) {
|
|
44
|
-
var s, o = (s = i[d]) !== null && s !== void 0 ? s :
|
|
44
|
+
var s, o = (s = i[d]) !== null && s !== void 0 ? s : t.defaultVariants[d];
|
|
45
45
|
if (o != null) {
|
|
46
46
|
var r = o;
|
|
47
47
|
typeof r == "boolean" && (r = r === !0 ? "true" : "false");
|
|
48
48
|
var l = (
|
|
49
49
|
// @ts-expect-error
|
|
50
|
-
|
|
50
|
+
t.variantClassNames[d][r]
|
|
51
51
|
);
|
|
52
|
-
l && (
|
|
52
|
+
l && (a += " " + l);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
for (var [c, v] of
|
|
56
|
-
D(c, i,
|
|
57
|
-
return
|
|
58
|
-
}, q = "pkg_sps-woodland_side-
|
|
55
|
+
for (var [c, v] of t.compoundVariants)
|
|
56
|
+
D(c, i, t.defaultVariants) && (a += " " + v);
|
|
57
|
+
return a;
|
|
58
|
+
}, q = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco0", L = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco1", B = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco2", z = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco3", M = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco4", W = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco5", Y = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco6", x = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco7", J = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8", j = R({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), K = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcof", P = "pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog";
|
|
59
59
|
function w({
|
|
60
|
-
children:
|
|
60
|
+
children: t,
|
|
61
61
|
className: n,
|
|
62
|
-
...
|
|
62
|
+
...a
|
|
63
63
|
}) {
|
|
64
|
-
return /* @__PURE__ */ e.createElement("div", { className: L, ...
|
|
64
|
+
return /* @__PURE__ */ e.createElement("div", { className: L, ...a }, /* @__PURE__ */ e.createElement("div", { className: B }, t));
|
|
65
65
|
}
|
|
66
66
|
f.set(w, {
|
|
67
67
|
name: "SideNavHeader",
|
|
@@ -72,35 +72,38 @@ const H = G({
|
|
|
72
72
|
activeItem: ""
|
|
73
73
|
});
|
|
74
74
|
function I({
|
|
75
|
-
children:
|
|
75
|
+
children: t,
|
|
76
76
|
className: n,
|
|
77
|
-
onSelect:
|
|
77
|
+
onSelect: a,
|
|
78
78
|
as: i,
|
|
79
79
|
keyId: d,
|
|
80
80
|
selectableAsParent: s,
|
|
81
81
|
...o
|
|
82
82
|
}) {
|
|
83
|
-
const r = i ?? "a", [l, c] = E(
|
|
83
|
+
const r = i ?? "a", [l, c] = E(t, [{ type: I }]), [v, _] = e.useState(!0), [u, k] = e.useState(!0), N = e.useContext(H), p = e.useRef(null);
|
|
84
84
|
return e.useEffect(() => {
|
|
85
85
|
var g;
|
|
86
|
-
k(((g = p.current) == null ? void 0 : g.innerText.toLowerCase().includes(N.filterValue.toLowerCase())) || !1), N.filterValue.length > 0 &&
|
|
86
|
+
k(((g = p.current) == null ? void 0 : g.innerText.toLowerCase().includes(N.filterValue.toLowerCase())) || !1), N.filterValue.length > 0 && _(!0);
|
|
87
87
|
}, [N]), /* @__PURE__ */ e.createElement(e.Fragment, null, l.length ? /* @__PURE__ */ e.createElement("ul", { className: J }, /* @__PURE__ */ e.createElement(
|
|
88
88
|
"li",
|
|
89
89
|
{
|
|
90
90
|
ref: p,
|
|
91
91
|
className: j({
|
|
92
92
|
selected: s && N.activeItem === d,
|
|
93
|
-
inFilter: s &&
|
|
93
|
+
inFilter: s && u
|
|
94
94
|
}),
|
|
95
95
|
onClick: () => {
|
|
96
|
-
|
|
96
|
+
a && s ? a(d) : a && !s && _(!v);
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
/* @__PURE__ */ e.createElement(r, { className: P, ...o }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
|
|
100
100
|
V,
|
|
101
101
|
{
|
|
102
102
|
className: K,
|
|
103
|
-
icon: v ? "chevron-down" : "chevron-right"
|
|
103
|
+
icon: v ? "chevron-down" : "chevron-right",
|
|
104
|
+
onClick: () => {
|
|
105
|
+
_(!v);
|
|
106
|
+
}
|
|
104
107
|
}
|
|
105
108
|
)), c)
|
|
106
109
|
), v && l) : /* @__PURE__ */ e.createElement(
|
|
@@ -109,7 +112,7 @@ function I({
|
|
|
109
112
|
ref: p,
|
|
110
113
|
className: j({
|
|
111
114
|
selected: N.activeItem === d,
|
|
112
|
-
inFilter:
|
|
115
|
+
inFilter: u
|
|
113
116
|
})
|
|
114
117
|
},
|
|
115
118
|
/* @__PURE__ */ e.createElement(
|
|
@@ -117,11 +120,11 @@ function I({
|
|
|
117
120
|
{
|
|
118
121
|
className: P,
|
|
119
122
|
onClick: () => {
|
|
120
|
-
|
|
123
|
+
a && a(d);
|
|
121
124
|
},
|
|
122
125
|
...o
|
|
123
126
|
},
|
|
124
|
-
|
|
127
|
+
t
|
|
125
128
|
)
|
|
126
129
|
));
|
|
127
130
|
}
|
|
@@ -135,19 +138,19 @@ f.set(I, {
|
|
|
135
138
|
}
|
|
136
139
|
});
|
|
137
140
|
function h({
|
|
138
|
-
children:
|
|
141
|
+
children: t,
|
|
139
142
|
className: n,
|
|
140
|
-
title:
|
|
143
|
+
title: a,
|
|
141
144
|
onSelect: i,
|
|
142
145
|
...d
|
|
143
146
|
}) {
|
|
144
|
-
const [s, o] = E(
|
|
147
|
+
const [s, o] = E(t, [{ type: I }]), r = b(s, (l) => l.type === I ? [
|
|
145
148
|
{
|
|
146
149
|
onSelect: i ? (c) => i(c) : () => {
|
|
147
150
|
}
|
|
148
151
|
}
|
|
149
152
|
] : []);
|
|
150
|
-
return /* @__PURE__ */ e.createElement("div", { className: W, ...d },
|
|
153
|
+
return /* @__PURE__ */ e.createElement("div", { className: W, ...d }, a && /* @__PURE__ */ e.createElement("div", { className: Y }, a), /* @__PURE__ */ e.createElement("ul", { className: x }, r), o);
|
|
151
154
|
}
|
|
152
155
|
f.set(h, {
|
|
153
156
|
name: "SideNavSection",
|
|
@@ -156,9 +159,9 @@ f.set(h, {
|
|
|
156
159
|
}
|
|
157
160
|
});
|
|
158
161
|
function O({
|
|
159
|
-
children:
|
|
162
|
+
children: t,
|
|
160
163
|
className: n,
|
|
161
|
-
activeNavItem:
|
|
164
|
+
activeNavItem: a,
|
|
162
165
|
onChange: i,
|
|
163
166
|
filterable: d,
|
|
164
167
|
filterInputPlaceholder: s,
|
|
@@ -168,12 +171,12 @@ function O({
|
|
|
168
171
|
r,
|
|
169
172
|
l,
|
|
170
173
|
c
|
|
171
|
-
] = E(
|
|
174
|
+
] = E(t, [
|
|
172
175
|
{ type: w },
|
|
173
176
|
{ type: h },
|
|
174
177
|
{ type: I }
|
|
175
|
-
]), v = e.useRef(
|
|
176
|
-
|
|
178
|
+
]), v = e.useRef(a), [_, u] = e.useState(a), [k, N] = e.useState(""), p = (m) => {
|
|
179
|
+
u(m), i && i(m);
|
|
177
180
|
}, g = b(c, (m) => m.type === I ? [
|
|
178
181
|
{
|
|
179
182
|
onSelect: (y) => p(y)
|
|
@@ -186,7 +189,7 @@ function O({
|
|
|
186
189
|
}
|
|
187
190
|
] : []
|
|
188
191
|
);
|
|
189
|
-
return
|
|
192
|
+
return a !== v.current && (u(a), v.current = a), /* @__PURE__ */ e.createElement(H.Provider, { value: { filterValue: k, activeItem: _ } }, /* @__PURE__ */ e.createElement("div", { className: A(q), ...o }, r, d && /* @__PURE__ */ e.createElement("div", { className: z }, /* @__PURE__ */ e.createElement("div", { className: M }, /* @__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(
|
|
190
193
|
"input",
|
|
191
194
|
{
|
|
192
195
|
type: "text",
|
|
@@ -283,7 +286,7 @@ const Q = {
|
|
|
283
286
|
},
|
|
284
287
|
icons: {
|
|
285
288
|
label: "Icons",
|
|
286
|
-
description: ({ Link:
|
|
289
|
+
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")),
|
|
287
290
|
examples: {
|
|
288
291
|
icons: {
|
|
289
292
|
react: S`
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s.SideNav={},s.React,s.core,s.utils))})(this,function(s,u,r,_){"use strict";function F(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=F(u);function G(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function T(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?T(Object(t),!0).forEach(function(i){G(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var V=(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},A=a=>n=>{var t=a.defaultClassName,i=j(j({},a.defaultVariants),n);for(var d in i){var o,v=(o=i[d])!==null&&o!==void 0?o:a.defaultVariants[d];if(v!=null){var l=v;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=a.variantClassNames[d][l];m&&(t+=" "+m)}}for(var[p,
|
|
1
|
+
(function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s.SideNav={},s.React,s.core,s.utils))})(this,function(s,u,r,_){"use strict";function F(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=F(u);function G(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function T(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?T(Object(t),!0).forEach(function(i){G(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var V=(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},A=a=>n=>{var t=a.defaultClassName,i=j(j({},a.defaultVariants),n);for(var d in i){var o,v=(o=i[d])!==null&&o!==void 0?o:a.defaultVariants[d];if(v!=null){var l=v;typeof l=="boolean"&&(l=l===!0?"true":"false");var m=a.variantClassNames[d][l];m&&(t+=" "+m)}}for(var[p,c]of a.compoundVariants)V(p,i,a.defaultVariants)&&(t+=" "+c);return t},D="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco0",M="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco1",q="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco2",U="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco3",R="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco4",L="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco5",z="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco6",P="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco7",B="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8",O=A({defaultClassName:"pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),W="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcof",H="pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog";function k({children:a,className:n,...t}){return e.createElement("div",{className:M,...t},e.createElement("div",{className:q},a))}r.Metadata.set(k,{name:"SideNavHeader",props:{}});const x=u.createContext({filterValue:"",activeItem:""});function N({children:a,className:n,onSelect:t,as:i,keyId:d,selectableAsParent:o,...v}){const l=i??"a",[m,p]=r.selectChildren(a,[{type:N}]),[c,h]=e.useState(!0),[y,w]=e.useState(!0),S=e.useContext(x),g=e.useRef(null);return e.useEffect(()=>{var b;w(((b=g.current)==null?void 0:b.innerText.toLowerCase().includes(S.filterValue.toLowerCase()))||!1),S.filterValue.length>0&&h(!0)},[S]),e.createElement(e.Fragment,null,m.length?e.createElement("ul",{className:B},e.createElement("li",{ref:g,className:O({selected:o&&S.activeItem===d,inFilter:o&&y}),onClick:()=>{t&&o?t(d):t&&!o&&h(!c)}},e.createElement(l,{className:H,...v},e.createElement("div",null,e.createElement(r.Icon,{className:W,icon:c?"chevron-down":"chevron-right",onClick:()=>{h(!c)}})),p)),c&&m):e.createElement("li",{ref:g,className:O({selected:S.activeItem===d,inFilter:y})},e.createElement(l,{className:H,onClick:()=>{t&&t(d)},...v},a)))}r.Metadata.set(N,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},onSelect:{type:"function"},selectableAsParent:{type:"boolean"},as:{type:"string"}}});function f({children:a,className:n,title:t,onSelect:i,...d}){const[o,v]=r.selectChildren(a,[{type:N}]),l=r.modChildren(o,m=>m.type===N?[{onSelect:i?p=>i(p):()=>{}}]:[]);return e.createElement("div",{className:L,...d},t&&e.createElement("div",{className:z},t),e.createElement("ul",{className:P},l),v)}r.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function E({children:a,className:n,activeNavItem:t,onChange:i,filterable:d,filterInputPlaceholder:o,...v}){const[l,m,p]=r.selectChildren(a,[{type:k},{type:f},{type:N}]),c=e.useRef(t),[h,y]=e.useState(t),[w,S]=e.useState(""),g=I=>{y(I),i&&i(I)},b=r.modChildren(p,I=>I.type===N?[{onSelect:C=>g(C)}]:[]),J=r.modChildren(m,I=>I.type===f?[{onSelect:C=>g(C)}]:[]);return t!==c.current&&(y(t),c.current=t),e.createElement(x.Provider,{value:{filterValue:w,activeItem:h}},e.createElement("div",{className:r.cl(D),...v},l,d&&e.createElement("div",{className:U},e.createElement("div",{className:R},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:o,onChange:I=>{S(I.target.value)}}))))),J,e.createElement("ul",{className:P},b)))}r.Metadata.set(E,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},onChange:{type:"(keyId: string) => void"},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const Y={"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:[E,k,f,N],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:_.code`
|
|
2
2
|
import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
|
|
3
3
|
import { Icon } from "@sps-woodland/core";
|
|
4
4
|
|
|
@@ -292,4 +292,4 @@
|
|
|
292
292
|
</div>
|
|
293
293
|
)
|
|
294
294
|
}
|
|
295
|
-
`}}}}}};s.MANIFEST=Y,s.SideNav=E,s.SideNavHeader=
|
|
295
|
+
`}}}}}};s.MANIFEST=Y,s.SideNav=E,s.SideNavHeader=k,s.SideNavItem=N,s.SideNavSection=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_side-
|
|
1
|
+
.pkg_sps-woodland_side-nav__version_8_29_2__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_29_2__hash_1j8bvco1{background-color:#fff;border-bottom:.0625rem solid oklch(86.84% .002 197.12);margin-bottom:0;padding:.5rem}.pkg_sps-woodland_side-nav__version_8_29_2__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_29_2__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco3{border-bottom:.0625rem solid oklch(86.84% .002 197.12);padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco5{border-top:.0625rem solid oklch(86.84% .002 197.12)}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_29_2__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_29_2__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #027db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_29_2__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_29_2__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_29_2__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_29_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_29_2__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.29.
|
|
4
|
+
"version": "8.29.2",
|
|
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",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/core": "8.29.
|
|
33
|
-
"@sps-woodland/tokens": "8.29.
|
|
32
|
+
"@sps-woodland/core": "8.29.2",
|
|
33
|
+
"@sps-woodland/tokens": "8.29.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
39
39
|
"react": "^16.9.0",
|
|
40
40
|
"react-dom": "^16.9.0",
|
|
41
|
-
"@sps-woodland/core": "8.29.
|
|
42
|
-
"@sps-woodland/tokens": "8.29.
|
|
41
|
+
"@sps-woodland/core": "8.29.2",
|
|
42
|
+
"@sps-woodland/tokens": "8.29.2"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|