@sps-woodland/list-bar 8.29.10 → 8.30.0
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 w } from "@sps-woodland/tags";
|
|
|
5
5
|
import { lockToAnimationFrames as ae, code as o } from "@spscommerce/utils";
|
|
6
6
|
import { SpsInputGroup as re, SpsCheckbox as se, SpsDropdown as ne, SpsForm as oe, SpsFocusedTask as le, SpsTable as ce, SpsTableHead as ie, SpsTableHeader as x, SpsTableBody as de, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
7
|
import { sprinkles as ue } from "@sps-woodland/tokens";
|
|
8
|
-
var me = "pkg_sps-woodland_list-
|
|
8
|
+
var me = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc0", pe = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc1", he = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc2", Se = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc3", fe = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc4", ve = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc5", be = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc6", Be = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc7", _e = "pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc8";
|
|
9
9
|
function C({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
@@ -80,7 +80,7 @@ var Te = (t, a, r) => {
|
|
|
80
80
|
for (var [p, i] of t.compoundVariants)
|
|
81
81
|
Te(p, s, t.defaultVariants) && (r += " " + i);
|
|
82
82
|
return r;
|
|
83
|
-
}, Ee = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
83
|
+
}, Ee = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Le = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p704", ye = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p705", xe = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p706", we = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p707", Ae = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p708", Ce = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p709", ke = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70a", U = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70b", Re = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70c", Fe = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70d", Me = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70e", Ie = "pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70f";
|
|
84
84
|
function Oe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
@@ -253,7 +253,7 @@ b.set(q, {
|
|
|
253
253
|
defaultOption: { type: "SortOption" }
|
|
254
254
|
}
|
|
255
255
|
});
|
|
256
|
-
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
256
|
+
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ne = "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj413", De = "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj414", Pe = "pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj415";
|
|
257
257
|
function H({
|
|
258
258
|
formArray: t,
|
|
259
259
|
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,A,o,r,H){"use strict";function W(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const e=W(g);var Y="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_29_10__hash_1gxdcgc8";function y({results:t,selections:a,zeroStateText:s,onClear:n,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(A.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(A.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},s||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,kind:"link",onClick:n},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ae(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function I(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),s.push.apply(s,n)}return s}function O(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?I(Object(s),!0).forEach(function(n){ae(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):I(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var re=(t,a,s)=>{for(var n of Object.keys(t)){var i;if(t[n]!==((i=a[n])!==null&&i!==void 0?i:s[n]))return!1}return!0},V=t=>a=>{var s=t.defaultClassName,n=O(O({},t.defaultVariants),a);for(var i in n){var p,f=(p=n[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&&(s+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,n,t.defaultVariants)&&(s+=" "+u);return s},se=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ne="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70a",R="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_29_10__hash_9h4p70f";function N({children:t}){const a=c.modChildren(t,s=>s.type===B.Button?[{className:c.cl(s.props.className,he)}]:[]);return e.createElement(e.Fragment,null,a)}function w({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(N,null,a)))}c.Metadata.set(w,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function k({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:i,isSelected:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...D}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,P]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":G}=D,j=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();m&&m.height>0&&m.top<=60&&(typeof x=="number"?window.scrollY<x&&(x=null,P(!1)):(x=window.scrollY,P(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",j),()=>{window.removeEventListener("scroll",j)}),[]);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 we(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){n&&n(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:w},{type:C},{type:y},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...D},e.createElement("div",{className:se({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:ne},!!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},!s&&q,!s&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${G}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:we},ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${G}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),v?e.createElement("div",{className:R},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:R},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}c.Metadata.set(k,{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 F({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{s&&s(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),icon:(a==null?void 0:a.icon)||(n==null?void 0:n.icon),label:(a==null?void 0:a.label)||(n==null?void 0:n.label),options:f})}c.Metadata.set(F,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_29_10__hash_q4fj415";function M({formArray:t,formGroup:a,formMeta:s,onSubmit:n,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:n,formArray:t,formGroup:a,formMeta:s},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(M,{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:[M],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,A,o,r,H){"use strict";function W(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const e=W(g);var Y="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc0",z="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc1",Z="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc2",J="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc3",Q="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc4",X="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc5",$="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc6",ee="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc7",te="pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc8";function y({results:t,selections:a,zeroStateText:s,onClear:n,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(A.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(A.Tag,{className:$,key:T,kind:"key"},e.createElement("span",null,_))))):e.createElement("span",{className:"font-italic"},s||d("design-system:searchResultsBar.noAdvancedSearchSelections",{defaultValue:"No Advanced Search Selections"}))),e.createElement("div",{className:ee},e.createElement(B.Button,{className:te,kind:"link",onClick:n},d("design-system:searchResultsBar.clearResults",{defaultValue:"Clear Results"}))))}c.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function ae(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function I(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),s.push.apply(s,n)}return s}function O(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?I(Object(s),!0).forEach(function(n){ae(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):I(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var re=(t,a,s)=>{for(var n of Object.keys(t)){var i;if(t[n]!==((i=a[n])!==null&&i!==void 0?i:s[n]))return!1}return!0},V=t=>a=>{var s=t.defaultClassName,n=O(O({},t.defaultVariants),a);for(var i in n){var p,f=(p=n[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&&(s+=" "+h)}}for(var[S,u]of t.compoundVariants)re(S,n,t.defaultVariants)&&(s+=" "+u);return s},se=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ne="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p704",oe="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p705",le="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p706",ce="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p707",ie="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p708",de="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70a",R="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70b",me="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70c",pe="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70d",he="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70e",Se="pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70f";function N({children:t}){const a=c.modChildren(t,s=>s.type===B.Button?[{className:c.cl(s.props.className,he)}]:[]);return e.createElement(e.Fragment,null,a)}function w({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:me,noValidate:!0},e.createElement(r.SpsInputGroup,{className:pe},e.createElement(N,null,a)))}c.Metadata.set(w,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}c.Metadata.set(C,{name:"ListBarSearchInfo"});function k({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:i,isSelected:p,isIndeterminate:f,disableSelection:d=!1,onSelectionChange:h,pinResultsBar:S,pinToolbar:u=!0,children:_,className:T,...D}){const{t:ye}=e.useContext(c.I18nContext);let x=null;const[v,P]=e.useState(!1),E=e.useRef(null),b=e.useRef(null),{"data-testid":G}=D,j=o.lockToAnimationFrames(()=>{if(E.current&&u){const m=E.current.getBoundingClientRect();m&&m.height>0&&m.top<=60&&(typeof x=="number"?window.scrollY<x&&(x=null,P(!1)):(x=window.scrollY,P(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",j),()=>{window.removeEventListener("scroll",j)}),[]);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 we(){a&&a(!(t!=null&&t.isOpen))}function Ce(m){n&&n(m)}e.useEffect(()=>{Ce(v)},[v]);const[q,xe,Ae,[U],K]=c.selectChildren(_,[{type:w},{type:C},{type:y},{custom:m=>c.Metadata.isWoodlandComponent(m)&&c.Metadata.get(m).name==="Tabs"}]);return e.createElement("div",{className:c.cl(T),ref:b,...D},e.createElement("div",{className:se({pinned:v}),ref:E},U?c.addProps(U,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:ne},!!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},!s&&q,!s&&xe,q.length>0&&t&&e.createElement("div",{className:ce,"data-testid":`${G}__advanced-search`},e.createElement("div",{className:ie},e.createElement(B.Button,{kind:"link",onClick:we},ye("design-system:listToolbar.advancedSearchToggle",{defaultValue:"Advanced Search"}))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${G}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),v?e.createElement("div",{className:R},e.createElement(c.PortalContext.Provider,{value:{fixed:!0}},K)):e.createElement("div",{className:R},K)),e.createElement("div",{className:Y},(!v||S)&&Ae))))}c.Metadata.set(k,{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 F({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:i,...p}){const f=(t||[]).map(d=>[{label:d.label,icon:d.icon},()=>{s&&s(d)}]);return e.createElement(r.SpsDropdown,{className:c.cl(i,Se),icon:(a==null?void 0:a.icon)||(n==null?void 0:n.icon),label:(a==null?void 0:a.label)||(n==null?void 0:n.label),options:f})}c.Metadata.set(F,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var fe=V({defaultClassName:"pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ve="pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj413",be="pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj414",Be="pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj415";function M({formArray:t,formGroup:a,formMeta:s,onSubmit:n,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:n,formArray:t,formGroup:a,formMeta:s},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(M,{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:[M],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_30_0__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_30_0__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_30_0__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_30_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__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_30_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__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_30_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_30_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__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_30_0__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_30_0__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_30_0__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_30_0__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_30_0__hash_9h4p70d svg{margin-bottom:0}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__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_30_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_30_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_30_0__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_30_0__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_30_0__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_30_0__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.
|
|
4
|
+
"version": "8.30.0",
|
|
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
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tabs": "8.
|
|
35
|
-
"@sps-woodland/tags": "8.
|
|
36
|
-
"@sps-woodland/tokens": "8.
|
|
37
|
-
"@spscommerce/ds-react": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.30.0",
|
|
33
|
+
"@sps-woodland/core": "8.30.0",
|
|
34
|
+
"@sps-woodland/tabs": "8.30.0",
|
|
35
|
+
"@sps-woodland/tags": "8.30.0",
|
|
36
|
+
"@sps-woodland/tokens": "8.30.0",
|
|
37
|
+
"@spscommerce/ds-react": "8.30.0"
|
|
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.
|
|
47
|
-
"@sps-woodland/core": "8.
|
|
48
|
-
"@sps-woodland/tabs": "8.
|
|
49
|
-
"@sps-woodland/
|
|
50
|
-
"@sps-woodland/
|
|
51
|
-
"@spscommerce/ds-react": "8.
|
|
52
|
-
"@spscommerce/ds-shared": "8.
|
|
46
|
+
"@sps-woodland/buttons": "8.30.0",
|
|
47
|
+
"@sps-woodland/core": "8.30.0",
|
|
48
|
+
"@sps-woodland/tabs": "8.30.0",
|
|
49
|
+
"@sps-woodland/tags": "8.30.0",
|
|
50
|
+
"@sps-woodland/tokens": "8.30.0",
|
|
51
|
+
"@spscommerce/ds-react": "8.30.0",
|
|
52
|
+
"@spscommerce/ds-shared": "8.30.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|