@sps-woodland/list-bar 8.15.0 → 8.16.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.
Files changed (4) hide show
  1. package/lib/index.cjs.js +40 -3
  2. package/lib/index.es.js +84 -43
  3. package/lib/style.css +1 -1
  4. 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"),A=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 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=J(z);var Q="_1gxdcgc1",X="_1gxdcgc8",$="_1gxdcgc7",ee="_1gxdcgc2",te="_1gxdcgc5",ae="_1gxdcgc6",re="_1gxdcgc4",ne="_1gxdcgc0",se="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,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(A.Tag,{className:se,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,T)=>e.createElement(A.Tag,{className:ae,key:T,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:s},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function _(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),n.push.apply(n,s)}return n}function P(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?_(Object(n),!0).forEach(function(s){oe(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var le=(t,a,n)=>{for(var s of Object.keys(t)){var c;if(t[s]!==((c=a[s])!==null&&c!==void 0?c:n[s]))return!1}return!0},j=t=>a=>{var n=t.defaultClassName,s=P(P({},t.defaultVariants),a);for(var c in s){var m,S=(m=s[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&&(n+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,s,t.defaultVariants)&&(n+=" "+d);return n},ce="_9h4p70e",ie=j({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="_9h4p709",ue="_9h4p70a",me="_9h4p707",pe="_9h4p708",he="_9h4p704",G="_9h4p70b",Se="_9h4p706",fe="_9h4p70d",ve="_9h4p70c",be="_9h4p705",Be="_9h4p70f";function q({children:t}){const a=l.modChildren(t,n=>n.type===B.Button?[{className:l.cl(n.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function C({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(C,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function x({children:t}){return e.createElement("div",null,t)}l.Metadata.set(x,{name:"ListBarSearchInfo"});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:T,...M}){const{t:U}=e.useContext(l.I18nContext);let L=null;const[f,I]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":O}=M,k=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,I(!1)):(L=window.scrollY,I(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",k),()=>{window.removeEventListener("scroll",k)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function H(){a&&a(!(t!=null&&t.isOpen))}function K(u){s&&s(u)}e.useEffect(()=>{K(f)},[f]);const[N,W,Y,[V],D]=l.selectChildren(b,[{type:C},{type:x},{type:y},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(T),ref:v,...M},e.createElement("div",{className:ie({pinned:f}),ref:g},V?l.addProps(V,{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},!n&&N,!n&&W,N.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${O}__advanced-search`},e.createElement("div",{className:pe},e.createElement(B.Button,{kind:"link",onClick:H},U("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${O}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},D)):e.createElement("div",{className:G},D)),e.createElement("div",{className:ne},(!f||f&&h)&&Y))))}l.Metadata.set(w,{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 R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{n&&n(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Te=j({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="q4fj414",Ee="q4fj415",Le="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function T(){i&&i()}return e.createElement("div",{className:l.cl(Te({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Le},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Ee},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:T,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(F,{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 ye={components:[F],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"),A=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 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=J(z);var Q="_1gxdcgc1",X="_1gxdcgc8",$="_1gxdcgc7",ee="_1gxdcgc2",te="_1gxdcgc5",ae="_1gxdcgc6",re="_1gxdcgc4",ne="_1gxdcgc0",se="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,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(A.Tag,{className:se,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,T)=>e.createElement(A.Tag,{className:ae,key:T,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:s},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function _(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),n.push.apply(n,s)}return n}function P(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?_(Object(n),!0).forEach(function(s){oe(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var le=(t,a,n)=>{for(var s of Object.keys(t)){var c;if(t[s]!==((c=a[s])!==null&&c!==void 0?c:n[s]))return!1}return!0},j=t=>a=>{var n=t.defaultClassName,s=P(P({},t.defaultVariants),a);for(var c in s){var m,S=(m=s[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&&(n+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,s,t.defaultVariants)&&(n+=" "+d);return n},ce="_9h4p70e",ie=j({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="_9h4p709",ue="_9h4p70a",me="_9h4p707",pe="_9h4p708",he="_9h4p704",G="_9h4p70b",Se="_9h4p706",fe="_9h4p70d",ve="_9h4p70c",be="_9h4p705",Be="_9h4p70f";function q({children:t}){const a=l.modChildren(t,n=>n.type===B.Button?[{className:l.cl(n.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function x({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(x,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}l.Metadata.set(C,{name:"ListBarSearchInfo"});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:T,...M}){const{t:U}=e.useContext(l.I18nContext);let L=null;const[f,I]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":O}=M,k=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,I(!1)):(L=window.scrollY,I(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",k),()=>{window.removeEventListener("scroll",k)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function K(){a&&a(!(t!=null&&t.isOpen))}function H(u){s&&s(u)}e.useEffect(()=>{H(f)},[f]);const[N,W,Y,[V],D]=l.selectChildren(b,[{type:x},{type:C},{type:y},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(T),ref:v,...M},e.createElement("div",{className:ie({pinned:f}),ref:g},V?l.addProps(V,{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},!n&&N,!n&&W,N.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${O}__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(A.Tag,{className:de,kind:"info","data-testid":`${O}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},D)):e.createElement("div",{className:G},D)),e.createElement("div",{className:ne},(!f||f&&h)&&Y))))}l.Metadata.set(w,{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 R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{n&&n(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Te=j({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="q4fj414",Ee="q4fj415",Le="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function T(){i&&i()}return e.createElement("div",{className:l.cl(Te({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Le},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Ee},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:T,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(F,{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 ye={components:[F],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";
@@ -216,7 +216,7 @@
216
216
  </>
217
217
  )
218
218
  }
219
- `}}}}};function Ce(){const[t,a]=e.useState(!1);function n(){a(!1)}function s(){a(!0)}return e.createElement(e.Fragment,null,e.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),e.createElement(B.Button,{kind:"link",onClick:s},"View Content Order Example"),e.createElement(r.SpsFocusedTask,{isOpen:t,onClose:n},e.createElement("h1",null,"Content Order"),e.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Notes")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Checkbox"),e.createElement(r.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Search/Filter Box"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Saved Search"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Advanced Search"),e.createElement(r.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Column Editor"),e.createElement(r.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(r.SpsTableCell,null,"List View Selector"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(r.SpsTableCell,null,"Sorting"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(r.SpsTableCell,null,"Buttons"),e.createElement(r.SpsTableCell,{wrap:500},"Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))))}const xe={description:()=>e.createElement("p",null,"The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),components:[w,C,x,R],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(Ce,null)},checkbox:{label:"Checkbox",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(t,{to:"content-row"},"Content Row")," or"," ",e.createElement(t,{to:"content-tile"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{basic:{react:o.code`
219
+ `}}}}};function xe(){const[t,a]=e.useState(!1);function n(){a(!1)}function s(){a(!0)}return e.createElement(e.Fragment,null,e.createElement("p",null,"The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."),e.createElement(B.Button,{kind:"link",onClick:s},"View Content Order Example"),e.createElement(r.SpsFocusedTask,{isOpen:t,onClose:n},e.createElement("h1",null,"Content Order"),e.createElement("img",{src:"assets/images/list-toolbar-example.svg",alt:"A List Toolbar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,{style:{width:"80px"}},"Order"),e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Notes")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Checkbox"),e.createElement(r.SpsTableCell,null,"For Content Rows and Content Tiles only.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Search/Filter Box"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Saved Search"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Advanced Search"),e.createElement(r.SpsTableCell,null,"For more information, visit the Advanced Search page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Column Editor"),e.createElement(r.SpsTableCell,{wrap:500},"Use for Tables only. For more information, visit the Column Editor page.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"6")),e.createElement(r.SpsTableCell,null,"List View Selector"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"7")),e.createElement(r.SpsTableCell,null,"Sorting"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"8")),e.createElement(r.SpsTableCell,null,"Buttons"),e.createElement(r.SpsTableCell,{wrap:500},"Buttons always appear in the rightmost section of the List Toolbar. For the ordering of Buttons, refer to the Button Groups section on the Buttons page."))))))}const Ce={description:()=>e.createElement("p",null,"The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),components:[w,x,C,R],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(xe,null)},checkbox:{label:"Checkbox",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(t,{to:"content-row"},"Content Row")," or"," ",e.createElement(t,{to:"content-tile"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{basic:{react:o.code`
220
220
  import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
221
221
 
222
222
  function Component() {
@@ -338,6 +338,43 @@
338
338
  </ListBar>
339
339
  )
340
340
  }
341
+ `},multiValue:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Search + Select"),e.createElement("p",null,"Search + Select with a Multi-Value Text Input")),react:o.code`
342
+ import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
343
+ import { Button } from "@sps-woodland/buttons";
344
+ import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
345
+
346
+ function Component() {
347
+ const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
348
+
349
+ const { formValue, formMeta, updateForm } = useSpsForm({
350
+ searchText: "",
351
+ filterOption: filterKeys[0],
352
+ });
353
+
354
+ function handleSearch(event) {
355
+ console.log(event, formValue.searchText)
356
+ }
357
+
358
+ return (
359
+ <ListBar>
360
+ <ListBarSearch onSubmit={handleSearch}>
361
+ <SpsSelect
362
+ options={filterKeys}
363
+ formMeta={formMeta.fields.filterOption}
364
+ value={formValue.filterOption}
365
+ notClearable
366
+ />
367
+ <SpsMultiValueTextInput
368
+ value={formValue.searchText}
369
+ formMeta={formMeta.fields.searchText}
370
+ placeholder="Search fields"
371
+ isSingleLine={true}
372
+ />
373
+ <Button kind="icon" icon="search" type="submit" />
374
+ </ListBarSearch>
375
+ </ListBar>
376
+ )
377
+ }
341
378
  `},filter:{description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Filter"),e.createElement("p",null,"Use Filter to find list item(s) starting from a populated list.")),react:o.code`
342
379
  import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
343
380
  import { Button } from "@sps-woodland/buttons";
@@ -1044,4 +1081,4 @@
1044
1081
  </>
1045
1082
  )
1046
1083
  }
1047
- `}}}}},we={"Advanced Search":ye,"List Bar":xe,"Search Results Bar":Ae};exports.AdvancedSearch=F;exports.InputGroupWrapper=q;exports.ListBar=w;exports.ListBarSearch=C;exports.ListBarSearchInfo=x;exports.ListBarSortBy=R;exports.MANIFEST=we;exports.SearchResultsBar=y;
1084
+ `}}}}},we={"Advanced Search":ye,"List Bar":Ce,"Search Results Bar":Ae};exports.AdvancedSearch=F;exports.InputGroupWrapper=q;exports.ListBar=w;exports.ListBarSearch=x;exports.ListBarSearchInfo=C;exports.ListBarSortBy=R;exports.MANIFEST=we;exports.SearchResultsBar=y;
package/lib/index.es.js CHANGED
@@ -5,20 +5,20 @@ import { Tag as C } from "@sps-woodland/tags";
5
5
  import { lockToAnimationFrames as ae, code as o } from "@spscommerce/utils";
6
6
  import { SpsInputGroup as re, SpsCheckbox as ne, SpsDropdown as se, SpsForm as oe, SpsFocusedTask as le, SpsTable as ce, SpsTableHead as ie, SpsTableHeader as A, SpsTableBody as de, SpsTableRow as v, SpsTableCell as s } from "@spscommerce/ds-react";
7
7
  import { sprinkles as me } from "@sps-woodland/tokens";
8
- var ue = "_1gxdcgc1", he = "_1gxdcgc8", pe = "_1gxdcgc7", Se = "_1gxdcgc2", fe = "_1gxdcgc5", ve = "_1gxdcgc6", be = "_1gxdcgc4", Be = "_1gxdcgc0", ge = "_1gxdcgc3";
9
- function R({
8
+ var ue = "_1gxdcgc1", pe = "_1gxdcgc8", he = "_1gxdcgc7", Se = "_1gxdcgc2", fe = "_1gxdcgc5", ve = "_1gxdcgc6", be = "_1gxdcgc4", Be = "_1gxdcgc0", ge = "_1gxdcgc3";
9
+ function F({
10
10
  results: t,
11
11
  selections: a,
12
12
  zeroStateText: r,
13
13
  onClear: n,
14
14
  className: l,
15
15
  children: m,
16
- ...p
16
+ ...h
17
17
  }) {
18
- const { t: c } = e.useContext(w), u = a ? Object.keys(a).reduce((h, i) => (a[i].length > 0 && (h[i] = a[i]), h), {}) : {};
19
- return /* @__PURE__ */ e.createElement("div", { className: ue, ...p }, t != null && /* @__PURE__ */ e.createElement("div", { className: Se }, /* @__PURE__ */ e.createElement("span", null, c("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, { className: ge, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: be }, Object.keys(u).length > 0 ? Object.keys(u).map((h, i) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: i, className: fe }, h, ":"), u[h].map((B, T) => /* @__PURE__ */ e.createElement(C, { className: ve, key: T, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", { className: pe }, /* @__PURE__ */ e.createElement(g, { className: he, kind: "link", onClick: n }, c("design-system:searchResultsBar.clearResults"))));
18
+ const { t: c } = e.useContext(w), u = a ? Object.keys(a).reduce((p, i) => (a[i].length > 0 && (p[i] = a[i]), p), {}) : {};
19
+ return /* @__PURE__ */ e.createElement("div", { className: ue, ...h }, t != null && /* @__PURE__ */ e.createElement("div", { className: Se }, /* @__PURE__ */ e.createElement("span", null, c("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, { className: ge, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: be }, Object.keys(u).length > 0 ? Object.keys(u).map((p, i) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: i, className: fe }, p, ":"), u[p].map((B, T) => /* @__PURE__ */ e.createElement(C, { className: ve, key: T, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", { className: he }, /* @__PURE__ */ e.createElement(g, { className: pe, kind: "link", onClick: n }, c("design-system:searchResultsBar.clearResults"))));
20
20
  }
21
- b.set(R, {
21
+ b.set(F, {
22
22
  name: "Search Results Bar",
23
23
  props: {
24
24
  results: { type: "number | null" },
@@ -66,9 +66,9 @@ var Ee = (t, a, r) => {
66
66
  }, j = (t) => (a) => {
67
67
  var r = t.defaultClassName, n = G(G({}, t.defaultVariants), a);
68
68
  for (var l in n) {
69
- var m, p = (m = n[l]) !== null && m !== void 0 ? m : t.defaultVariants[l];
70
- if (p != null) {
71
- var c = p;
69
+ var m, h = (m = n[l]) !== null && m !== void 0 ? m : t.defaultVariants[l];
70
+ if (h != null) {
71
+ var c = h;
72
72
  typeof c == "boolean" && (c = c === !0 ? "true" : "false");
73
73
  var u = (
74
74
  // @ts-expect-error
@@ -77,11 +77,11 @@ var Ee = (t, a, r) => {
77
77
  u && (r += " " + u);
78
78
  }
79
79
  }
80
- for (var [h, i] of t.compoundVariants)
81
- Ee(h, n, t.defaultVariants) && (r += " " + i);
80
+ for (var [p, i] of t.compoundVariants)
81
+ Ee(p, n, t.defaultVariants) && (r += " " + i);
82
82
  return r;
83
- }, Le = "_9h4p70e", ye = j({ defaultClassName: "_9h4p701", variantClassNames: { pinned: { true: "_9h4p702", false: "_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), xe = "_9h4p709", Ae = "_9h4p70a", Ce = "_9h4p707", we = "_9h4p708", Re = "_9h4p704", U = "_9h4p70b", Fe = "_9h4p706", Me = "_9h4p70d", Ie = "_9h4p70c", ke = "_9h4p705", Oe = "_9h4p70f";
84
- function Ne({
83
+ }, Le = "_9h4p70e", ye = j({ defaultClassName: "_9h4p701", variantClassNames: { pinned: { true: "_9h4p702", false: "_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), xe = "_9h4p709", Ae = "_9h4p70a", Ce = "_9h4p707", we = "_9h4p708", Fe = "_9h4p704", U = "_9h4p70b", Re = "_9h4p706", Me = "_9h4p70d", Ie = "_9h4p70c", Oe = "_9h4p705", ke = "_9h4p70f";
84
+ function Ve({
85
85
  children: t
86
86
  }) {
87
87
  const a = Q(
@@ -94,16 +94,16 @@ function Ne({
94
94
  );
95
95
  return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
96
96
  }
97
- function F({
97
+ function R({
98
98
  onSubmit: t,
99
99
  children: a
100
100
  }) {
101
101
  function r(n) {
102
102
  n.preventDefault(), t && t(n);
103
103
  }
104
- return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Ie, noValidate: !0 }, /* @__PURE__ */ e.createElement(re, { className: Me }, /* @__PURE__ */ e.createElement(Ne, null, a)));
104
+ return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Ie, noValidate: !0 }, /* @__PURE__ */ e.createElement(re, { className: Me }, /* @__PURE__ */ e.createElement(Ve, null, a)));
105
105
  }
106
- b.set(F, {
106
+ b.set(R, {
107
107
  name: "ListBarSearch",
108
108
  props: {
109
109
  onSubmit: { type: "FormEventHandler" }
@@ -124,10 +124,10 @@ function K({
124
124
  onToolbarPinned: n,
125
125
  selectable: l,
126
126
  isSelected: m,
127
- isIndeterminate: p,
127
+ isIndeterminate: h,
128
128
  disableSelection: c = !1,
129
129
  onSelectionChange: u,
130
- pinResultsBar: h,
130
+ pinResultsBar: p,
131
131
  pinToolbar: i = !0,
132
132
  children: B,
133
133
  className: T,
@@ -135,14 +135,14 @@ function K({
135
135
  }) {
136
136
  const { t: W } = e.useContext(w);
137
137
  let y = null;
138
- const [S, k] = e.useState(!1), E = e.useRef(null), f = e.useRef(null), { "data-testid": O } = I, N = ae(() => {
138
+ const [S, O] = e.useState(!1), E = e.useRef(null), f = e.useRef(null), { "data-testid": k } = I, V = ae(() => {
139
139
  if (E.current && i) {
140
140
  const d = E.current.getBoundingClientRect();
141
- d && d.height > 0 && d.top <= 60 && (typeof y == "number" ? window.scrollY < y && (y = null, k(!1)) : (y = window.scrollY, k(!0), a && a(!1)));
141
+ d && d.height > 0 && d.top <= 60 && (typeof y == "number" ? window.scrollY < y && (y = null, O(!1)) : (y = window.scrollY, O(!0), a && a(!1)));
142
142
  }
143
143
  });
144
- e.useEffect(() => (window.addEventListener("scroll", N), () => {
145
- window.removeEventListener("scroll", N);
144
+ e.useEffect(() => (window.addEventListener("scroll", V), () => {
145
+ window.removeEventListener("scroll", V);
146
146
  }), []);
147
147
  const L = e.useRef();
148
148
  e.useLayoutEffect(() => {
@@ -170,38 +170,38 @@ function K({
170
170
  z(S);
171
171
  }, [S]);
172
172
  const [
173
- V,
173
+ N,
174
174
  Z,
175
175
  J,
176
176
  [D],
177
177
  _
178
178
  ] = X(B, [
179
- { type: F },
180
- { type: M },
181
179
  { type: R },
180
+ { type: M },
181
+ { type: F },
182
182
  {
183
183
  custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
184
184
  }
185
185
  ]);
186
- return /* @__PURE__ */ e.createElement("div", { className: x(T), ref: f, ...I }, /* @__PURE__ */ e.createElement("div", { className: ye({ pinned: S }), ref: E }, D ? $(D, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Re }, !!l && /* @__PURE__ */ e.createElement("div", { className: ke }, /* @__PURE__ */ e.createElement(
186
+ return /* @__PURE__ */ e.createElement("div", { className: x(T), ref: f, ...I }, /* @__PURE__ */ e.createElement("div", { className: ye({ pinned: S }), ref: E }, D ? $(D, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Fe }, !!l && /* @__PURE__ */ e.createElement("div", { className: Oe }, /* @__PURE__ */ e.createElement(
187
187
  ne,
188
188
  {
189
189
  checked: m,
190
190
  disabled: c,
191
- indeterminate: p,
191
+ indeterminate: h,
192
192
  onChange: () => {
193
193
  u == null || u(!m);
194
194
  }
195
195
  }
196
- )), /* @__PURE__ */ e.createElement("div", { className: Fe }, !r && V, !r && Z, V.length > 0 && t && /* @__PURE__ */ e.createElement(
196
+ )), /* @__PURE__ */ e.createElement("div", { className: Re }, !r && N, !r && Z, N.length > 0 && t && /* @__PURE__ */ e.createElement(
197
197
  "div",
198
198
  {
199
199
  className: Ce,
200
- "data-testid": `${O}__advanced-search`
200
+ "data-testid": `${k}__advanced-search`
201
201
  },
202
202
  /* @__PURE__ */ e.createElement("div", { className: we }, /* @__PURE__ */ e.createElement(g, { kind: "link", onClick: Y }, W("design-system:listToolbar.advancedSearchToggle"))),
203
- (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className: xe, kind: "info", "data-testid": `${O}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
204
- ), r && /* @__PURE__ */ e.createElement("div", { className: Ae }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: U }, /* @__PURE__ */ e.createElement(ee.Provider, { value: { fixed: !0 } }, _)) : /* @__PURE__ */ e.createElement("div", { className: U }, _)), /* @__PURE__ */ e.createElement("div", { className: Be }, (!S || S && h) && J))));
203
+ (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className: xe, kind: "info", "data-testid": `${k}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
204
+ ), r && /* @__PURE__ */ e.createElement("div", { className: Ae }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: U }, /* @__PURE__ */ e.createElement(ee.Provider, { value: { fixed: !0 } }, _)) : /* @__PURE__ */ e.createElement("div", { className: U }, _)), /* @__PURE__ */ e.createElement("div", { className: Be }, (!S || S && p) && J))));
205
205
  }
206
206
  b.set(K, {
207
207
  name: "ListBar",
@@ -229,7 +229,7 @@ function q({
229
229
  className: l,
230
230
  ...m
231
231
  }) {
232
- const p = (t || []).map((c) => [
232
+ const h = (t || []).map((c) => [
233
233
  { label: c.label, icon: c.icon },
234
234
  () => {
235
235
  r && r(c);
@@ -238,10 +238,10 @@ function q({
238
238
  return /* @__PURE__ */ e.createElement(
239
239
  se,
240
240
  {
241
- className: x(l, Oe),
241
+ className: x(l, ke),
242
242
  icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
243
243
  label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
244
- options: p
244
+ options: h
245
245
  }
246
246
  );
247
247
  }
@@ -254,7 +254,7 @@ b.set(q, {
254
254
  defaultOption: { type: "SortOption" }
255
255
  }
256
256
  });
257
- var Ve = j({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), De = "q4fj414", _e = "q4fj415", Pe = "q4fj413";
257
+ var Ne = j({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), De = "q4fj414", _e = "q4fj415", Pe = "q4fj413";
258
258
  function H({
259
259
  formArray: t,
260
260
  formGroup: a,
@@ -262,17 +262,17 @@ function H({
262
262
  onSubmit: n,
263
263
  controlsDisabled: l,
264
264
  footerLinks: m,
265
- isOpen: p,
265
+ isOpen: h,
266
266
  onClear: c,
267
267
  className: u,
268
- children: h,
268
+ children: p,
269
269
  ...i
270
270
  }) {
271
271
  const { t: B } = e.useContext(w);
272
272
  function T() {
273
273
  c && c();
274
274
  }
275
- return /* @__PURE__ */ e.createElement("div", { className: x(Ve({ open: p })), ...i }, /* @__PURE__ */ e.createElement(oe, { onSubmit: n, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: Pe }, h), /* @__PURE__ */ e.createElement("div", { className: De }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, te(m)), /* @__PURE__ */ e.createElement("div", { className: _e }, /* @__PURE__ */ e.createElement(
275
+ return /* @__PURE__ */ e.createElement("div", { className: x(Ne({ open: h })), ...i }, /* @__PURE__ */ e.createElement(oe, { onSubmit: n, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: Pe }, p), /* @__PURE__ */ e.createElement("div", { className: De }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, te(m)), /* @__PURE__ */ e.createElement("div", { className: _e }, /* @__PURE__ */ e.createElement(
276
276
  g,
277
277
  {
278
278
  kind: "default",
@@ -579,7 +579,7 @@ function Ue() {
579
579
  }
580
580
  const je = {
581
581
  description: () => /* @__PURE__ */ e.createElement("p", null, "The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),
582
- components: [K, F, M, q],
582
+ components: [K, R, M, q],
583
583
  examples: {
584
584
  general: {
585
585
  label: "General Usage",
@@ -732,6 +732,47 @@ const je = {
732
732
  }
733
733
  `
734
734
  },
735
+ multiValue: {
736
+ description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Search + Select"), /* @__PURE__ */ e.createElement("p", null, "Search + Select with a Multi-Value Text Input")),
737
+ react: o`
738
+ import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
739
+ import { Button } from "@sps-woodland/buttons";
740
+ import { SpsSelect, SpsTextInput } from "@spscommerce/ds-react";
741
+
742
+ function Component() {
743
+ const filterKeys = ["Document Type", "Sender Name", "Receiver Name"];
744
+
745
+ const { formValue, formMeta, updateForm } = useSpsForm({
746
+ searchText: "",
747
+ filterOption: filterKeys[0],
748
+ });
749
+
750
+ function handleSearch(event) {
751
+ console.log(event, formValue.searchText)
752
+ }
753
+
754
+ return (
755
+ <ListBar>
756
+ <ListBarSearch onSubmit={handleSearch}>
757
+ <SpsSelect
758
+ options={filterKeys}
759
+ formMeta={formMeta.fields.filterOption}
760
+ value={formValue.filterOption}
761
+ notClearable
762
+ />
763
+ <SpsMultiValueTextInput
764
+ value={formValue.searchText}
765
+ formMeta={formMeta.fields.searchText}
766
+ placeholder="Search fields"
767
+ isSingleLine={true}
768
+ />
769
+ <Button kind="icon" icon="search" type="submit" />
770
+ </ListBarSearch>
771
+ </ListBar>
772
+ )
773
+ }
774
+ `
775
+ },
735
776
  filter: {
736
777
  description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Filter"), /* @__PURE__ */ e.createElement("p", null, "Use Filter to find list item(s) starting from a populated list.")),
737
778
  react: o`
@@ -1476,7 +1517,7 @@ const je = {
1476
1517
  }
1477
1518
  }
1478
1519
  }, Ke = {
1479
- components: [R],
1520
+ components: [F],
1480
1521
  examples: {
1481
1522
  basic: {
1482
1523
  label: "Basic",
@@ -1708,11 +1749,11 @@ const je = {
1708
1749
  };
1709
1750
  export {
1710
1751
  H as AdvancedSearch,
1711
- Ne as InputGroupWrapper,
1752
+ Ve as InputGroupWrapper,
1712
1753
  K as ListBar,
1713
- F as ListBarSearch,
1754
+ R as ListBarSearch,
1714
1755
  M as ListBarSearchInfo,
1715
1756
  q as ListBarSortBy,
1716
1757
  Je as MANIFEST,
1717
- R as SearchResultsBar
1758
+ F as SearchResultsBar
1718
1759
  };
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- ._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}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._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}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._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}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._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}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._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}._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}._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}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._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}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._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}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.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}.q4fj411{display:block}.q4fj413{padding:1rem}.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}.q4fj415{text-align:right}.q4fj414>*{flex:1}
1
+ ._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}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._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}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._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}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._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}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-multi-select{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._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}._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}._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}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}._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}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._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}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.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}.q4fj411{display:block}.q4fj413{padding:1rem}.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}.q4fj415{text-align:right}.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.15.0",
4
+ "version": "8.16.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.15.0",
33
- "@sps-woodland/core": "8.15.0",
34
- "@sps-woodland/tabs": "8.15.0",
35
- "@sps-woodland/tags": "8.15.0",
36
- "@sps-woodland/tokens": "8.15.0",
37
- "@spscommerce/ds-react": "8.15.0"
32
+ "@sps-woodland/buttons": "8.16.0",
33
+ "@sps-woodland/core": "8.16.0",
34
+ "@sps-woodland/tabs": "8.16.0",
35
+ "@sps-woodland/tags": "8.16.0",
36
+ "@sps-woodland/tokens": "8.16.0",
37
+ "@spscommerce/ds-react": "8.16.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.15.0",
47
- "@sps-woodland/core": "8.15.0",
48
- "@sps-woodland/tabs": "8.15.0",
49
- "@sps-woodland/tags": "8.15.0",
50
- "@sps-woodland/tokens": "8.15.0",
51
- "@spscommerce/ds-react": "8.15.0",
52
- "@spscommerce/ds-shared": "8.15.0"
46
+ "@sps-woodland/buttons": "8.16.0",
47
+ "@sps-woodland/core": "8.16.0",
48
+ "@sps-woodland/tabs": "8.16.0",
49
+ "@sps-woodland/tags": "8.16.0",
50
+ "@sps-woodland/tokens": "8.16.0",
51
+ "@spscommerce/ds-react": "8.16.0",
52
+ "@spscommerce/ds-shared": "8.16.0"
53
53
  },
54
54
  "scripts": {
55
55
  "build": "pnpm run build:js && pnpm run build:types",