@sps-woodland/side-nav 8.34.13 → 8.34.15

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as e from "react";
2
2
  import { createContext as G } from "react";
3
- import { Metadata as f, selectChildren as E, Icon as V, modChildren as b, cl as A } from "@sps-woodland/core";
3
+ import { Metadata as h, selectChildren as b, Icon as V, modChildren as y, cl as A } from "@sps-woodland/core";
4
4
  import { code as S } from "@spscommerce/utils";
5
5
  function U(t, n, a) {
6
6
  return n in t ? Object.defineProperty(t, n, {
@@ -10,7 +10,7 @@ function U(t, n, a) {
10
10
  writable: !0
11
11
  }) : t[n] = a, t;
12
12
  }
13
- function C(t, n) {
13
+ function w(t, n) {
14
14
  var a = Object.keys(t);
15
15
  if (Object.getOwnPropertySymbols) {
16
16
  var i = Object.getOwnPropertySymbols(t);
@@ -20,12 +20,12 @@ function C(t, n) {
20
20
  }
21
21
  return a;
22
22
  }
23
- function T(t) {
23
+ function C(t) {
24
24
  for (var n = 1; n < arguments.length; n++) {
25
25
  var a = arguments[n] != null ? arguments[n] : {};
26
- n % 2 ? C(Object(a), !0).forEach(function(i) {
26
+ n % 2 ? w(Object(a), !0).forEach(function(i) {
27
27
  U(t, i, a[i]);
28
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : C(Object(a)).forEach(function(i) {
28
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : w(Object(a)).forEach(function(i) {
29
29
  Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(a, i));
30
30
  });
31
31
  }
@@ -39,7 +39,7 @@ var D = (t, n, a) => {
39
39
  }
40
40
  return !0;
41
41
  }, R = (t) => (n) => {
42
- var a = t.defaultClassName, i = T(T({}, t.defaultVariants), n);
42
+ var a = t.defaultClassName, i = C(C({}, t.defaultVariants), n);
43
43
  for (var d in i) {
44
44
  var s, o = (s = i[d]) !== null && s !== void 0 ? s : t.defaultVariants[d];
45
45
  if (o != null) {
@@ -55,19 +55,19 @@ var D = (t, n, a) => {
55
55
  for (var [c, v] of t.compoundVariants)
56
56
  D(c, i, t.defaultVariants) && (a += " " + v);
57
57
  return a;
58
- }, q = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco0", L = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco1", B = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco2", z = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco3", M = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco4", W = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco5", Y = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco6", x = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco7", J = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8", j = R({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), K = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcof", P = "pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog";
59
- function w({
58
+ }, q = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco0", L = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco1", B = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco2", z = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco3", M = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco4", W = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco5", Y = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco6", P = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco7", J = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8", T = R({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), K = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcof", j = "pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog";
59
+ function E({
60
60
  children: t,
61
61
  className: n,
62
62
  ...a
63
63
  }) {
64
64
  return /* @__PURE__ */ e.createElement("div", { className: L, ...a }, /* @__PURE__ */ e.createElement("div", { className: B }, t));
65
65
  }
66
- f.set(w, {
66
+ h.set(E, {
67
67
  name: "SideNavHeader",
68
68
  props: {}
69
69
  });
70
- const H = G({
70
+ const x = G({
71
71
  filterValue: "",
72
72
  activeItem: ""
73
73
  });
@@ -80,15 +80,14 @@ function I({
80
80
  selectableAsParent: s,
81
81
  ...o
82
82
  }) {
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);
83
+ const r = i ?? "a", [l, c] = b(t, [{ type: I }]), [v, _] = e.useState(!0), [u, f] = e.useState(!0), N = e.useContext(x), p = e.useRef(null);
84
84
  return e.useEffect(() => {
85
- var g;
86
- k(((g = p.current) == null ? void 0 : g.innerText.toLowerCase().includes(N.filterValue.toLowerCase())) || !1), N.filterValue.length > 0 && _(!0);
85
+ f(p.current?.innerText.toLowerCase().includes(N.filterValue.toLowerCase()) || !1), N.filterValue.length > 0 && _(!0);
87
86
  }, [N]), /* @__PURE__ */ e.createElement(e.Fragment, null, l.length ? /* @__PURE__ */ e.createElement("ul", { className: J }, /* @__PURE__ */ e.createElement(
88
87
  "li",
89
88
  {
90
89
  ref: p,
91
- className: j({
90
+ className: T({
92
91
  selected: s && N.activeItem === d,
93
92
  inFilter: s && u
94
93
  }),
@@ -96,7 +95,7 @@ function I({
96
95
  a && s ? a(d) : a && !s && _(!v);
97
96
  }
98
97
  },
99
- /* @__PURE__ */ e.createElement(r, { className: P, ...o }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
98
+ /* @__PURE__ */ e.createElement(r, { className: j, ...o }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
100
99
  V,
101
100
  {
102
101
  className: K,
@@ -110,7 +109,7 @@ function I({
110
109
  "li",
111
110
  {
112
111
  ref: p,
113
- className: j({
112
+ className: T({
114
113
  selected: N.activeItem === d,
115
114
  inFilter: u
116
115
  })
@@ -118,7 +117,7 @@ function I({
118
117
  /* @__PURE__ */ e.createElement(
119
118
  r,
120
119
  {
121
- className: P,
120
+ className: j,
122
121
  onClick: () => {
123
122
  a && a(d);
124
123
  },
@@ -128,7 +127,7 @@ function I({
128
127
  )
129
128
  ));
130
129
  }
131
- f.set(I, {
130
+ h.set(I, {
132
131
  name: "SideNavItem",
133
132
  props: {
134
133
  keyId: { type: "string", required: !0 },
@@ -137,28 +136,28 @@ f.set(I, {
137
136
  as: { type: "string" }
138
137
  }
139
138
  });
140
- function h({
139
+ function g({
141
140
  children: t,
142
141
  className: n,
143
142
  title: a,
144
143
  onSelect: i,
145
144
  ...d
146
145
  }) {
147
- const [s, o] = E(t, [{ type: I }]), r = b(s, (l) => l.type === I ? [
146
+ const [s, o] = b(t, [{ type: I }]), r = y(s, (l) => l.type === I ? [
148
147
  {
149
148
  onSelect: i ? (c) => i(c) : () => {
150
149
  }
151
150
  }
152
151
  ] : []);
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);
152
+ return /* @__PURE__ */ e.createElement("div", { className: W, ...d }, a && /* @__PURE__ */ e.createElement("div", { className: Y }, a), /* @__PURE__ */ e.createElement("ul", { className: P }, r), o);
154
153
  }
155
- f.set(h, {
154
+ h.set(g, {
156
155
  name: "SideNavSection",
157
156
  props: {
158
157
  title: { type: "string" }
159
158
  }
160
159
  });
161
- function O({
160
+ function H({
162
161
  children: t,
163
162
  className: n,
164
163
  activeNavItem: a,
@@ -171,25 +170,25 @@ function O({
171
170
  r,
172
171
  l,
173
172
  c
174
- ] = E(t, [
175
- { type: w },
176
- { type: h },
173
+ ] = b(t, [
174
+ { type: E },
175
+ { type: g },
177
176
  { type: I }
178
- ]), v = e.useRef(a), [_, u] = e.useState(a), [k, N] = e.useState(""), p = (m) => {
177
+ ]), v = e.useRef(a), [_, u] = e.useState(a), [f, N] = e.useState(""), p = (m) => {
179
178
  u(m), i && i(m);
180
- }, g = b(c, (m) => m.type === I ? [
179
+ }, O = y(c, (m) => m.type === I ? [
181
180
  {
182
- onSelect: (y) => p(y)
181
+ onSelect: (k) => p(k)
183
182
  }
184
- ] : []), F = b(
183
+ ] : []), F = y(
185
184
  l,
186
- (m) => m.type === h ? [
185
+ (m) => m.type === g ? [
187
186
  {
188
- onSelect: (y) => p(y)
187
+ onSelect: (k) => p(k)
189
188
  }
190
189
  ] : []
191
190
  );
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(
191
+ return a !== v.current && (u(a), v.current = a), /* @__PURE__ */ e.createElement(x.Provider, { value: { filterValue: f, 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(
193
192
  "input",
194
193
  {
195
194
  type: "text",
@@ -199,9 +198,9 @@ function O({
199
198
  N(m.target.value);
200
199
  }
201
200
  }
202
- ))))), F, /* @__PURE__ */ e.createElement("ul", { className: x }, g)));
201
+ ))))), F, /* @__PURE__ */ e.createElement("ul", { className: P }, O)));
203
202
  }
204
- f.set(O, {
203
+ h.set(H, {
205
204
  name: "SideNav",
206
205
  props: {
207
206
  activeNavItem: { type: "string", required: !0 },
@@ -213,9 +212,9 @@ f.set(O, {
213
212
  const Q = {
214
213
  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."),
215
214
  components: [
216
- O,
217
- w,
218
- h,
215
+ H,
216
+ E,
217
+ g,
219
218
  I
220
219
  ],
221
220
  examples: {
@@ -577,8 +576,8 @@ const Q = {
577
576
  };
578
577
  export {
579
578
  ee as MANIFEST,
580
- O as SideNav,
581
- w as SideNavHeader,
579
+ H as SideNav,
580
+ E as SideNavHeader,
582
581
  I as SideNavItem,
583
- h as SideNavSection
582
+ g as SideNavSection
584
583
  };
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,c]of a.compoundVariants)V(p,i,a.defaultVariants)&&(t+=" "+c);return t},D="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco0",M="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco1",q="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco2",U="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco3",R="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco4",L="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco5",z="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco6",P="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco7",B="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8",O=A({defaultClassName:"pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),W="pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcof",H="pkg_sps-woodland_side-nav__version_8_34_13__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`
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 x(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=x(u);function F(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function C(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 T(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?C(Object(t),!0).forEach(function(i){F(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var G=(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},V=a=>n=>{var t=a.defaultClassName,i=T(T({},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)G(p,i,a.defaultVariants)&&(t+=" "+c);return t},A="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco0",D="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco1",M="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco2",q="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco3",U="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco4",R="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco5",L="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco6",j="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco7",z="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8",P=V({defaultClassName:"pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),B="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcof",O="pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog";function k({children:a,className:n,...t}){return e.createElement("div",{className:D,...t},e.createElement("div",{className:M},a))}r.Metadata.set(k,{name:"SideNavHeader",props:{}});const H=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,E]=e.useState(!0),S=e.useContext(H),g=e.useRef(null);return e.useEffect(()=>{E(g.current?.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:z},e.createElement("li",{ref:g,className:P({selected:o&&S.activeItem===d,inFilter:o&&y}),onClick:()=>{t&&o?t(d):t&&!o&&h(!c)}},e.createElement(l,{className:O,...v},e.createElement("div",null,e.createElement(r.Icon,{className:B,icon:c?"chevron-down":"chevron-right",onClick:()=>{h(!c)}})),p)),c&&m):e.createElement("li",{ref:g,className:P({selected:S.activeItem===d,inFilter:y})},e.createElement(l,{className:O,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:R,...d},t&&e.createElement("div",{className:L},t),e.createElement("ul",{className:j},l),v)}r.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function b({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),[E,S]=e.useState(""),g=I=>{y(I),i&&i(I)},Y=r.modChildren(p,I=>I.type===N?[{onSelect:w=>g(w)}]:[]),J=r.modChildren(m,I=>I.type===f?[{onSelect:w=>g(w)}]:[]);return t!==c.current&&(y(t),c.current=t),e.createElement(H.Provider,{value:{filterValue:E,activeItem:h}},e.createElement("div",{className:r.cl(A),...v},l,d&&e.createElement("div",{className:q},e.createElement("div",{className:U},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:j},Y)))}r.Metadata.set(b,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},onChange:{type:"(keyId: string) => void"},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const W={"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:[b,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=k,s.SideNavItem=N,s.SideNavSection=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
295
+ `}}}}}};s.MANIFEST=W,s.SideNav=b,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-nav__version_8_34_13__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_34_13__hash_1j8bvco1{background-color:#fff;border-bottom:.0625rem solid #d2d4d4ff;margin-bottom:0;padding:.5rem}.pkg_sps-woodland_side-nav__version_8_34_13__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_34_13__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco3{border-bottom:.0625rem solid #d2d4d4ff;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco5{border-top:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_34_13__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_34_13__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #007db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_34_13__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_34_13__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_34_13__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_13__hash_1j8bvcog{padding-left:undefined}
1
+ .pkg_sps-woodland_side-nav__version_8_34_15__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_34_15__hash_1j8bvco1{background-color:#fff;border-bottom:.0625rem solid #d2d4d4ff;margin-bottom:0;padding:.5rem}.pkg_sps-woodland_side-nav__version_8_34_15__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_34_15__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco3{border-bottom:.0625rem solid #d2d4d4ff;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco5{border-top:.0625rem solid #d2d4d4ff}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_34_15__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_34_15__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #007db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_34_15__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_34_15__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_34_15__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_34_15__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_34_15__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.34.13",
4
+ "version": "8.34.15",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
@@ -12,10 +12,10 @@
12
12
  "types": "./lib/index.d.ts",
13
13
  "exports": {
14
14
  ".": {
15
+ "types": "./lib/index.d.ts",
15
16
  "require": "./lib/index.umd.cjs",
16
17
  "import": "./lib/index.js",
17
- "default": "./lib/index.js",
18
- "types": "./lib/index.d.ts"
18
+ "default": "./lib/index.js"
19
19
  },
20
20
  "./lib/style.css": {
21
21
  "import": "./lib/style.css",
@@ -26,20 +26,20 @@
26
26
  "access": "public"
27
27
  },
28
28
  "peerDependencies": {
29
- "@spscommerce/utils": "^7.0.0",
29
+ "@spscommerce/utils": "^7.0.0 || ^8.0.0",
30
30
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
31
31
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
32
- "@sps-woodland/core": "8.34.13",
33
- "@sps-woodland/tokens": "8.34.13"
32
+ "@sps-woodland/core": "8.34.15",
33
+ "@sps-woodland/tokens": "8.34.15"
34
34
  },
35
35
  "devDependencies": {
36
- "@spscommerce/utils": "^7.0.0",
37
- "@vanilla-extract/css": "^1.9.3",
36
+ "@spscommerce/utils": "^8.1.1",
37
+ "@vanilla-extract/css": "^1.17.4",
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.34.13",
42
- "@sps-woodland/tokens": "8.34.13"
41
+ "@sps-woodland/core": "8.34.15",
42
+ "@sps-woodland/tokens": "8.34.15"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "pnpm run build:js && pnpm run build:types",
package/vite.config.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import path from "path";
1
+ import path from "node:path";
2
2
  import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
3
  import { defineConfig } from "vite";
4
4
  import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";