@sps-woodland/list-bar 8.31.3 → 8.31.5
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 A } from "@sps-woodland/tags";
|
|
|
5
5
|
import { lockToAnimationFrames as ne, code as o } from "@spscommerce/utils";
|
|
6
6
|
import { SpsInputGroup as oe, SpsCheckbox as le, SpsDropdown as ce, SpsForm as ie, SpsFocusedTask as de, SpsTable as ue, SpsTableHead as me, SpsTableHeader as x, SpsTableBody as he, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
7
|
import { sprinkles as pe } from "@sps-woodland/tokens";
|
|
8
|
-
var Se = "pkg_sps-woodland_list-
|
|
8
|
+
var Se = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc0", fe = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc1", ve = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc2", be = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc3", Be = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc4", _e = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc5", ge = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc6", Te = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc7", Ee = "pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc8";
|
|
9
9
|
function k({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
@@ -80,7 +80,7 @@ var ye = (t, a, r) => {
|
|
|
80
80
|
for (var [h, i] of t.compoundVariants)
|
|
81
81
|
ye(h, s, t.defaultVariants) && (r += " " + i);
|
|
82
82
|
return r;
|
|
83
|
-
}, we = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
83
|
+
}, we = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), xe = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p704", Ae = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p705", Ce = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p706", ke = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p707", Re = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p708", Fe = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p709", Me = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70a", U = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70b", Ie = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70c", Oe = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70d", Ve = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70e", Ne = "pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70f";
|
|
84
84
|
function De({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
@@ -256,7 +256,7 @@ b.set(q, {
|
|
|
256
256
|
defaultOption: { type: "SortOption" }
|
|
257
257
|
}
|
|
258
258
|
});
|
|
259
|
-
var Pe = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
259
|
+
var Pe = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ge = "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj413", Ue = "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj414", je = "pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj415";
|
|
260
260
|
function H({
|
|
261
261
|
formArray: t,
|
|
262
262
|
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,H){"use strict";function W(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=W(g);var Y="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_31_3__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:p,...f}){const{t:d}=e.useContext(c.I18nContext),h=a?Object.keys(a).reduce((S,u)=>(a[u].length>0&&(S[u]=a[u]),S),{}):{};return e.createElement("div",{className:z,...f},t!=null&&e.createElement("div",{className:Z},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:J,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Q},Object.keys(h).length>0?Object.keys(h).map((S,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:X},S,":"),h[S].map((_,T)=>e.createElement(k.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,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 ae(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function O(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 V(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?O(Object(n),!0).forEach(function(s){ae(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var re=(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},R=t=>a=>{var n=t.defaultClassName,s=V(V({},t.defaultVariants),a);for(var i in s){var p,f=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(f!=null){var d=f;typeof d=="boolean"&&(d=d===!0?"true":"false");var h=t.variantClassNames[i][d];h&&(n+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,s,t.defaultVariants)&&(n+=" "+u);return n},ne=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),se="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70a",N="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_31_3__hash_9h4p70f";function D({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,he)}]:[]);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:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(D,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:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...P}){const{t:we}=e.useContext(c.I18nContext);let x=null;const[v,G]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":j}=P,A=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();if(!m)return;const ke=Math.round(m.height),Fe=Math.round(m.top),Me=Math.round(window.scrollY);ke>0&&Fe<=60&&(typeof x=="number"?Me<=x&&(x=null,G(!1)):(x=Math.round(window.scrollY),G(!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&&u){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 m=window.getComputedStyle(E.current);L.current={height:m.height,width:m.width,marginBottom:m.marginBottom}}}},[v]);function ye(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){s&&s(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...P},e.createElement("div",{className:ne({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:se},!!i&&e.createElement("div",{className:oe},e.createElement(r.SpsCheckbox,{checked:p,disabled:d,indeterminate:f,onChange:()=>{h==null||h(!p)}})),e.createElement("div",{className:le},!n&&q,!n&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${j}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:ye},we("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:de,kind:"info","data-testid":`${j}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),v?e.createElement("div",{className:N},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:N},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}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"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),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:f})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_31_3__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:f,onClear:d,className:h,children:S,...u}){const{t:_}=e.useContext(c.I18nContext);function T(){d&&d()}return e.createElement("div",{className:c.cl(fe({open:f})),...u},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ve},S),e.createElement("div",{className:be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:Be},e.createElement(B.Button,{kind:"default",type:"button",className:H.sprinkles({mr:"sm"}),onClick:T,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},_("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"}}});const _e={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,H){"use strict";function W(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=W(g);var Y="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc8";function w({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:p,...f}){const{t:d}=e.useContext(c.I18nContext),h=a?Object.keys(a).reduce((S,u)=>(a[u].length>0&&(S[u]=a[u]),S),{}):{};return e.createElement("div",{className:z,...f},t!=null&&e.createElement("div",{className:Z},e.createElement("span",null,d("design-system:searchResultsBar.results",{defaultValue:"Results:"})),e.createElement(k.Tag,{className:J,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Q},Object.keys(h).length>0?Object.keys(h).map((S,u)=>e.createElement(e.Fragment,null,e.createElement("span",{key:u,className:X},S,":"),h[S].map((_,T)=>e.createElement(k.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},n||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,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 ae(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function O(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 V(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?O(Object(n),!0).forEach(function(s){ae(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var re=(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},R=t=>a=>{var n=t.defaultClassName,s=V(V({},t.defaultVariants),a);for(var i in s){var p,f=(p=s[i])!==null&&p!==void 0?p:t.defaultVariants[i];if(f!=null){var d=f;typeof d=="boolean"&&(d=d===!0?"true":"false");var h=t.variantClassNames[i][d];h&&(n+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,s,t.defaultVariants)&&(n+=" "+u);return n},ne=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),se="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70a",N="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70f";function D({children:t}){const a=c.modChildren(t,n=>n.type===B.Button?[{className:c.cl(n.props.className,he)}]:[]);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:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(D,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:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...P}){const{t:we}=e.useContext(c.I18nContext);let x=null;const[v,G]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":j}=P,A=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();if(!m)return;const ke=Math.round(m.height),Fe=Math.round(m.top),Me=Math.round(window.scrollY);ke>0&&Fe<=60&&(typeof x=="number"?Me<=x&&(x=null,G(!1)):(x=Math.round(window.scrollY),G(!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&&u){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 m=window.getComputedStyle(E.current);L.current={height:m.height,width:m.width,marginBottom:m.marginBottom}}}},[v]);function ye(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){s&&s(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:y},{type:C},{type:w},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...P},e.createElement("div",{className:ne({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:se},!!i&&e.createElement("div",{className:oe},e.createElement(r.SpsCheckbox,{checked:p,disabled:d,indeterminate:f,onChange:()=>{h==null||h(!p)}})),e.createElement("div",{className:le},!n&&q,!n&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${j}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:ye},we("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(k.Tag,{className:de,kind:"info","data-testid":`${j}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),v?e.createElement("div",{className:N},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:N},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}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"}}});function M({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{n&&n(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),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:f})}c.Metadata.set(M,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=R({defaultClassName:"pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj415";function I({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:p,isOpen:f,onClear:d,className:h,children:S,...u}){const{t:_}=e.useContext(c.I18nContext);function T(){d&&d()}return e.createElement("div",{className:c.cl(fe({open:f})),...u},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ve},S),e.createElement("div",{className:be},p&&e.createElement("div",{id:"footer_links"},c.contentOf(p)),e.createElement("div",{className:Be},e.createElement(B.Button,{kind:"default",type:"button",className:H.sprinkles({mr:"sm"}),onClick:T,disabled:i},_("design-system:advancedSearch.clear",{defaultValue:"Clear Fields"})),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},_("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"}}});const _e={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_31_5__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_31_5__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_31_5__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_31_5__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__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_31_5__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_31_5__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__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_31_5__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_31_5__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_31_5__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_31_5__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_31_5__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__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_31_5__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_31_5__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_31_5__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_31_5__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_31_5__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_31_5__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.31.
|
|
4
|
+
"version": "8.31.5",
|
|
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.31.
|
|
33
|
-
"@sps-woodland/core": "8.31.
|
|
34
|
-
"@sps-woodland/tabs": "8.31.
|
|
35
|
-
"@sps-woodland/tags": "8.31.
|
|
36
|
-
"@sps-woodland/tokens": "8.31.
|
|
37
|
-
"@spscommerce/ds-react": "8.31.
|
|
32
|
+
"@sps-woodland/buttons": "8.31.5",
|
|
33
|
+
"@sps-woodland/core": "8.31.5",
|
|
34
|
+
"@sps-woodland/tabs": "8.31.5",
|
|
35
|
+
"@sps-woodland/tags": "8.31.5",
|
|
36
|
+
"@sps-woodland/tokens": "8.31.5",
|
|
37
|
+
"@spscommerce/ds-react": "8.31.5"
|
|
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/buttons": "8.31.
|
|
47
|
-
"@sps-woodland/core": "8.31.
|
|
48
|
-
"@sps-woodland/tabs": "8.31.
|
|
49
|
-
"@sps-woodland/tags": "8.31.
|
|
50
|
-
"@sps-woodland/tokens": "8.31.
|
|
51
|
-
"@spscommerce/ds-react": "8.31.
|
|
52
|
-
"@spscommerce/ds-shared": "8.31.
|
|
46
|
+
"@sps-woodland/buttons": "8.31.5",
|
|
47
|
+
"@sps-woodland/core": "8.31.5",
|
|
48
|
+
"@sps-woodland/tabs": "8.31.5",
|
|
49
|
+
"@sps-woodland/tags": "8.31.5",
|
|
50
|
+
"@sps-woodland/tokens": "8.31.5",
|
|
51
|
+
"@spscommerce/ds-react": "8.31.5",
|
|
52
|
+
"@spscommerce/ds-shared": "8.31.5"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|