@sps-woodland/side-nav 8.17.1 → 8.17.2

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),r=require("@sps-woodland/core"),u=require("@spscommerce/utils");function _(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=_(w);function H(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){H(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 F=(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,c=(o=i[d])!==null&&o!==void 0?o:a.defaultVariants[d];if(c!=null){var s=c;typeof s=="boolean"&&(s=s===!0?"true":"false");var m=a.variantClassNames[d][s];m&&(t+=" "+m)}}for(var[l,S]of a.compoundVariants)F(l,i,a.defaultVariants)&&(t+=" "+S);return t},O="_1j8bvco7",A="_1j8bvco0",G="_1j8bvco8",D="_1j8bvcof",M="_1j8bvcoe",q="_1j8bvco3",U="_1j8bvco4",R="_1j8bvco1",z=V({defaultClassName:"_1j8bvco9",variantClassNames:{selected:{true:"_1j8bvcoa",false:"_1j8bvcob"},inFilter:{true:"_1j8bvcoc",false:"_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),j="_1j8bvcog",B="_1j8bvco5",L="_1j8bvco6",K="_1j8bvco2";function y({children:a,className:n,...t}){return e.createElement("div",{className:R,...t},e.createElement("div",{className:K},a))}r.Metadata.set(y,{name:"SideNavHeader",props:{}});const P=w.createContext({filterValue:"",activeItem:""});function v({children:a,className:n,onSelect:t,as:i,keyId:d,...o}){const c=i??"a",[s,m]=r.selectChildren(a,[{type:v}]),[l,S]=e.useState(!0),[g,b]=e.useState(!0),p=e.useContext(P),I=e.useRef(null);return e.useEffect(()=>{var h;b(((h=I.current)==null?void 0:h.innerText.includes(p.filterValue))||!1)},[p]),e.createElement(e.Fragment,null,s.length?e.createElement("ul",{className:G},e.createElement("li",{ref:I,className:M,onClick:()=>S(!l)},e.createElement(c,{className:j,...o},e.createElement("div",null,e.createElement(r.Icon,{className:D,icon:l?"chevron-down":"chevron-up"})),m)),l&&s):e.createElement("li",{ref:I,className:z({selected:p.activeItem===d,inFilter:g})},e.createElement(c,{className:j,onClick:()=>{t(d)},...o},a)))}r.Metadata.set(v,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},as:{type:"string"}}});function f({children:a,className:n,title:t,onSelect:i,...d}){const[o,c]=r.selectChildren(a,[{type:v}]),s=r.modChildren(o,m=>m.type===v?[{onSelect:i?l=>i(l):()=>{}}]:[]);return e.createElement("div",{className:B,...d},t&&e.createElement("div",{className:L},t),e.createElement("ul",{className:O},s),c)}r.Metadata.set(f,{name:"SideNavSection",props:{title:{type:"string"}}});function E({children:a,className:n,activeNavItem:t,filterable:i,filterInputPlaceholder:d,...o}){const[c,s,m]=r.selectChildren(a,[{type:y},{type:f},{type:v}]),l=e.useRef(t),[S,g]=e.useState(t),[b,p]=e.useState(""),I=N=>{g(N)},h=r.modChildren(m,N=>N.type===v?[{onSelect:k=>I(k)}]:[]),x=r.modChildren(s,N=>N.type===f?[{onSelect:k=>I(k)}]:[]);return t!==l.current&&(g(t),l.current=t),e.createElement(P.Provider,{value:{filterValue:b,activeItem:S}},e.createElement("div",{className:r.cl(A),...o},c,i&&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:d,onChange:N=>{p(N.target.value)}}))))),x,e.createElement("ul",{className:O},h)))}r.Metadata.set(E,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const W={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,y,f,v],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:u.code`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),d=require("@sps-woodland/core"),_=require("@spscommerce/utils");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(T);function H(a,n,t){return n in a?Object.defineProperty(a,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[n]=t,a}function E(a,n){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(a);n&&(i=i.filter(function(s){return Object.getOwnPropertyDescriptor(a,s).enumerable})),t.push.apply(t,i)}return t}function w(a){for(var n=1;n<arguments.length;n++){var t=arguments[n]!=null?arguments[n]:{};n%2?E(Object(t),!0).forEach(function(i){H(a,i,t[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach(function(i){Object.defineProperty(a,i,Object.getOwnPropertyDescriptor(t,i))})}return a}var F=(a,n,t)=>{for(var i of Object.keys(a)){var s;if(a[i]!==((s=n[i])!==null&&s!==void 0?s:t[i]))return!1}return!0},V=a=>n=>{var t=a.defaultClassName,i=w(w({},a.defaultVariants),n);for(var s in i){var o,v=(o=i[s])!==null&&o!==void 0?o:a.defaultVariants[s];if(v!=null){var r=v;typeof r=="boolean"&&(r=r===!0?"true":"false");var c=a.variantClassNames[s][r];c&&(t+=" "+c)}}for(var[l,I]of a.compoundVariants)F(l,i,a.defaultVariants)&&(t+=" "+I);return t},j="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco7",A="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco0",G="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8",D="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcof",M="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe",q="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco3",U="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco4",R="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco1",z=V({defaultClassName:"pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9",variantClassNames:{selected:{true:"pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoa",false:"pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcob"},inFilter:{true:"pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoc",false:"pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcod"}},defaultVariants:{selected:!1,inFilter:!0},compoundVariants:[]}),C="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog",B="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco5",L="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco6",K="pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco2";function h({children:a,className:n,...t}){return e.createElement("div",{className:R,...t},e.createElement("div",{className:K},a))}d.Metadata.set(h,{name:"SideNavHeader",props:{}});const O=T.createContext({filterValue:"",activeItem:""});function m({children:a,className:n,onSelect:t,as:i,keyId:s,...o}){const v=i??"a",[r,c]=d.selectChildren(a,[{type:m}]),[l,I]=e.useState(!0),[g,k]=e.useState(!0),S=e.useContext(O),p=e.useRef(null);return e.useEffect(()=>{var f;k(((f=p.current)==null?void 0:f.innerText.includes(S.filterValue))||!1)},[S]),e.createElement(e.Fragment,null,r.length?e.createElement("ul",{className:G},e.createElement("li",{ref:p,className:M,onClick:()=>I(!l)},e.createElement(v,{className:C,...o},e.createElement("div",null,e.createElement(d.Icon,{className:D,icon:l?"chevron-down":"chevron-up"})),c)),l&&r):e.createElement("li",{ref:p,className:z({selected:S.activeItem===s,inFilter:g})},e.createElement(v,{className:C,onClick:()=>{t(s)},...o},a)))}d.Metadata.set(m,{name:"SideNavItem",props:{keyId:{type:"string",required:!0},as:{type:"string"}}});function u({children:a,className:n,title:t,onSelect:i,...s}){const[o,v]=d.selectChildren(a,[{type:m}]),r=d.modChildren(o,c=>c.type===m?[{onSelect:i?l=>i(l):()=>{}}]:[]);return e.createElement("div",{className:B,...s},t&&e.createElement("div",{className:L},t),e.createElement("ul",{className:j},r),v)}d.Metadata.set(u,{name:"SideNavSection",props:{title:{type:"string"}}});function b({children:a,className:n,activeNavItem:t,filterable:i,filterInputPlaceholder:s,...o}){const[v,r,c]=d.selectChildren(a,[{type:h},{type:u},{type:m}]),l=e.useRef(t),[I,g]=e.useState(t),[k,S]=e.useState(""),p=N=>{g(N)},f=d.modChildren(c,N=>N.type===m?[{onSelect:y=>p(y)}]:[]),P=d.modChildren(r,N=>N.type===u?[{onSelect:y=>p(y)}]:[]);return t!==l.current&&(g(t),l.current=t),e.createElement(O.Provider,{value:{filterValue:k,activeItem:I}},e.createElement("div",{className:d.cl(A),...o},v,i&&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:s,onChange:N=>{S(N.target.value)}}))))),P,e.createElement("ul",{className:j},f)))}d.Metadata.set(b,{name:"SideNav",props:{activeNavItem:{type:"string",required:!0},filterable:{type:"boolean"},filterInputPlaceholder:{type:"string"}}});const W={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,h,u,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:_.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -50,7 +50,7 @@
                 </div>
               )
             }
-          `}}},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:u.code`
+          `}}},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:_.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -94,7 +94,7 @@
                 </div>
               )
             }
-          `}}},nesting:{label:"Nesting",description:"Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",examples:{icons:{react:u.code`
+          `}}},nesting:{label:"Nesting",description:"Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",examples:{icons:{react:_.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -144,7 +144,7 @@
                 </div>
               )
             }
-          `}}},sections:{label:"Sections",description:"Use Sections to break up content into different categories. Sections utilize Subtitles.",examples:{icons:{react:u.code`
+          `}}},sections:{label:"Sections",description:"Use Sections to break up content into different categories. Sections utilize Subtitles.",examples:{icons:{react:_.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -193,7 +193,7 @@
                 </div>
               )
             }
-          `}}},tags:{label:"Tags",description:"Use Tags to indicate a number of additional detail related to the navigation item.",examples:{icons:{react:u.code`
+          `}}},tags:{label:"Tags",description:"Use Tags to indicate a number of additional detail related to the navigation item.",examples:{icons:{react:_.code`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Tag } from "@sps-woodland/tags";
             import { Icon } from "@sps-woodland/core";
@@ -238,4 +238,4 @@
                 </div>
               )
             }
-          `}}}}},J={"Side Navigation":W};exports.MANIFEST=J;exports.SideNav=E;exports.SideNavHeader=y;exports.SideNavItem=v;exports.SideNavSection=f;
+          `}}}}},J={"Side Navigation":W};exports.MANIFEST=J;exports.SideNav=b;exports.SideNavHeader=h;exports.SideNavItem=m;exports.SideNavSection=u;

package/lib/index.es.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createContext as H } from "react";
-import { Metadata as h, selectChildren as E, Icon as F, modChildren as b, cl as V } from "@sps-woodland/core";
-import { code as p } from "@spscommerce/utils";
+import { Metadata as f, selectChildren as b, Icon as F, modChildren as y, cl as V } from "@sps-woodland/core";
+import { code as S } from "@spscommerce/utils";
 function G(a, n, t) {
   return n in a ? Object.defineProperty(a, n, {
     value: t,
@@ -10,22 +10,22 @@ function G(a, n, t) {
     writable: !0
   }) : a[n] = t, a;
 }
-function T(a, n) {
+function w(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;
+    n && (i = i.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(a, s).enumerable;
     })), t.push.apply(t, i);
   }
   return t;
 }
-function w(a) {
+function C(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) {
+    n % 2 ? w(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.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(t)) : w(Object(t)).forEach(function(i) {
       Object.defineProperty(a, i, Object.getOwnPropertyDescriptor(t, i));
     });
   }
@@ -33,41 +33,41 @@ function w(a) {
 }
 var A = (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]))
+    var s;
+    if (a[i] !== ((s = n[i]) !== null && s !== void 0 ? s : t[i]))
       return !1;
   }
   return !0;
 }, U = (a) => (n) => {
-  var t = a.defaultClassName, i = w(w({}, a.defaultVariants), n);
-  for (var d in i) {
-    var s, l = (s = i[d]) !== null && s !== void 0 ? s : a.defaultVariants[d];
+  var t = a.defaultClassName, i = C(C({}, a.defaultVariants), n);
+  for (var s in i) {
+    var r, l = (r = i[s]) !== null && r !== void 0 ? r : a.defaultVariants[s];
     if (l != null) {
-      var r = l;
-      typeof r == "boolean" && (r = r === !0 ? "true" : "false");
-      var m = (
+      var d = l;
+      typeof d == "boolean" && (d = d === !0 ? "true" : "false");
+      var v = (
         // @ts-expect-error
-        a.variantClassNames[d][r]
+        a.variantClassNames[s][d]
       );
-      m && (t += " " + m);
+      v && (t += " " + v);
     }
   }
-  for (var [o, I] of a.compoundVariants)
-    A(o, i, a.defaultVariants) && (t += " " + I);
+  for (var [o, p] of a.compoundVariants)
+    A(o, i, a.defaultVariants) && (t += " " + p);
   return t;
-}, x = "_1j8bvco7", D = "_1j8bvco0", R = "_1j8bvco8", q = "_1j8bvcof", B = "_1j8bvcoe", L = "_1j8bvco3", z = "_1j8bvco4", M = "_1j8bvco1", K = U({ defaultClassName: "_1j8bvco9", variantClassNames: { selected: { true: "_1j8bvcoa", false: "_1j8bvcob" }, inFilter: { true: "_1j8bvcoc", false: "_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), j = "_1j8bvcog", W = "_1j8bvco5", J = "_1j8bvco6", Q = "_1j8bvco2";
-function C({
+}, j = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco7", D = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco0", R = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8", q = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcof", B = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe", L = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco3", z = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco4", M = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco1", K = U({ defaultClassName: "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9", variantClassNames: { selected: { true: "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoa", false: "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcob" }, inFilter: { true: "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoc", false: "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcod" } }, defaultVariants: { selected: !1, inFilter: !0 }, compoundVariants: [] }), T = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog", W = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco5", J = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco6", Q = "pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco2";
+function E({
   children: a,
   className: n,
   ...t
 }) {
   return /* @__PURE__ */ e.createElement("div", { className: M, ...t }, /* @__PURE__ */ e.createElement("div", { className: Q }, a));
 }
-h.set(C, {
+f.set(E, {
   name: "SideNavHeader",
   props: {}
 });
-const P = H({
+const x = H({
   filterValue: "",
   activeItem: ""
 });
@@ -76,50 +76,50 @@ function c({
   className: n,
   onSelect: t,
   as: i,
-  keyId: d,
-  ...s
+  keyId: s,
+  ...r
 }) {
-  const l = i ?? "a", [r, m] = E(a, [{ type: c }]), [o, I] = e.useState(!0), [u, y] = e.useState(!0), S = e.useContext(P), N = e.useRef(null);
+  const l = i ?? "a", [d, v] = b(a, [{ type: c }]), [o, p] = e.useState(!0), [_, h] = e.useState(!0), I = e.useContext(x), N = e.useRef(null);
   return e.useEffect(() => {
-    var f;
-    y(((f = N.current) == null ? void 0 : f.innerText.includes(S.filterValue)) || !1);
-  }, [S]), /* @__PURE__ */ e.createElement(e.Fragment, null, r.length ? /* @__PURE__ */ e.createElement("ul", { className: R }, /* @__PURE__ */ e.createElement(
+    var u;
+    h(((u = N.current) == null ? void 0 : u.innerText.includes(I.filterValue)) || !1);
+  }, [I]), /* @__PURE__ */ e.createElement(e.Fragment, null, d.length ? /* @__PURE__ */ e.createElement("ul", { className: R }, /* @__PURE__ */ e.createElement(
     "li",
     {
       ref: N,
       className: B,
-      onClick: () => I(!o)
+      onClick: () => p(!o)
     },
-    /* @__PURE__ */ e.createElement(l, { className: j, ...s }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement(l, { className: T, ...r }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
       F,
       {
         className: q,
         icon: o ? "chevron-down" : "chevron-up"
       }
-    )), m)
-  ), o && r) : /* @__PURE__ */ e.createElement(
+    )), v)
+  ), o && d) : /* @__PURE__ */ e.createElement(
     "li",
     {
       ref: N,
       className: K({
-        selected: S.activeItem === d,
-        inFilter: u
+        selected: I.activeItem === s,
+        inFilter: _
       })
     },
     /* @__PURE__ */ e.createElement(
       l,
       {
-        className: j,
+        className: T,
         onClick: () => {
-          t(d);
+          t(s);
         },
-        ...s
+        ...r
       },
       a
     )
   ));
 }
-h.set(c, {
+f.set(c, {
   name: "SideNavItem",
   props: {
     keyId: { type: "string", required: !0 },
@@ -131,65 +131,65 @@ function g({
   className: n,
   title: t,
   onSelect: i,
-  ...d
+  ...s
 }) {
-  const [s, l] = E(a, [{ type: c }]), r = b(s, (m) => m.type === c ? [
+  const [r, l] = b(a, [{ type: c }]), d = y(r, (v) => v.type === c ? [
     {
       onSelect: i ? (o) => i(o) : () => {
       }
     }
   ] : []);
-  return /* @__PURE__ */ e.createElement("div", { className: W, ...d }, t && /* @__PURE__ */ e.createElement("div", { className: J }, t), /* @__PURE__ */ e.createElement("ul", { className: x }, r), l);
+  return /* @__PURE__ */ e.createElement("div", { className: W, ...s }, t && /* @__PURE__ */ e.createElement("div", { className: J }, t), /* @__PURE__ */ e.createElement("ul", { className: j }, d), l);
 }
-h.set(g, {
+f.set(g, {
   name: "SideNavSection",
   props: {
     title: { type: "string" }
   }
 });
-function O({
+function P({
   children: a,
   className: n,
   activeNavItem: t,
   filterable: i,
-  filterInputPlaceholder: d,
-  ...s
+  filterInputPlaceholder: s,
+  ...r
 }) {
   const [
     l,
-    r,
-    m
-  ] = E(a, [
-    { type: C },
+    d,
+    v
+  ] = b(a, [
+    { type: E },
     { type: g },
     { type: c }
-  ]), o = e.useRef(t), [I, u] = e.useState(t), [y, S] = e.useState(""), N = (v) => {
-    u(v);
-  }, f = b(m, (v) => v.type === c ? [
+  ]), o = e.useRef(t), [p, _] = e.useState(t), [h, I] = e.useState(""), N = (m) => {
+    _(m);
+  }, u = y(v, (m) => m.type === c ? [
     {
       onSelect: (k) => N(k)
     }
-  ] : []), _ = b(
-    r,
-    (v) => v.type === g ? [
+  ] : []), O = y(
+    d,
+    (m) => m.type === g ? [
       {
         onSelect: (k) => N(k)
       }
     ] : []
   );
-  return t !== o.current && (u(t), o.current = t), /* @__PURE__ */ e.createElement(P.Provider, { value: { filterValue: y, activeItem: I } }, /* @__PURE__ */ e.createElement("div", { className: V(D), ...s }, l, i && /* @__PURE__ */ e.createElement("div", { className: L }, /* @__PURE__ */ e.createElement("div", { className: z }, /* @__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(
+  return t !== o.current && (_(t), o.current = t), /* @__PURE__ */ e.createElement(x.Provider, { value: { filterValue: h, activeItem: p } }, /* @__PURE__ */ e.createElement("div", { className: V(D), ...r }, l, i && /* @__PURE__ */ e.createElement("div", { className: L }, /* @__PURE__ */ e.createElement("div", { className: z }, /* @__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(
     "input",
     {
       type: "text",
       className: "sps-text-input__input",
-      placeholder: d,
-      onChange: (v) => {
-        S(v.target.value);
+      placeholder: s,
+      onChange: (m) => {
+        I(m.target.value);
       }
     }
-  ))))), _, /* @__PURE__ */ e.createElement("ul", { className: x }, f)));
+  ))))), O, /* @__PURE__ */ e.createElement("ul", { className: j }, u)));
 }
-h.set(O, {
+f.set(P, {
   name: "SideNav",
   props: {
     activeNavItem: { type: "string", required: !0 },
@@ -200,8 +200,8 @@ h.set(O, {
 const X = {
   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."),
   components: [
-    O,
-    C,
+    P,
+    E,
     g,
     c
   ],
@@ -215,7 +215,7 @@ const X = {
       description: "Use Filters when the Side Navigation benefits from filtering, usually when it contains a long list of navigation items.",
       examples: {
         filter: {
-          react: p`
+          react: S`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -276,7 +276,7 @@ const X = {
       description: ({ Link: a }) => /* @__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(a, { to: "/style-and-layout/icons" }, "View All Icons")),
       examples: {
         icons: {
-          react: p`
+          react: S`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -329,7 +329,7 @@ const X = {
       description: "Use Nesting to organize related navigation items. Avoid nesting beyond grandchildren.",
       examples: {
         icons: {
-          react: p`
+          react: S`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -388,7 +388,7 @@ const X = {
       description: "Use Sections to break up content into different categories. Sections utilize Subtitles.",
       examples: {
         icons: {
-          react: p`
+          react: S`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Icon } from "@sps-woodland/core";
 
@@ -446,7 +446,7 @@ const X = {
       description: "Use Tags to indicate a number of additional detail related to the navigation item.",
       examples: {
         icons: {
-          react: p`
+          react: S`
             import { SideNav, SideNavHeader, SideNavItem } from "@sps-woodland/side-nav";
             import { Tag } from "@sps-woodland/tags";
             import { Icon } from "@sps-woodland/core";
@@ -501,8 +501,8 @@ const X = {
 };
 export {
   ee as MANIFEST,
-  O as SideNav,
-  C as SideNavHeader,
+  P as SideNav,
+  E as SideNavHeader,
   c as SideNavItem,
   g as SideNavSection
 };

package/lib/style.css

@@ -1 +1 @@
-._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}._1j8bvco1{background-color:#fff;border-bottom:.0625rem solid oklch(86.84% .002 197.12);margin-bottom:0;padding:.5rem}._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}._1j8bvco2>i{font-size:.875rem;margin-right:.25rem}._1j8bvco3{border-bottom:.0625rem solid oklch(86.84% .002 197.12);padding:.5rem 0}._1j8bvco4{margin:6px 21px}._1j8bvco5{margin:0;padding:.5rem 0}._1j8bvco5+._1j8bvco5{border-top:.0625rem solid oklch(86.84% .002 197.12)}._1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}._1j8bvco7{list-style:none;margin-top:0;margin-bottom:0;padding:0;font-size:.875rem;line-height:1.25rem}._1j8bvco8{padding-left:0}._1j8bvco9{display:block;width:100%}._1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #027db8;color:#1f282c;font-weight:700}._1j8bvcod{display:none}._1j8bvcoe{display:block;width:100%}._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}._1j8bvcog{color:#1f282c;cursor:pointer;display:flex;font-size:.875rem;line-height:1.25rem;padding:.5rem 1rem .5rem 1.25rem;text-decoration:none}._1j8bvcog:hover{background-color:#f3f4f4}._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco9>._1j8bvcog{padding-left:undefined}._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:2.125rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:3.875rem}._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvco8>._1j8bvcoe>._1j8bvcog{padding-left:undefined}
+.pkg_sps-woodland_side-nav__version_8_17_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_17_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_17_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_17_2__hash_1j8bvco2>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco3{border-bottom:.0625rem solid oklch(86.84% .002 197.12);padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco4{margin:6px 21px}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco5{margin:0;padding:.5rem 0}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco5+.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco5{border-top:.0625rem solid oklch(86.84% .002 197.12)}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco6{color:#717779;font-size:1rem;font-weight:400;margin:.25rem 0 .5rem 1rem}.pkg_sps-woodland_side-nav__version_8_17_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_17_2__hash_1j8bvco8{padding-left:0}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoa{background-color:#e6f2f8;box-shadow:inset .125rem 0 #027db8;color:#1f282c;font-weight:700}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcod{display:none}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe{display:block;width:100%}.pkg_sps-woodland_side-nav__version_8_17_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_17_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_17_2__hash_1j8bvcog:hover{background-color:#f3f4f4}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco9>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:undefined}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:2.125rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:3rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:3.875rem}.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvco8>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcoe>.pkg_sps-woodland_side-nav__version_8_17_2__hash_1j8bvcog{padding-left:undefined}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/side-nav",
   "description": "SPS Woodland Design System side navigation components",
-  "version": "8.17.1",
+  "version": "8.17.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/side-nav",
@@ -29,8 +29,8 @@
     "@spscommerce/utils": "^7.0.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.17.1",
-    "@sps-woodland/tokens": "8.17.1"
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "devDependencies": {
     "@spscommerce/utils": "^7.0.0",
@@ -38,8 +38,8 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.17.1",
-    "@sps-woodland/tokens": "8.17.1"
+    "@sps-woodland/core": "8.17.2",
+    "@sps-woodland/tokens": "8.17.2"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.mjs

@@ -1,11 +1,20 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),