@sps-woodland/list-bar 8.1.4 → 8.1.6

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 (3) hide show
  1. package/lib/index.cjs.js +4 -4
  2. package/lib/index.es.js +110 -114
  3. package/package.json +14 -14
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=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"),Y=require("@sps-woodland/tokens");function z(t){if(t&&t.__esModule)return 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=z(W);var Z="_1gxdcgc1",J="_1gxdcgc8",Q="_1gxdcgc7",X="_1gxdcgc2",$="_1gxdcgc5",ee="_1gxdcgc6",te="_1gxdcgc4",ae="_1gxdcgc0",re="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:c}=e.useContext(l.I18nContext),S=a?Object.keys(a).reduce((d,p)=>(a[p].length>0&&(d[p]=a[p]),d),{}):{};return e.createElement("div",{className:Z,...h},t!=null&&e.createElement("div",{className:X},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:re,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:te},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:$},d,":"),S[d].map((b,T)=>e.createElement(A.Tag,{className:ee,key:T,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||c("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:Q},e.createElement(B.Button,{className:J,kind:"link",onClick:s},c("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 ne(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function V(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function _(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?V(Object(n),!0).forEach(function(s){ne(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):V(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var se=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},P=t=>a=>{var n=t.defaultClassName,s=_(_({},t.defaultVariants),a);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var c=h;typeof c=="boolean"&&(c=c===!0?"true":"false");var S=t.variantClassNames[i][c];S&&(n+=" "+S)}}for(var[d,p]of t.compoundVariants)se(d,s,t.defaultVariants)&&(n+=" "+p);return n},oe="_9h4p70e",le=P({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ce="_9h4p709",ie="_9h4p70a",de="_9h4p707",ue="_9h4p708",me="_9h4p704",D="_9h4p70b",pe="_9h4p706",he="_9h4p70d",Se="_9h4p70c",fe="_9h4p705",ve="_9h4p70f";function G({children:t}){const a=l.modChildren(t,n=>n.type===B.Button?[{className:l.cl(n.props.className,oe)}]:[]);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:Se,noValidate:!0},e.createElement(r.SpsInputGroup,{className:he},e.createElement(G,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:i,isSelected:m,isIndeterminate:h,onSelectionChange:c,pinResultsBar:S,pinToolbar:d=!0,children:p,className:b,...T}){const{t:j}=e.useContext(l.I18nContext);let L=null;const[f,M]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),I=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,M(!1)):(L=window.scrollY,M(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",I),()=>{window.removeEventListener("scroll",I)}),[]);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 q(){a&&a(!(t!=null&&t.isOpen))}function U(u){s&&s(u)}e.useEffect(()=>{U(f)},[f]);const[O,H,K,[k],N]=l.selectChildren(p,[{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(b),ref:v,...T},e.createElement("div",{className:le({pinned:f}),ref:g},k?l.addProps(k,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:me},!!i&&e.createElement("div",{className:fe},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:pe},!n&&O,!n&&H,O.length>0&&t&&e.createElement("div",{className:de},e.createElement("div",{className:ue},e.createElement(B.Button,{kind:"link",onClick:q},j("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:ce,kind:"info"},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ie},n)),f?e.createElement("div",{className:D},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},N)):e.createElement("div",{className:D},N)),e.createElement("div",{className:ae},(!f||f&&S)&&K))))}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"},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:i,...m}){const h=(t||[]).map(c=>[{label:c.label,icon:c.icon},()=>{n&&n(c)}]);return e.createElement(r.SpsDropdown,{className:l.cl(i,ve),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:h})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var be=P({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Be="q4fj414",Te="q4fj415",ge="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:c,className:S,children:d,...p}){const{t:b}=e.useContext(l.I18nContext);function T(){c&&c()}return e.createElement("div",{className:l.cl(be({open:h})),...p},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:ge},d),e.createElement("div",{className:Be},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(B.Button,{kind:"default",type:"button",className:Y.sprinkles({mr:"sm"}),onClick:T,disabled:i},b("design-system:advancedSearch.clear")),e.createElement(B.Button,{kind:"key",type:"submit",disabled:i},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 Ee={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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Y=require("react"),l=require("@sps-woodland/core"),T=require("@sps-woodland/buttons"),A=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),z=require("@sps-woodland/tokens");function Z(t){if(t&&t.__esModule)return 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=Z(Y);var J="_1gxdcgc1",Q="_1gxdcgc8",X="_1gxdcgc7",$="_1gxdcgc2",ee="_1gxdcgc5",te="_1gxdcgc6",ae="_1gxdcgc4",re="_1gxdcgc0",ne="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:c}=e.useContext(l.I18nContext),S=a?Object.keys(a).reduce((d,p)=>(a[p].length>0&&(d[p]=a[p]),d),{}):{};return e.createElement("div",{className:J,...h},t!=null&&e.createElement("div",{className:$},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:ae},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:ee},d,":"),S[d].map((b,B)=>e.createElement(A.Tag,{className:te,key:B,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||c("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:X},e.createElement(T.Button,{className:Q,kind:"link",onClick:s},c("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 se(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(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function D(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?_(Object(n),!0).forEach(function(s){se(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 oe=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},G=t=>a=>{var n=t.defaultClassName,s=D(D({},t.defaultVariants),a);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var c=h;typeof c=="boolean"&&(c=c===!0?"true":"false");var S=t.variantClassNames[i][c];S&&(n+=" "+S)}}for(var[d,p]of t.compoundVariants)oe(d,s,t.defaultVariants)&&(n+=" "+p);return n},le="_9h4p70e",ce=G({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ie="_9h4p709",de="_9h4p70a",ue="_9h4p707",me="_9h4p708",pe="_9h4p704",P="_9h4p70b",he="_9h4p706",Se="_9h4p70d",fe="_9h4p70c",ve="_9h4p705",be="_9h4p70f";function j({children:t}){const a=l.modChildren(t,n=>n.type===T.Button?[{className:l.cl(n.props.className,le)}]:[]);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:fe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:Se},e.createElement(j,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:i,isSelected:m,isIndeterminate:h,onSelectionChange:c,pinResultsBar:S,pinToolbar:d=!0,children:p,className:b,...B}){const{t:q}=e.useContext(l.I18nContext);let L=null;const[f,M]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":I}=B,O=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,M(!1)):(L=window.scrollY,M(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",O),()=>{window.removeEventListener("scroll",O)}),[]);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 U(){a&&a(!(t!=null&&t.isOpen))}function H(u){s&&s(u)}e.useEffect(()=>{H(f)},[f]);const[k,K,W,[N],V]=l.selectChildren(p,[{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(b),ref:v,...B},e.createElement("div",{className:ce({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:pe},!!i&&e.createElement("div",{className:ve},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:he},!n&&k,!n&&K,k.length>0&&t&&e.createElement("div",{className:ue,"data-testid":`${I}__advanced-search`},e.createElement("div",{className:me},e.createElement(T.Button,{kind:"link",onClick:U},q("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:ie,kind:"info","data-testid":`${I}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:de},n)),f?e.createElement("div",{className:P},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:P},V)),e.createElement("div",{className:re},(!f||f&&S)&&W))))}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"},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:i,...m}){const h=(t||[]).map(c=>[{label:c.label,icon:c.icon},()=>{n&&n(c)}]);return e.createElement(r.SpsDropdown,{className:l.cl(i,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:h})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Be=G({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Te="q4fj414",ge="q4fj415",Ee="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:c,className:S,children:d,...p}){const{t:b}=e.useContext(l.I18nContext);function B(){c&&c()}return e.createElement("div",{className:l.cl(Be({open:h})),...p},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Ee},d),e.createElement("div",{className:Te},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:ge},e.createElement(T.Button,{kind:"default",type:"button",className:z.sprinkles({mr:"sm"}),onClick:B,disabled:i},b("design-system:advancedSearch.clear")),e.createElement(T.Button,{kind:"key",type:"submit",disabled:i},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 Le={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 Le(){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 ye={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(Le,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 ye(){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(T.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,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(ye,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() {
@@ -844,7 +844,7 @@
844
844
  </ListBar>
845
845
  )
846
846
  }
847
- `}}}}},Ce={components:[y],examples:{basic:{label:"Basic",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The SearchResultsBar should be used with List Bar and Advanced Search."),e.createElement("p",null,"For more examples go to the Advanced Search section on the"," ",e.createElement(t,{to:"list-bar"},"List Bar")," page.")),examples:{basic:{react:o.code`
847
+ `}}}}},xe={components:[y],examples:{basic:{label:"Basic",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"The SearchResultsBar should be used with List Bar and Advanced Search."),e.createElement("p",null,"For more examples go to the Advanced Search section on the"," ",e.createElement(t,{to:"list-bar"},"List Bar")," page.")),examples:{basic:{react:o.code`
848
848
  import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
849
849
  import { Button } from "@sps-woodland/buttons";
850
850
  import { SpsTextInput } from "@spscommerce/ds-react";
@@ -1044,4 +1044,4 @@
1044
1044
  </>
1045
1045
  )
1046
1046
  }
1047
- `}}}}},xe={"Advanced Search":Ee,"List Bar":ye,"Search Results Bar":Ce};exports.AdvancedSearch=F;exports.InputGroupWrapper=G;exports.ListBar=w;exports.ListBarSearch=C;exports.ListBarSearchInfo=x;exports.ListBarSortBy=R;exports.MANIFEST=xe;exports.SearchResultsBar=y;
1047
+ `}}}}},Ae={"Advanced Search":Le,"List Bar":Ce,"Search Results Bar":xe};exports.AdvancedSearch=F;exports.InputGroupWrapper=j;exports.ListBar=w;exports.ListBarSearch=C;exports.ListBarSearchInfo=x;exports.ListBarSortBy=R;exports.MANIFEST=Ae;exports.SearchResultsBar=y;
package/lib/index.es.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as e from "react";
2
- import { Metadata as b, I18nContext as w, modChildren as Z, cl as x, selectChildren as J, addProps as Q, PortalContext as X, contentOf as $ } from "@sps-woodland/core";
3
- import { Button as g } from "@sps-woodland/buttons";
2
+ import { Metadata as b, I18nContext as w, modChildren as J, cl as x, selectChildren as Q, addProps as X, PortalContext as $, contentOf as ee } from "@sps-woodland/core";
3
+ import { Button as T } from "@sps-woodland/buttons";
4
4
  import { Tag as C } from "@sps-woodland/tags";
