@sps-woodland/list-bar 8.33.7 → 8.33.8
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 +3 -3
- package/lib/index.umd.cjs +1 -1
- package/lib/style.css +1 -1
- package/package.json +14 -14
package/lib/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Tag as C } from "@sps-woodland/tags";
|
|
|
5
5
|
import { lockToAnimationFrames as oe, code as o } from "@spscommerce/utils";
|
|
6
6
|
import { SpsInputGroup as le, SpsCheckbox as ce, SpsDropdown as ie, SpsForm as de, SpsFocusedTask as ue, SpsTable as me, SpsTableHead as he, SpsTableHeader as A, SpsTableBody as pe, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
7
|
import { sprinkles as Se } from "@sps-woodland/tokens";
|
|
8
|
-
var fe = "pkg_sps-woodland_list-
|
|
8
|
+
var fe = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc0", ve = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc1", be = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc2", Be = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc3", _e = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc4", ge = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc5", Te = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc6", Ee = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc7", Le = "pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc8";
|
|
9
9
|
function R({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
@@ -80,7 +80,7 @@ var we = (t, a, r) => {
|
|
|
80
80
|
for (var [p, d] of t.compoundVariants)
|
|
81
81
|
we(p, s, t.defaultVariants) && (r += " " + d);
|
|
82
82
|
return r;
|
|
83
|
-
}, xe = K({ defaultClassName: "pkg_sps-woodland_list-
|
|
83
|
+
}, xe = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Ae = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p704", Ce = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p705", ke = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p706", Re = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p707", Fe = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p708", Me = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p709", Ie = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70a", j = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70b", Oe = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70c", Ve = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d", Ne = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70e", De = "pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70f";
|
|
84
84
|
function Pe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
@@ -258,7 +258,7 @@ b.set(H, {
|
|
|
258
258
|
defaultOption: { type: "SortOption" }
|
|
259
259
|
}
|
|
260
260
|
});
|
|
261
|
-
var Ge = K({ defaultClassName: "pkg_sps-woodland_list-
|
|
261
|
+
var Ge = K({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ue = "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj413", je = "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj414", Ke = "pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj415";
|
|
262
262
|
function W({
|
|
263
263
|
formArray: t,
|
|
264
264
|
formGroup: a,
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@sps-woodland/tokens"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.tokens))})(this,function(l,g,c,B,k,o,r,W){"use strict";function Y(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=Y(g);var z="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc0",Z="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc1",J="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc2",Q="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc3",X="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc4",$="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc5",ee="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc6",te="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc7",ae="pkg_sps-woodland_list-bar__version_8_33_7__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:h,...S}){const{t:d}=e.useContext(c.I18nContext),u=a?Object.keys(a).reduce((f,m)=>(a[m].length>0&&(f[m]=a[m]),f),{}):{};return e.createElement("div",{className:Z,...S},t!=null&&e.createElement("div",{className:J},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:Q,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:X},Object.keys(u).length>0?Object.keys(u).map((f,m)=>e.createElement(e.Fragment,null,e.createElement("span",{key:m,className:$},f,":"),u[f].map((T,_)=>e.createElement(k.Tag,{className:ee,key:_,kind:"key"},e.createElement("span",null,T))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:te},e.createElement(B.Button,{className:ae,kind:"link",onClick:s},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(w,{name:"Search Results Bar",props:{results:{type:"number | string | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function re(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function V(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function R(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?V(Object(n),!0).forEach(function(s){re(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var ne=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},N=t=>a=>{var n=t.defaultClassName,s=R(R({},t.defaultVariants),a);for(var i in s){var h,S=(h=s[i])!==null&&h!==void 0?h:t.defaultVariants[i];if(S!=null){var d=S;typeof d=="boolean"&&(d=d===!0?"true":"false");var u=t.variantClassNames[i][d];u&&(n+=" "+u)}}for(var[f,m]of t.compoundVariants)ne(f,s,t.defaultVariants)&&(n+=" "+m);return n},se=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),oe="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p704",le="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p705",ce="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p706",ie="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p707",de="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p708",ue="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70a",D="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70b",pe="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70c",he="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70d",Se="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70e",fe="pkg_sps-woodland_list-bar__version_8_33_7__hash_9h4p70f";function P({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,Se)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:pe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:he},e.createElement(P,null,a)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function F({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:h,isIndeterminate:S,disableSelection:d=!1,onSelectionChange:u,pinResultsBar:f,pinToolbar:m=!0,advancedSearchToggleText:T,children:_,className:O,...G}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,j]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":q}=G,A=o.lockToAnimationFrames(()=>{if(E.current&&m){const p=E.current.getBoundingClientRect();if(!p)return;const Fe=Math.round(p.height),Me=Math.round(p.top),Ie=Math.round(window.scrollY);Fe>0&&Me<=60&&(typeof x=="number"?Ie<=x&&(x=null,j(!1)):(x=Math.round(window.scrollY),j(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",A),window.addEventListener("resize",A),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&m){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const p=window.getComputedStyle(E.current);L.current={height:p.height,width:p.width,marginBottom:p.marginBottom}}}},[v]);function Ce(){a&&a(!(t!=null&&t.isOpen))}function xe(p){s&&s(p)}e.useEffect(()=>{xe(v)},[v]);const[U,Ae,ke,[K],H]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:p=>c.Metadata.isWoodlandComponent(p)&&c.Metadata.get(p).name==="Tabs"}]);return e.createElement("div",{className:c.cl(O),ref:b,...G},e.createElement("div",{className:se({pinned:v}),ref:E},K?c.addProps(K,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:oe},!!i&&e.createElement("div",{className:le},e.createElement(r.SpsCheckbox,{checked:h,disabled:d,indeterminate:S,onChange:()=>{u==null||u(!h)}})),e.createElement("div",{className:ce},!n&&U,!n&&Ae,U.length>0&&t&&e.createElement("div",{className:ie,"data-testid":`${q}__advanced-search`},e.createElement("div",{className:de},e.createElement(B.Button,{kind:"link",onClick:Ce},T??ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:ue,kind:"info","data-testid":`${q}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:D},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},H)):e.createElement("div",{className:D},H)),e.createElement("div",{className:z},(!v||f)&&ke))))}c.Metadata.set(F,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"},advancedSearchToggleText:{type:"string"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...h}){const S=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,fe),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var ve=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),be="pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj413",Be="pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj414",_e="pkg_sps-woodland_list-bar__version_8_33_7__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:h,isOpen:S,onClear:d,submitButtonText:u,className:f,children:m,...T}){const{t:_}=e.useContext(c.I18nContext);function O(){d&&d()}return e.createElement("div",{className:c.cl(ve({open:S})),...T},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:be},m),e.createElement("div",{className:Be},h&&e.createElement("div",{id:"footer_links"},c.contentOf(h)),e.createElement("div",{className:_e},e.createElement(B.Button,{kind:"default",type:"button",className:W.sprinkles({mr:"sm"}),onClick:O,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},u??_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(I,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"},submitButtonText:{type:"string"}}});const ge={components:[I],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
1
|
+
(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@sps-woodland/tags"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@sps-woodland/tags","@spscommerce/utils","@spscommerce/ds-react","@sps-woodland/tokens"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l.ListBar={},l.React,l.core,l.buttons,l.tags,l.utils,l.dsReact,l.tokens))})(this,function(l,g,c,B,k,o,r,W){"use strict";function Y(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=Y(g);var z="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc0",Z="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc1",J="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc2",Q="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc3",X="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc4",$="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc5",ee="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc6",te="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc7",ae="pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:h,...S}){const{t:d}=e.useContext(c.I18nContext),u=a?Object.keys(a).reduce((f,m)=>(a[m].length>0&&(f[m]=a[m]),f),{}):{};return e.createElement("div",{className:Z,...S},t!=null&&e.createElement("div",{className:J},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:Q,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:X},Object.keys(u).length>0?Object.keys(u).map((f,m)=>e.createElement(e.Fragment,null,e.createElement("span",{key:m,className:$},f,":"),u[f].map((T,_)=>e.createElement(k.Tag,{className:ee,key:_,kind:"key"},e.createElement("span",null,T))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:te},e.createElement(B.Button,{className:ae,kind:"link",onClick:s},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(w,{name:"Search Results Bar",props:{results:{type:"number | string | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function re(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function V(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function R(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?V(Object(n),!0).forEach(function(s){re(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var ne=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},N=t=>a=>{var n=t.defaultClassName,s=R(R({},t.defaultVariants),a);for(var i in s){var h,S=(h=s[i])!==null&&h!==void 0?h:t.defaultVariants[i];if(S!=null){var d=S;typeof d=="boolean"&&(d=d===!0?"true":"false");var u=t.variantClassNames[i][d];u&&(n+=" "+u)}}for(var[f,m]of t.compoundVariants)ne(f,s,t.defaultVariants)&&(n+=" "+m);return n},se=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),oe="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p704",le="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p705",ce="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p706",ie="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p707",de="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p708",ue="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p709",me="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70a",D="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70b",pe="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70c",he="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d",Se="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70e",fe="pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70f";function P({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,Se)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:pe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:he},e.createElement(P,null,a)))}c.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function F({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:h,isIndeterminate:S,disableSelection:d=!1,onSelectionChange:u,pinResultsBar:f,pinToolbar:m=!0,advancedSearchToggleText:T,children:_,className:O,...G}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,j]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":q}=G,A=o.lockToAnimationFrames(()=>{if(E.current&&m){const p=E.current.getBoundingClientRect();if(!p)return;const Fe=Math.round(p.height),Me=Math.round(p.top),Ie=Math.round(window.scrollY);Fe>0&&Me<=60&&(typeof x=="number"?Ie<=x&&(x=null,j(!1)):(x=Math.round(window.scrollY),j(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",A),window.addEventListener("resize",A),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}),[]);const L=e.useRef();e.useLayoutEffect(()=>{if(b.current&&E.current&&m){if(v&&L.current)b.current.style.height=L.current.height,b.current.style.width=L.current.width,b.current.style.marginBottom=L.current.marginBottom;else if(!v){b.current.style.height="",b.current.style.width="",b.current.style.marginBottom="";const p=window.getComputedStyle(E.current);L.current={height:p.height,width:p.width,marginBottom:p.marginBottom}}}},[v]);function Ce(){a&&a(!(t!=null&&t.isOpen))}function xe(p){s&&s(p)}e.useEffect(()=>{xe(v)},[v]);const[U,Ae,ke,[K],H]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:p=>c.Metadata.isWoodlandComponent(p)&&c.Metadata.get(p).name==="Tabs"}]);return e.createElement("div",{className:c.cl(O),ref:b,...G},e.createElement("div",{className:se({pinned:v}),ref:E},K?c.addProps(K,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:oe},!!i&&e.createElement("div",{className:le},e.createElement(r.SpsCheckbox,{checked:h,disabled:d,indeterminate:S,onChange:()=>{u==null||u(!h)}})),e.createElement("div",{className:ce},!n&&U,!n&&Ae,U.length>0&&t&&e.createElement("div",{className:ie,"data-testid":`${q}__advanced-search`},e.createElement("div",{className:de},e.createElement(B.Button,{kind:"link",onClick:Ce},T??ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:ue,kind:"info","data-testid":`${q}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:me},n)),v?e.createElement("div",{className:D},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},H)):e.createElement("div",{className:D},H)),e.createElement("div",{className:z},(!v||f)&&ke))))}c.Metadata.set(F,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"},advancedSearchToggleText:{type:"string"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...h}){const S=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,fe),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var ve=N({defaultClassName:"pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),be="pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj413",Be="pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj414",_e="pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:h,isOpen:S,onClear:d,submitButtonText:u,className:f,children:m,...T}){const{t:_}=e.useContext(c.I18nContext);function O(){d&&d()}return e.createElement("div",{className:c.cl(ve({open:S})),...T},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:be},m),e.createElement("div",{className:Be},h&&e.createElement("div",{id:"footer_links"},c.contentOf(h)),e.createElement("div",{className:_e},e.createElement(B.Button,{kind:"default",type:"button",className:W.sprinkles({mr:"sm"}),onClick:O,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},u??_("design-system:advancedSearch.search",{defaultValue:"Search"}))))))}c.Metadata.set(I,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"},submitButtonText:{type:"string"}}});const ge={components:[I],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
2
2
|
import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
|
|
3
3
|
import { Button } from "@sps-woodland/buttons";
|
|
4
4
|
import { grid } from "@sps-woodland/tokens";
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_list-
|
|
1
|
+
.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p701{background:#fff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p702{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:calc(100% + 1px);width:100%}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70a{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_list-bar__version_8_33_8__hash_9h4p70b{display:inline-block;height:2rem;margin-left:auto;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group{flex-wrap:nowrap}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_33_8__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj410{background:#fff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_33_8__hash_q4fj414>*{flex:1}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/list-bar",
|
|
3
3
|
"description": "SPS Woodland Design System list bar components",
|
|
4
|
-
"version": "8.33.
|
|
4
|
+
"version": "8.33.8",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.33.
|
|
33
|
-
"@sps-woodland/core": "8.33.
|
|
34
|
-
"@sps-woodland/tabs": "8.33.
|
|
35
|
-
"@sps-woodland/
|
|
36
|
-
"@sps-woodland/
|
|
37
|
-
"@spscommerce/ds-react": "8.33.
|
|
32
|
+
"@sps-woodland/buttons": "8.33.8",
|
|
33
|
+
"@sps-woodland/core": "8.33.8",
|
|
34
|
+
"@sps-woodland/tabs": "8.33.8",
|
|
35
|
+
"@sps-woodland/tags": "8.33.8",
|
|
36
|
+
"@sps-woodland/tokens": "8.33.8",
|
|
37
|
+
"@spscommerce/ds-react": "8.33.8"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@react-stately/collections": "^3.3.3",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0",
|
|
46
|
-
"@sps-woodland/
|
|
47
|
-
"@sps-woodland/
|
|
48
|
-
"@sps-woodland/tabs": "8.33.
|
|
49
|
-
"@sps-woodland/tags": "8.33.
|
|
50
|
-
"@sps-woodland/tokens": "8.33.
|
|
51
|
-
"@spscommerce/ds-react": "8.33.
|
|
52
|
-
"@spscommerce/ds-shared": "8.33.
|
|
46
|
+
"@sps-woodland/core": "8.33.8",
|
|
47
|
+
"@sps-woodland/buttons": "8.33.8",
|
|
48
|
+
"@sps-woodland/tabs": "8.33.8",
|
|
49
|
+
"@sps-woodland/tags": "8.33.8",
|
|
50
|
+
"@sps-woodland/tokens": "8.33.8",
|
|
51
|
+
"@spscommerce/ds-react": "8.33.8",
|
|
52
|
+
"@spscommerce/ds-shared": "8.33.8"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|