@sps-woodland/list-bar 8.20.13 → 8.20.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +3 -3
- package/lib/style.css +1 -1
- package/package.json +14 -14
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),l=require("@sps-woodland/core"),B=require("@sps-woodland/buttons"),x=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),Z=require("@sps-woodland/tokens");function J(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=J(z);var Q="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc1",X="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc8",$="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc7",ee="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc2",te="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc5",ae="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc6",re="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc4",se="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc0",ne="pkg_sps-woodland_list-bar__version_8_20_13__hash_1gxdcgc3";function L({results:t,selections:a,zeroStateText:s,onClear:n,className:c,children:m,...S}){const{t:i}=e.useContext(l.I18nContext),p=a?Object.keys(a).reduce((h,d)=>(a[d].length>0&&(h[d]=a[d]),h),{}):{};return e.createElement("div",{className:Q,...S},t!=null&&e.createElement("div",{className:ee},e.createElement("span",null,i("design-system:searchResultsBar.results")),e.createElement(x.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:re},Object.keys(p).length>0?Object.keys(p).map((h,d)=>e.createElement(e.Fragment,null,e.createElement("span",{key:d,className:te},h,":"),p[h].map((b,_)=>e.createElement(x.Tag,{className:ae,key:_,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},s||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:n},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(L,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function D(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),s.push.apply(s,n)}return s}function P(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?D(Object(s),!0).forEach(function(n){oe(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):D(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var le=(t,a,s)=>{for(var n of Object.keys(t)){var c;if(t[n]!==((c=a[n])!==null&&c!==void 0?c:s[n]))return!1}return!0},j=t=>a=>{var s=t.defaultClassName,n=P(P({},t.defaultVariants),a);for(var c in n){var m,S=(m=n[c])!==null&&m!==void 0?m:t.defaultVariants[c];if(S!=null){var i=S;typeof i=="boolean"&&(i=i===!0?"true":"false");var p=t.variantClassNames[c][i];p&&(s+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,n,t.defaultVariants)&&(s+=" "+d);return s},ce="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70e",ie=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70a",me="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p707",pe="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p708",he="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p704",G="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70b",Se="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p706",fe="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70d",ve="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70c",be="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p705",Be="pkg_sps-woodland_list-bar__version_8_20_13__hash_9h4p70f";function q({children:t}){const a=l.modChildren(t,s=>s.type===B.Button?[{className:l.cl(s.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function w({children:t}){return e.createElement("div",null,t)}l.Metadata.set(w,{name:"ListBarSearchInfo"});function C({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:_,...k}){const{t:U}=e.useContext(l.I18nContext);let E=null;const[f,F]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":M}=k,I=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof E=="number"?window.scrollY<E&&(E=null,F(!1)):(E=window.scrollY,F(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",I),()=>{window.removeEventListener("scroll",I)}),[]);const T=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&T.current)v.current.style.height=T.current.height,v.current.style.width=T.current.width,v.current.style.marginBottom=T.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);T.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function K(){a&&a(!(t!=null&&t.isOpen))}function H(u){n&&n(u)}e.useEffect(()=>{H(f)},[f]);const[O,W,Y,[N],V]=l.selectChildren(b,[{type:y},{type:w},{type:L},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(_),ref:v,...k},e.createElement("div",{className:ie({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:he},!!c&&e.createElement("div",{className:be},e.createElement(r.SpsCheckbox,{checked:m,disabled:i,indeterminate:S,onChange:()=>{p==null||p(!m)}})),e.createElement("div",{className:Se},!s&&O,!s&&W,O.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${M}__advanced-search`},e.createElement("div",{className:pe},e.createElement(B.Button,{kind:"link",onClick:K},U("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(x.Tag,{className:de,kind:"info","data-testid":`${M}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:G},V)),e.createElement("div",{className:se},(!f||f&&h)&&Y))))}l.Metadata.set(C,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => 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 A({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{s&&s(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),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:S})}l.Metadata.set(A,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var _e=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj414",Te="pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj415",Ee="pkg_sps-woodland_list-bar__version_8_20_13__hash_q4fj413";function R({formArray:t,formGroup:a,formMeta:s,onSubmit:n,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function _(){i&&i()}return e.createElement("div",{className:l.cl(_e({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:n,formArray:t,formGroup:a,formMeta:s},e.createElement("div",{className:Ee},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:_,disabled:c},b("design-system:advancedSearch.clear")),e.createElement(B.Button,{kind:"key",type:"submit",disabled:c},b("design-system:advancedSearch.search"))))))}l.Metadata.set(R,{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 Le={components:[R],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
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),l=require("@sps-woodland/core"),B=require("@sps-woodland/buttons"),x=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),Z=require("@sps-woodland/tokens");function J(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=J(z);var Q="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc1",X="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc8",$="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc7",ee="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc2",te="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc5",ae="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc6",re="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc4",se="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc0",ne="pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc3";function L({results:t,selections:a,zeroStateText:s,onClear:n,className:c,children:m,...S}){const{t:i}=e.useContext(l.I18nContext),p=a?Object.keys(a).reduce((h,d)=>(a[d].length>0&&(h[d]=a[d]),h),{}):{};return e.createElement("div",{className:Q,...S},t!=null&&e.createElement("div",{className:ee},e.createElement("span",null,i("design-system:searchResultsBar.results")),e.createElement(x.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:re},Object.keys(p).length>0?Object.keys(p).map((h,d)=>e.createElement(e.Fragment,null,e.createElement("span",{key:d,className:te},h,":"),p[h].map((b,_)=>e.createElement(x.Tag,{className:ae,key:_,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},s||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:n},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(L,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function D(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),s.push.apply(s,n)}return s}function P(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?D(Object(s),!0).forEach(function(n){oe(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):D(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var le=(t,a,s)=>{for(var n of Object.keys(t)){var c;if(t[n]!==((c=a[n])!==null&&c!==void 0?c:s[n]))return!1}return!0},j=t=>a=>{var s=t.defaultClassName,n=P(P({},t.defaultVariants),a);for(var c in n){var m,S=(m=n[c])!==null&&m!==void 0?m:t.defaultVariants[c];if(S!=null){var i=S;typeof i=="boolean"&&(i=i===!0?"true":"false");var p=t.variantClassNames[c][i];p&&(s+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,n,t.defaultVariants)&&(s+=" "+d);return s},ce="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70e",ie=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70a",me="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p707",pe="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p708",he="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p704",G="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70b",Se="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p706",fe="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70d",ve="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70c",be="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p705",Be="pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70f";function q({children:t}){const a=l.modChildren(t,s=>s.type===B.Button?[{className:l.cl(s.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function w({children:t}){return e.createElement("div",null,t)}l.Metadata.set(w,{name:"ListBarSearchInfo"});function C({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:_,...k}){const{t:U}=e.useContext(l.I18nContext);let E=null;const[f,F]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":M}=k,I=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof E=="number"?window.scrollY<E&&(E=null,F(!1)):(E=window.scrollY,F(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",I),()=>{window.removeEventListener("scroll",I)}),[]);const T=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&T.current)v.current.style.height=T.current.height,v.current.style.width=T.current.width,v.current.style.marginBottom=T.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);T.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function K(){a&&a(!(t!=null&&t.isOpen))}function H(u){n&&n(u)}e.useEffect(()=>{H(f)},[f]);const[O,W,Y,[N],V]=l.selectChildren(b,[{type:y},{type:w},{type:L},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(_),ref:v,...k},e.createElement("div",{className:ie({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:he},!!c&&e.createElement("div",{className:be},e.createElement(r.SpsCheckbox,{checked:m,disabled:i,indeterminate:S,onChange:()=>{p==null||p(!m)}})),e.createElement("div",{className:Se},!s&&O,!s&&W,O.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${M}__advanced-search`},e.createElement("div",{className:pe},e.createElement(B.Button,{kind:"link",onClick:K},U("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(x.Tag,{className:de,kind:"info","data-testid":`${M}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:G},V)),e.createElement("div",{className:se},(!f||f&&h)&&Y))))}l.Metadata.set(C,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => 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 A({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{s&&s(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),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:S})}l.Metadata.set(A,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var _e=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj414",Te="pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj415",Ee="pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj413";function R({formArray:t,formGroup:a,formMeta:s,onSubmit:n,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function _(){i&&i()}return e.createElement("div",{className:l.cl(_e({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:n,formArray:t,formGroup:a,formMeta:s},e.createElement("div",{className:Ee},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:_,disabled:c},b("design-system:advancedSearch.clear")),e.createElement(B.Button,{kind:"key",type:"submit",disabled:c},b("design-system:advancedSearch.search"))))))}l.Metadata.set(R,{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 Le={components:[R],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/index.es.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 me } from "@sps-woodland/tokens";
|
|
8
|
-
var ue = "pkg_sps-woodland_list-
|
|
8
|
+
var ue = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc1", pe = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc8", he = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc7", Se = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc2", fe = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc5", ve = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc6", be = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc4", Be = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc0", _e = "pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc3";
|
|
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 = "pkg_sps-woodland_list-
|
|
83
|
+
}, Ee = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70e", Le = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), ye = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p709", xe = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70a", we = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p707", Ae = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p708", Ce = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p704", U = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70b", ke = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p706", Fe = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70d", Re = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70c", Me = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p705", Ie = "pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70f";
|
|
84
84
|
function Oe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
@@ -254,7 +254,7 @@ b.set(q, {
|
|
|
254
254
|
defaultOption: { type: "SortOption" }
|
|
255
255
|
}
|
|
256
256
|
});
|
|
257
|
-
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-
|
|
257
|
+
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ne = "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj414", De = "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj415", Pe = "pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj413";
|
|
258
258
|
function H({
|
|
259
259
|
formArray: t,
|
|
260
260
|
formGroup: a,
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_list-
|
|
1
|
+
.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__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_20_15__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_20_15__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__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_20_15__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__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_20_15__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_20_15__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__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_20_15__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_20_15__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_20_15__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_20_15__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_20_15__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_20_15__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__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_20_15__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_20_15__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_20_15__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_20_15__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_20_15__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_20_15__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.20.
|
|
4
|
+
"version": "8.20.15",
|
|
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.20.
|
|
33
|
-
"@sps-woodland/core": "8.20.
|
|
34
|
-
"@sps-woodland/tabs": "8.20.
|
|
35
|
-
"@sps-woodland/tags": "8.20.
|
|
36
|
-
"@sps-woodland/tokens": "8.20.
|
|
37
|
-
"@spscommerce/ds-react": "8.20.
|
|
32
|
+
"@sps-woodland/buttons": "8.20.15",
|
|
33
|
+
"@sps-woodland/core": "8.20.15",
|
|
34
|
+
"@sps-woodland/tabs": "8.20.15",
|
|
35
|
+
"@sps-woodland/tags": "8.20.15",
|
|
36
|
+
"@sps-woodland/tokens": "8.20.15",
|
|
37
|
+
"@spscommerce/ds-react": "8.20.15"
|
|
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.20.
|
|
47
|
-
"@sps-woodland/core": "8.20.
|
|
48
|
-
"@sps-woodland/tabs": "8.20.
|
|
49
|
-
"@sps-woodland/tags": "8.20.
|
|
50
|
-
"@sps-woodland/tokens": "8.20.
|
|
51
|
-
"@spscommerce/ds-react": "8.20.
|
|
52
|
-
"@spscommerce/ds-shared": "8.20.
|
|
46
|
+
"@sps-woodland/buttons": "8.20.15",
|
|
47
|
+
"@sps-woodland/core": "8.20.15",
|
|
48
|
+
"@sps-woodland/tabs": "8.20.15",
|
|
49
|
+
"@sps-woodland/tags": "8.20.15",
|
|
50
|
+
"@sps-woodland/tokens": "8.20.15",
|
|
51
|
+
"@spscommerce/ds-react": "8.20.15",
|
|
52
|
+
"@spscommerce/ds-shared": "8.20.15"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|