5
- import { lockToAnimationFrames as ee, code as o } from "@spscommerce/utils";
6
- import { SpsInputGroup as te, SpsCheckbox as ae, SpsDropdown as re, SpsForm as ne, SpsFocusedTask as se, SpsTable as oe, SpsTableHead as le, SpsTableHeader as A, SpsTableBody as ce, SpsTableRow as v, SpsTableCell as s } from "@spscommerce/ds-react";
7
- import { sprinkles as ie } from "@sps-woodland/tokens";
8
- var de = "_1gxdcgc1", me = "_1gxdcgc8", ue = "_1gxdcgc7", he = "_1gxdcgc2", pe = "_1gxdcgc5", Se = "_1gxdcgc6", fe = "_1gxdcgc4", ve = "_1gxdcgc0", be = "_1gxdcgc3";
5
+ import { lockToAnimationFrames as te, code as o } from "@spscommerce/utils";
6
+ import { SpsInputGroup as ae, SpsCheckbox as re, SpsDropdown as ne, SpsForm as se, SpsFocusedTask as oe, SpsTable as le, SpsTableHead as ce, SpsTableHeader as A, SpsTableBody as ie, SpsTableRow as v, SpsTableCell as s } from "@spscommerce/ds-react";
7
+ import { sprinkles as de } from "@sps-woodland/tokens";
8
+ var me = "_1gxdcgc1", ue = "_1gxdcgc8", he = "_1gxdcgc7", pe = "_1gxdcgc2", Se = "_1gxdcgc5", fe = "_1gxdcgc6", ve = "_1gxdcgc4", be = "_1gxdcgc0", Be = "_1gxdcgc3";
9
9
  function R({
10
10
  results: t,
11
11
  selections: a,
@@ -17,28 +17,28 @@ function R({
17
17
  }) {
18
18
  const { t: l } = e.useContext(w), p = a ? Object.keys(a).reduce((i, u) => (a[u].length > 0 && (i[u] = a[u]), i), {}) : {};
19
19
  return /* @__PURE__ */ e.createElement("div", {
20
- className: de,
20
+ className: me,
21
21
  ...h
22
22
  }, t != null && /* @__PURE__ */ e.createElement("div", {
23
- className: he
23
+ className: pe
24
24
  }, /* @__PURE__ */ e.createElement("span", null, l("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, {
25
- className: be,
25
+ className: Be,
26
26
  kind: "info"
27
27
  }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", {
28
- className: fe
28
+ className: ve
29
29
  }, Object.keys(p).length > 0 ? Object.keys(p).map((i, u) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
30
30
  key: u,
31
- className: pe
32
- }, i, ":"), p[i].map((B, T) => /* @__PURE__ */ e.createElement(C, {
33
- className: Se,
34
- key: T,
31
+ className: Se
32
+ }, i, ":"), p[i].map((B, g) => /* @__PURE__ */ e.createElement(C, {
33
+ className: fe,
34
+ key: g,
35
35
  kind: "key"
36
36
  }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", {
37
37
  className: "font-italic"
38
38
  }, r || l("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", {
39
- className: ue
40
- }, /* @__PURE__ */ e.createElement(g, {
41
- className: me,
39
+ className: he
40
+ }, /* @__PURE__ */ e.createElement(T, {
41
+ className: ue,
42
42
  kind: "link",
43
43
  onClick: n
44
44
  }, l("design-system:searchResultsBar.clearResults"))));
@@ -52,7 +52,7 @@ b.set(R, {
52
52
  onClear: { type: "() => void" }
53
53
  }
54
54
  });
55
- function Be(t, a, r) {
55
+ function ge(t, a, r) {
56
56
  return a in t ? Object.defineProperty(t, a, {
57
57
  value: r,
58
58
  enumerable: !0,
@@ -60,7 +60,7 @@ function Be(t, a, r) {
60
60
  writable: !0
61
61
  }) : t[a] = r, t;
62
62
  }
63
- function _(t, a) {
63
+ function D(t, a) {
64
64
  var r = Object.keys(t);
65
65
  if (Object.getOwnPropertySymbols) {
66
66
  var n = Object.getOwnPropertySymbols(t);
@@ -70,26 +70,26 @@ function _(t, a) {
70
70
  }
71
71
  return r;
72
72
  }
73
- function D(t) {
73
+ function P(t) {
74
74
  for (var a = 1; a < arguments.length; a++) {
75
75
  var r = arguments[a] != null ? arguments[a] : {};
76
- a % 2 ? _(Object(r), !0).forEach(function(n) {
77
- Be(t, n, r[n]);
78
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : _(Object(r)).forEach(function(n) {
76
+ a % 2 ? D(Object(r), !0).forEach(function(n) {
77
+ ge(t, n, r[n]);
78
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : D(Object(r)).forEach(function(n) {
79
79
  Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
80
80
  });
81
81
  }
82
82
  return t;
83
83
  }
84
- var ge = (t, a, r) => {
84
+ var Te = (t, a, r) => {
85
85
  for (var n of Object.keys(t)) {
86
86
  var c;
87
87
  if (t[n] !== ((c = a[n]) !== null && c !== void 0 ? c : r[n]))
88
88
  return !1;
89
89
  }
90
90
  return !0;
91
- }, G = (t) => (a) => {
92
- var r = t.defaultClassName, n = D(D({}, t.defaultVariants), a);
91
+ }, U = (t) => (a) => {
92
+ var r = t.defaultClassName, n = P(P({}, t.defaultVariants), a);
93
93
  for (var c in n) {
94
94
  var m, h = (m = n[c]) !== null && m !== void 0 ? m : t.defaultVariants[c];
95
95
  if (h != null) {
@@ -100,17 +100,17 @@ var ge = (t, a, r) => {
100
100
  }
101
101
  }
102
102
  for (var [i, u] of t.compoundVariants)
103
- ge(i, n, t.defaultVariants) && (r += " " + u);
103
+ Te(i, n, t.defaultVariants) && (r += " " + u);
104
104
  return r;
105
- }, Te = "_9h4p70e", Ee = G({ defaultClassName: "_9h4p701", variantClassNames: { pinned: { true: "_9h4p702", false: "_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), Le = "_9h4p709", ye = "_9h4p70a", xe = "_9h4p707", Ae = "_9h4p708", Ce = "_9h4p704", P = "_9h4p70b", we = "_9h4p706", Re = "_9h4p70d", Fe = "_9h4p70c", Me = "_9h4p705", Ie = "_9h4p70f";
106
- function ke({
105
+ }, Ee = "_9h4p70e", Le = U({ defaultClassName: "_9h4p701", variantClassNames: { pinned: { true: "_9h4p702", false: "_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), ye = "_9h4p709", xe = "_9h4p70a", Ae = "_9h4p707", Ce = "_9h4p708", we = "_9h4p704", G = "_9h4p70b", Re = "_9h4p706", Fe = "_9h4p70d", Me = "_9h4p70c", Ie = "_9h4p705", ke = "_9h4p70f";
106
+ function Oe({
107
107
  children: t
108
108
  }) {
109
- const a = Z(
109
+ const a = J(
110
110
  t,
111
- (r) => r.type === g ? [
111
+ (r) => r.type === T ? [
112
112
  {
113
- className: x(r.props.className, Te)
113
+ className: x(r.props.className, Ee)
114
114
  }
115
115
  ] : []
116
116
  );
@@ -125,11 +125,11 @@ function F({
125
125
  }
126
126
  return /* @__PURE__ */ e.createElement("form", {
127
127
  onSubmit: r,
128
- className: Fe,
128
+ className: Me,
129
129
  noValidate: !0
130
- }, /* @__PURE__ */ e.createElement(te, {
131
- className: Re
132
- }, /* @__PURE__ */ e.createElement(ke, null, a)));
130
+ }, /* @__PURE__ */ e.createElement(ae, {
131
+ className: Fe
132
+ }, /* @__PURE__ */ e.createElement(Oe, null, a)));
133
133
  }
134
134
  b.set(F, {
135
135
  name: "ListBarSearch",
@@ -145,7 +145,7 @@ function M({
145
145
  b.set(M, {
146
146
  name: "ListBarSearchInfo"
147
147
  });
148
- function U({
148
+ function j({
149
149
  advancedSearch: t,
150
150
  onToggleAdvancedSearch: a,
151
151
  title: r,
@@ -158,18 +158,18 @@ function U({
158
158
  pinToolbar: i = !0,
159
159
  children: u,
160
160
  className: B,
161
- ...T
161
+ ...g
162
162
  }) {
163
- const { t: q } = e.useContext(w);
163
+ const { t: H } = e.useContext(w);
164
164
  let y = null;
165
- const [S, I] = e.useState(!1), E = e.useRef(null), f = e.useRef(null), k = ee(() => {
165
+ const [S, I] = e.useState(!1), E = e.useRef(null), f = e.useRef(null), { "data-testid": k } = g, O = te(() => {
166
166
  if (E.current && i) {
167
167
  const d = E.current.getBoundingClientRect();
168
168
  d && d.height > 0 && d.top <= 60 && (typeof y == "number" ? window.scrollY < y && (y = null, I(!1)) : (y = window.scrollY, I(!0), a && a(!1)));
169
169
  }
170
170
  });
171
- e.useEffect(() => (window.addEventListener("scroll", k), () => {
172
- window.removeEventListener("scroll", k);
171
+ e.useEffect(() => (window.addEventListener("scroll", O), () => {
172
+ window.removeEventListener("scroll", O);
173
173
  }), []);
174
174
  const L = e.useRef();
175
175
  e.useLayoutEffect(() => {
@@ -187,22 +187,16 @@ function U({
187
187
  }
188
188
  }
189
189
  }, [S]);
190
- function H() {
190
+ function W() {
191
191
  a && a(!(t != null && t.isOpen));
192
192
  }
193
- function W(d) {
193
+ function Y(d) {
194
194
  n && n(d);
195
195
  }
196
196
  e.useEffect(() => {
197
- W(S);
197
+ Y(S);
198
198
  }, [S]);
199
- const [
200
- O,
201
- Y,
202
- z,
203
- [N],
204
- V
205
- ] = J(u, [
199
+ const [N, z, Z, [V], _] = Q(u, [
206
200
  { type: F },
207
201
  { type: M },
208
202
  { type: R },
@@ -213,45 +207,47 @@ function U({
213
207
  return /* @__PURE__ */ e.createElement("div", {
214
208
  className: x(B),
215
209
  ref: f,
216
- ...T
210
+ ...g
217
211
  }, /* @__PURE__ */ e.createElement("div", {
218
- className: Ee({ pinned: S }),
212
+ className: Le({ pinned: S }),
219
213
  ref: E
220
- }, N ? Q(N, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
221
- className: Ce
214
+ }, V ? X(V, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
215
+ className: we
222
216
  }, !!c && /* @__PURE__ */ e.createElement("div", {
223
- className: Me
224
- }, /* @__PURE__ */ e.createElement(ae, {
217
+ className: Ie
218
+ }, /* @__PURE__ */ e.createElement(re, {
225
219
  checked: m,
226
220
  indeterminate: h,
227
221
  onChange: () => {
228
222
  l == null || l(!m);
229
223
  }
230
224
  })), /* @__PURE__ */ e.createElement("div", {
231
- className: we
232
- }, !r && O, !r && Y, O.length > 0 && t && /* @__PURE__ */ e.createElement("div", {
233
- className: xe
225
+ className: Re
226
+ }, !r && N, !r && z, N.length > 0 && t && /* @__PURE__ */ e.createElement("div", {
227
+ className: Ae,
228
+ "data-testid": `${k}__advanced-search`
234
229
  }, /* @__PURE__ */ e.createElement("div", {
235
- className: Ae
236
- }, /* @__PURE__ */ e.createElement(g, {
230
+ className: Ce
231
+ }, /* @__PURE__ */ e.createElement(T, {
237
232
  kind: "link",
238
- onClick: H
239
- }, q("design-system:listToolbar.advancedSearchToggle"))), (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, {
240
- className: Le,
241
- kind: "info"
233
+ onClick: W
234
+ }, H("design-system:listToolbar.advancedSearchToggle"))), (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, {
235
+ className: ye,
236
+ kind: "info",
237
+ "data-testid": `${k}__entered-fields`
242
238
  }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))), r && /* @__PURE__ */ e.createElement("div", {
243
- className: ye
239
+ className: xe
244
240
  }, r)), S ? /* @__PURE__ */ e.createElement("div", {
245
- className: P
246
- }, /* @__PURE__ */ e.createElement(X.Provider, {
241
+ className: G
242
+ }, /* @__PURE__ */ e.createElement($.Provider, {
247
243
  value: { fixed: !0 }
248
- }, V)) : /* @__PURE__ */ e.createElement("div", {
249
- className: P
250
- }, V)), /* @__PURE__ */ e.createElement("div", {
251
- className: ve
252
- }, (!S || S && p) && z))));
244
+ }, _)) : /* @__PURE__ */ e.createElement("div", {
245
+ className: G
246
+ }, _)), /* @__PURE__ */ e.createElement("div", {
247
+ className: be
248
+ }, (!S || S && p) && Z))));
253
249
  }
254
- b.set(U, {
250
+ b.set(j, {
255
251
  name: "ListBar",
256
252
  props: {
257
253
  activeTab: { type: "Tab" },
@@ -268,7 +264,7 @@ b.set(U, {
268
264
  pinToolbar: { type: "boolean", default: "true" }
269
265
  }
270
266
  });
271
- function j({
267
+ function K({
272
268
  options: t,
273
269
  activeOption: a,
274
270
  onSortChange: r,
@@ -282,14 +278,14 @@ function j({
282
278
  r && r(l);
283
279
  }
284
280
  ]);
285
- return /* @__PURE__ */ e.createElement(re, {
286
- className: x(c, Ie),
281
+ return /* @__PURE__ */ e.createElement(ne, {
282
+ className: x(c, ke),
287
283
  icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
288
284
  label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
289
285
  options: h
290
286
  });
291
287
  }
292
- b.set(j, {
288
+ b.set(K, {
293
289
  name: "ListBarSortBy",
294
290
  props: {
295
291
  options: { type: "SortOption[]" },
@@ -298,8 +294,8 @@ b.set(j, {
298
294
  defaultOption: { type: "SortOption" }
299
295
  }
300
296
  });
301
- var Oe = G({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ne = "q4fj414", Ve = "q4fj415", _e = "q4fj413";
302
- function K({
297
+ var Ne = U({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ve = "q4fj414", _e = "q4fj415", De = "q4fj413";
298
+ function q({
303
299
  formArray: t,
304
300
  formGroup: a,
305
301
  formMeta: r,
@@ -313,38 +309,38 @@ function K({
313
309
  ...u
314
310
  }) {
315
311
  const { t: B } = e.useContext(w);
316
- function T() {
312
+ function g() {
317
313
  l && l();
318
314
  }
319
315
  return /* @__PURE__ */ e.createElement("div", {
320
- className: x(Oe({ open: h })),
316
+ className: x(Ne({ open: h })),
321
317
  ...u
322
- }, /* @__PURE__ */ e.createElement(ne, {
318
+ }, /* @__PURE__ */ e.createElement(se, {
323
319
  onSubmit: n,
324
320
  formArray: t,
325
321
  formGroup: a,
326
322
  formMeta: r
327
323
  }, /* @__PURE__ */ e.createElement("div", {
328
- className: _e
324
+ className: De
329
325
  }, i), /* @__PURE__ */ e.createElement("div", {
330
- className: Ne
326
+ className: Ve
331
327
  }, m && /* @__PURE__ */ e.createElement("div", {
332
328
  id: "footer_links"
333
- }, $(m)), /* @__PURE__ */ e.createElement("div", {
334
- className: Ve
335
- }, /* @__PURE__ */ e.createElement(g, {
329
+ }, ee(m)), /* @__PURE__ */ e.createElement("div", {
330
+ className: _e
331
+ }, /* @__PURE__ */ e.createElement(T, {
336
332
  kind: "default",
337
333
  type: "button",
338
- className: ie({ mr: "sm" }),
339
- onClick: T,
334
+ className: de({ mr: "sm" }),
335
+ onClick: g,
340
336
  disabled: c
341
- }, B("design-system:advancedSearch.clear")), /* @__PURE__ */ e.createElement(g, {
337
+ }, B("design-system:advancedSearch.clear")), /* @__PURE__ */ e.createElement(T, {
342
338
  kind: "key",
343
339
  type: "submit",
344
340
  disabled: c
345
341
  }, B("design-system:advancedSearch.search"))))));
346
342
  }
347
- b.set(K, {
343
+ b.set(q, {
348
344
  name: "Advanced Search",
349
345
  props: {
350
346
  formArray: { type: "SpsFormArray<any>" },
@@ -357,8 +353,8 @@ b.set(K, {
357
353
  onClear: { type: "() => void" }
358
354
  }
359
355
  });
360
- const De = {
361
- components: [K],
356
+ const Pe = {
357
+ components: [q],
362
358
  examples: {
363
359
  general: {
364
360
  label: "General Usage",
@@ -630,7 +626,7 @@ const De = {
630
626
  }
631
627
  }
632
628
  };
633
- function Pe() {
629
+ function Ge() {
634
630
  const [t, a] = e.useState(!1);
635
631
  function r() {
636
632
  a(!1);
@@ -638,19 +634,19 @@ function Pe() {
638
634
  function n() {
639
635
  a(!0);
640
636
  }
641
- return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(g, {
637
+ return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "The List Bar is divided into a number of different sections. It spans the entire width of the corresponding list."), /* @__PURE__ */ e.createElement(T, {
642
638
  kind: "link",
643
639
  onClick: n
644
- }, "View Content Order Example"), /* @__PURE__ */ e.createElement(se, {
640
+ }, "View Content Order Example"), /* @__PURE__ */ e.createElement(oe, {
645
641
  isOpen: t,
646
642
  onClose: r
647
643
  }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement("img", {
648
644
  src: "assets/images/list-toolbar-example.svg",
649
645
  alt: "A List Toolbar with labels on each section",
650
646
  className: "w-100 mb-3"
651
- }), /* @__PURE__ */ e.createElement(oe, null, /* @__PURE__ */ e.createElement(le, null, /* @__PURE__ */ e.createElement(A, {
647
+ }), /* @__PURE__ */ e.createElement(le, null, /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(A, {
652
648
  style: { width: "80px" }
653
- }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
649
+ }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
654
650
  className: "sps-tag sps-tag--info"
655
651
  }, "1")), /* @__PURE__ */ e.createElement(s, null, "Checkbox"), /* @__PURE__ */ e.createElement(s, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", {
656
652
  className: "sps-tag sps-tag--info"
@@ -672,9 +668,9 @@ function Pe() {
672
668
  wrap: 500
673
669
  }, "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."))))));
674
670
  }
675
- const Ge = {
671
+ const Ue = {
676
672
  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."),
677
- components: [U, F, M, j],
673
+ components: [j, F, M, K],
678
674
  examples: {
679
675
  general: {
680
676
  label: "General Usage",
@@ -682,7 +678,7 @@ const Ge = {
682
678
  },
683
679
  contentOrder: {
684
680
  label: "Content Order",
685
- description: /* @__PURE__ */ e.createElement(Pe, null)
681
+ description: /* @__PURE__ */ e.createElement(Ge, null)
686
682
  },
687
683
  checkbox: {
688
684
  label: "Checkbox",
@@ -1428,7 +1424,7 @@ const Ge = {
1428
1424
  }
1429
1425
  }
1430
1426
  }
1431
- }, Ue = {
1427
+ }, je = {
1432
1428
  components: [R],
1433
1429
  examples: {
1434
1430
  basic: {
@@ -1656,18 +1652,18 @@ const Ge = {
1656
1652
  }
1657
1653
  }
1658
1654
  }
1659
- }, ze = {
1660
- "Advanced Search": De,
1661
- "List Bar": Ge,
1662
- "Search Results Bar": Ue
1655
+ }, Ze = {
1656
+ "Advanced Search": Pe,
1657
+ "List Bar": Ue,
1658
+ "Search Results Bar": je
1663
1659
  };
1664
1660
  export {
1665
- K as AdvancedSearch,
1666
- ke as InputGroupWrapper,
1667
- U as ListBar,
1661
+ q as AdvancedSearch,
1662
+ Oe as InputGroupWrapper,
1663
+ j as ListBar,
1668
1664
  F as ListBarSearch,
1669
1665
  M as ListBarSearchInfo,
1670
- j as ListBarSortBy,
1671
- ze as MANIFEST,
1666
+ K as ListBarSortBy,
1667
+ Ze as MANIFEST,
1672
1668
  R as SearchResultsBar
1673
1669
  };
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.1.4",
4
+ "version": "8.1.6",
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": "^6.12.1",
30
30
  "react": "^16.9.0",
31
31
  "react-dom": "^16.9.0",
32
- "@sps-woodland/core": "8.1.4",
33
- "@sps-woodland/tokens": "8.1.4",
34
- "@sps-woodland/tabs": "8.1.4",
35
- "@sps-woodland/buttons": "8.1.4",
36
- "@sps-woodland/tags": "8.1.4",
37
- "@spscommerce/ds-react": "8.1.4"
32
+ "@sps-woodland/core": "8.1.6",
33
+ "@sps-woodland/tokens": "8.1.6",
34
+ "@sps-woodland/tabs": "8.1.6",
35
+ "@sps-woodland/buttons": "8.1.6",
36
+ "@sps-woodland/tags": "8.1.6",
37
+ "@spscommerce/ds-react": "8.1.6"
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/core": "8.1.4",
47
- "@sps-woodland/tokens": "8.1.4",
48
- "@sps-woodland/tabs": "8.1.4",
49
- "@sps-woodland/buttons": "8.1.4",
50
- "@sps-woodland/tags": "8.1.4",
51
- "@spscommerce/ds-react": "8.1.4",
52
- "@spscommerce/ds-shared": "8.1.4"
46
+ "@sps-woodland/core": "8.1.6",
47
+ "@sps-woodland/tokens": "8.1.6",
48
+ "@sps-woodland/tabs": "8.1.6",
49
+ "@sps-woodland/buttons": "8.1.6",
50
+ "@sps-woodland/tags": "8.1.6",
51
+ "@spscommerce/ds-react": "8.1.6",
52
+ "@spscommerce/ds-shared": "8.1.6"
53
53
  },
54
54
  "scripts": {
55
55
  "build": "pnpm run build:js && pnpm run build:types",