@sps-woodland/list-bar 8.8.8 → 8.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +4 -4
- package/lib/index.es.js +120 -111
- package/lib/list-bar/ListBar.d.ts +2 -1
- package/package.json +14 -14
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const 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){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 D(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?D(Object(n),!0).forEach(function(s){se(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):D(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=_(_({},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`
|
|
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`
|
|
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
|
|
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`
|
|
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
|
-
`}}}}},
|
|
847
|
+
`}}}}},Ae={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
|
-
`}}}}},
|
|
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;
|
package/lib/index.es.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b, I18nContext as w, modChildren as
|
|
3
|
-
import { Button as
|
|
2
|
+
import { Metadata as b, I18nContext as w, modChildren as Q, cl as x, selectChildren as X, addProps as $, PortalContext as ee, contentOf as te } from "@sps-woodland/core";
|
|
3
|
+
import { Button as g } from "@sps-woodland/buttons";
|
|
4
4
|
import { Tag as C } from "@sps-woodland/tags";
|
|
5
|
-
import { lockToAnimationFrames as
|
|
6
|
-
import { SpsInputGroup as
|
|
7
|
-
import { sprinkles as
|
|
8
|
-
var
|
|
5
|
+
import { lockToAnimationFrames as ae, code as o } from "@spscommerce/utils";
|
|
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
|
+
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
9
|
function R({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
12
12
|
zeroStateText: r,
|
|
13
13
|
onClear: n,
|
|
14
|
-
className:
|
|
14
|
+
className: l,
|
|
15
15
|
children: m,
|
|
16
|
-
...
|
|
16
|
+
...p
|
|
17
17
|
}) {
|
|
18
|
-
const { t:
|
|
19
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
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"))));
|
|
20
20
|
}
|
|
21
21
|
b.set(R, {
|
|
22
22
|
name: "Search Results Bar",
|
|
@@ -27,7 +27,7 @@ b.set(R, {
|
|
|
27
27
|
onClear: { type: "() => void" }
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
function
|
|
30
|
+
function Te(t, a, r) {
|
|
31
31
|
return a in t ? Object.defineProperty(t, a, {
|
|
32
32
|
value: r,
|
|
33
33
|
enumerable: !0,
|
|
@@ -35,60 +35,60 @@ function ge(t, a, r) {
|
|
|
35
35
|
writable: !0
|
|
36
36
|
}) : t[a] = r, t;
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function P(t, a) {
|
|
39
39
|
var r = Object.keys(t);
|
|
40
40
|
if (Object.getOwnPropertySymbols) {
|
|
41
41
|
var n = Object.getOwnPropertySymbols(t);
|
|
42
|
-
a && (n = n.filter(function(
|
|
43
|
-
return Object.getOwnPropertyDescriptor(t,
|
|
42
|
+
a && (n = n.filter(function(l) {
|
|
43
|
+
return Object.getOwnPropertyDescriptor(t, l).enumerable;
|
|
44
44
|
})), r.push.apply(r, n);
|
|
45
45
|
}
|
|
46
46
|
return r;
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function G(t) {
|
|
49
49
|
for (var a = 1; a < arguments.length; a++) {
|
|
50
50
|
var r = arguments[a] != null ? arguments[a] : {};
|
|
51
|
-
a % 2 ?
|
|
52
|
-
|
|
53
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) :
|
|
51
|
+
a % 2 ? P(Object(r), !0).forEach(function(n) {
|
|
52
|
+
Te(t, n, r[n]);
|
|
53
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : P(Object(r)).forEach(function(n) {
|
|
54
54
|
Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
57
|
return t;
|
|
58
58
|
}
|
|
59
|
-
var
|
|
59
|
+
var Ee = (t, a, r) => {
|
|
60
60
|
for (var n of Object.keys(t)) {
|
|
61
|
-
var
|
|
62
|
-
if (t[n] !== ((
|
|
61
|
+
var l;
|
|
62
|
+
if (t[n] !== ((l = a[n]) !== null && l !== void 0 ? l : r[n]))
|
|
63
63
|
return !1;
|
|
64
64
|
}
|
|
65
65
|
return !0;
|
|
66
|
-
},
|
|
67
|
-
var r = t.defaultClassName, n =
|
|
68
|
-
for (var
|
|
69
|
-
var m,
|
|
70
|
-
if (
|
|
71
|
-
var
|
|
72
|
-
typeof
|
|
73
|
-
var
|
|
66
|
+
}, j = (t) => (a) => {
|
|
67
|
+
var r = t.defaultClassName, n = G(G({}, t.defaultVariants), a);
|
|
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;
|
|
72
|
+
typeof c == "boolean" && (c = c === !0 ? "true" : "false");
|
|
73
|
+
var u = (
|
|
74
74
|
// @ts-expect-error
|
|
75
|
-
t.variantClassNames[
|
|
75
|
+
t.variantClassNames[l][c]
|
|
76
76
|
);
|
|
77
|
-
|
|
77
|
+
u && (r += " " + u);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
for (var [
|
|
81
|
-
|
|
80
|
+
for (var [h, i] of t.compoundVariants)
|
|
81
|
+
Ee(h, n, t.defaultVariants) && (r += " " + i);
|
|
82
82
|
return r;
|
|
83
|
-
},
|
|
84
|
-
function
|
|
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({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
87
|
-
const a =
|
|
87
|
+
const a = Q(
|
|
88
88
|
t,
|
|
89
|
-
(r) => r.type ===
|
|
89
|
+
(r) => r.type === g ? [
|
|
90
90
|
{
|
|
91
|
-
className: x(r.props.className,
|
|
91
|
+
className: x(r.props.className, Le)
|
|
92
92
|
}
|
|
93
93
|
] : []
|
|
94
94
|
);
|
|
@@ -101,7 +101,7 @@ function F({
|
|
|
101
101
|
function r(n) {
|
|
102
102
|
n.preventDefault(), t && t(n);
|
|
103
103
|
}
|
|
104
|
-
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className:
|
|
104
|
+
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Ie, noValidate: !0 }, /* @__PURE__ */ e.createElement(re, { className: Me }, /* @__PURE__ */ e.createElement(Ne, null, a)));
|
|
105
105
|
}
|
|
106
106
|
b.set(F, {
|
|
107
107
|
name: "ListBarSearch",
|
|
@@ -117,31 +117,32 @@ function M({
|
|
|
117
117
|
b.set(M, {
|
|
118
118
|
name: "ListBarSearchInfo"
|
|
119
119
|
});
|
|
120
|
-
function
|
|
120
|
+
function K({
|
|
121
121
|
advancedSearch: t,
|
|
122
122
|
onToggleAdvancedSearch: a,
|
|
123
123
|
title: r,
|
|
124
124
|
onToolbarPinned: n,
|
|
125
|
-
selectable:
|
|
125
|
+
selectable: l,
|
|
126
126
|
isSelected: m,
|
|
127
|
-
isIndeterminate:
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
isIndeterminate: p,
|
|
128
|
+
disableSelection: c = !1,
|
|
129
|
+
onSelectionChange: u,
|
|
130
|
+
pinResultsBar: h,
|
|
130
131
|
pinToolbar: i = !0,
|
|
131
|
-
children:
|
|
132
|
-
className:
|
|
133
|
-
...
|
|
132
|
+
children: B,
|
|
133
|
+
className: T,
|
|
134
|
+
...I
|
|
134
135
|
}) {
|
|
135
|
-
const { t:
|
|
136
|
+
const { t: W } = e.useContext(w);
|
|
136
137
|
let y = null;
|
|
137
|
-
const [S,
|
|
138
|
+
const [S, k] = e.useState(!1), E = e.useRef(null), f = e.useRef(null), { "data-testid": O } = I, N = ae(() => {
|
|
138
139
|
if (E.current && i) {
|
|
139
140
|
const d = E.current.getBoundingClientRect();
|
|
140
|
-
d && d.height > 0 && d.top <= 60 && (typeof y == "number" ? window.scrollY < y && (y = null,
|
|
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
142
|
}
|
|
142
143
|
});
|
|
143
|
-
e.useEffect(() => (window.addEventListener("scroll",
|
|
144
|
-
window.removeEventListener("scroll",
|
|
144
|
+
e.useEffect(() => (window.addEventListener("scroll", N), () => {
|
|
145
|
+
window.removeEventListener("scroll", N);
|
|
145
146
|
}), []);
|
|
146
147
|
const L = e.useRef();
|
|
147
148
|
e.useLayoutEffect(() => {
|
|
@@ -159,16 +160,22 @@ function j({
|
|
|
159
160
|
}
|
|
160
161
|
}
|
|
161
162
|
}, [S]);
|
|
162
|
-
function
|
|
163
|
+
function Y() {
|
|
163
164
|
a && a(!(t != null && t.isOpen));
|
|
164
165
|
}
|
|
165
|
-
function
|
|
166
|
+
function z(d) {
|
|
166
167
|
n && n(d);
|
|
167
168
|
}
|
|
168
169
|
e.useEffect(() => {
|
|
169
|
-
|
|
170
|
+
z(S);
|
|
170
171
|
}, [S]);
|
|
171
|
-
const [
|
|
172
|
+
const [
|
|
173
|
+
V,
|
|
174
|
+
Z,
|
|
175
|
+
J,
|
|
176
|
+
[D],
|
|
177
|
+
_
|
|
178
|
+
] = X(B, [
|
|
172
179
|
{ type: F },
|
|
173
180
|
{ type: M },
|
|
174
181
|
{ type: R },
|
|
@@ -176,26 +183,27 @@ function j({
|
|
|
176
183
|
custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
|
|
177
184
|
}
|
|
178
185
|
]);
|
|
179
|
-
return /* @__PURE__ */ e.createElement("div", { className: x(
|
|
180
|
-
|
|
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(
|
|
187
|
+
ne,
|
|
181
188
|
{
|
|
182
189
|
checked: m,
|
|
183
|
-
|
|
190
|
+
disabled: c,
|
|
191
|
+
indeterminate: p,
|
|
184
192
|
onChange: () => {
|
|
185
|
-
|
|
193
|
+
u == null || u(!m);
|
|
186
194
|
}
|
|
187
195
|
}
|
|
188
|
-
)), /* @__PURE__ */ e.createElement("div", { className:
|
|
196
|
+
)), /* @__PURE__ */ e.createElement("div", { className: Fe }, !r && V, !r && Z, V.length > 0 && t && /* @__PURE__ */ e.createElement(
|
|
189
197
|
"div",
|
|
190
198
|
{
|
|
191
|
-
className:
|
|
192
|
-
"data-testid": `${
|
|
199
|
+
className: Ce,
|
|
200
|
+
"data-testid": `${O}__advanced-search`
|
|
193
201
|
},
|
|
194
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
195
|
-
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className:
|
|
196
|
-
), r && /* @__PURE__ */ e.createElement("div", { className:
|
|
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))));
|
|
197
205
|
}
|
|
198
|
-
b.set(
|
|
206
|
+
b.set(K, {
|
|
199
207
|
name: "ListBar",
|
|
200
208
|
props: {
|
|
201
209
|
activeTab: { type: "Tab" },
|
|
@@ -205,6 +213,7 @@ b.set(j, {
|
|
|
205
213
|
title: { type: "string" },
|
|
206
214
|
onToolbarPinned: { type: "(boolean) => void" },
|
|
207
215
|
selectable: { type: "boolean" },
|
|
216
|
+
disableSelection: { type: "boolean", default: "false" },
|
|
208
217
|
isSelected: { type: "boolean" },
|
|
209
218
|
isIndeterminate: { type: "boolean" },
|
|
210
219
|
onSelectionChange: { type: "(boolean) => void" },
|
|
@@ -212,31 +221,31 @@ b.set(j, {
|
|
|
212
221
|
pinToolbar: { type: "boolean", default: "true" }
|
|
213
222
|
}
|
|
214
223
|
});
|
|
215
|
-
function
|
|
224
|
+
function q({
|
|
216
225
|
options: t,
|
|
217
226
|
activeOption: a,
|
|
218
227
|
onSortChange: r,
|
|
219
228
|
defaultOption: n,
|
|
220
|
-
className:
|
|
229
|
+
className: l,
|
|
221
230
|
...m
|
|
222
231
|
}) {
|
|
223
|
-
const
|
|
224
|
-
{ label:
|
|
232
|
+
const p = (t || []).map((c) => [
|
|
233
|
+
{ label: c.label, icon: c.icon },
|
|
225
234
|
() => {
|
|
226
|
-
r && r(
|
|
235
|
+
r && r(c);
|
|
227
236
|
}
|
|
228
237
|
]);
|
|
229
238
|
return /* @__PURE__ */ e.createElement(
|
|
230
|
-
|
|
239
|
+
se,
|
|
231
240
|
{
|
|
232
|
-
className: x(
|
|
241
|
+
className: x(l, Oe),
|
|
233
242
|
icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
|
|
234
243
|
label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
|
|
235
|
-
options:
|
|
244
|
+
options: p
|
|
236
245
|
}
|
|
237
246
|
);
|
|
238
247
|
}
|
|
239
|
-
b.set(
|
|
248
|
+
b.set(q, {
|
|
240
249
|
name: "ListBarSortBy",
|
|
241
250
|
props: {
|
|
242
251
|
options: { type: "SortOption[]" },
|
|
@@ -245,37 +254,37 @@ b.set(K, {
|
|
|
245
254
|
defaultOption: { type: "SortOption" }
|
|
246
255
|
}
|
|
247
256
|
});
|
|
248
|
-
var
|
|
249
|
-
function
|
|
257
|
+
var Ve = j({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), De = "q4fj414", _e = "q4fj415", Pe = "q4fj413";
|
|
258
|
+
function H({
|
|
250
259
|
formArray: t,
|
|
251
260
|
formGroup: a,
|
|
252
261
|
formMeta: r,
|
|
253
262
|
onSubmit: n,
|
|
254
|
-
controlsDisabled:
|
|
263
|
+
controlsDisabled: l,
|
|
255
264
|
footerLinks: m,
|
|
256
|
-
isOpen:
|
|
257
|
-
onClear:
|
|
258
|
-
className:
|
|
259
|
-
children:
|
|
260
|
-
...
|
|
265
|
+
isOpen: p,
|
|
266
|
+
onClear: c,
|
|
267
|
+
className: u,
|
|
268
|
+
children: h,
|
|
269
|
+
...i
|
|
261
270
|
}) {
|
|
262
271
|
const { t: B } = e.useContext(w);
|
|
263
|
-
function
|
|
264
|
-
|
|
272
|
+
function T() {
|
|
273
|
+
c && c();
|
|
265
274
|
}
|
|
266
|
-
return /* @__PURE__ */ e.createElement("div", { className: x(
|
|
267
|
-
|
|
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(
|
|
276
|
+
g,
|
|
268
277
|
{
|
|
269
278
|
kind: "default",
|
|
270
279
|
type: "button",
|
|
271
|
-
className:
|
|
272
|
-
onClick:
|
|
273
|
-
disabled:
|
|
280
|
+
className: me({ mr: "sm" }),
|
|
281
|
+
onClick: T,
|
|
282
|
+
disabled: l
|
|
274
283
|
},
|
|
275
284
|
B("design-system:advancedSearch.clear")
|
|
276
|
-
), /* @__PURE__ */ e.createElement(
|
|
285
|
+
), /* @__PURE__ */ e.createElement(g, { kind: "key", type: "submit", disabled: l }, B("design-system:advancedSearch.search"))))));
|
|
277
286
|
}
|
|
278
|
-
b.set(
|
|
287
|
+
b.set(H, {
|
|
279
288
|
name: "Advanced Search",
|
|
280
289
|
props: {
|
|
281
290
|
formArray: { type: "SpsFormArray<any>" },
|
|
@@ -288,8 +297,8 @@ b.set(q, {
|
|
|
288
297
|
onClear: { type: "() => void" }
|
|
289
298
|
}
|
|
290
299
|
});
|
|
291
|
-
const
|
|
292
|
-
components: [
|
|
300
|
+
const Ge = {
|
|
301
|
+
components: [H],
|
|
293
302
|
examples: {
|
|
294
303
|
general: {
|
|
295
304
|
label: "General Usage",
|
|
@@ -551,7 +560,7 @@ const Pe = {
|
|
|
551
560
|
}
|
|
552
561
|
}
|
|
553
562
|
};
|
|
554
|
-
function
|
|
563
|
+
function Ue() {
|
|
555
564
|
const [t, a] = e.useState(!1);
|
|
556
565
|
function r() {
|
|
557
566
|
a(!1);
|
|
@@ -559,18 +568,18 @@ function Ge() {
|
|
|
559
568
|
function n() {
|
|
560
569
|
a(!0);
|
|
561
570
|
}
|
|
562
|
-
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(
|
|
571
|
+
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, { kind: "link", onClick: n }, "View Content Order Example"), /* @__PURE__ */ e.createElement(le, { isOpen: t, onClose: r }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
|
|
563
572
|
"img",
|
|
564
573
|
{
|
|
565
574
|
src: "assets/images/list-toolbar-example.svg",
|
|
566
575
|
alt: "A List Toolbar with labels on each section",
|
|
567
576
|
className: "w-100 mb-3"
|
|
568
577
|
}
|
|
569
|
-
), /* @__PURE__ */ e.createElement(
|
|
578
|
+
), /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(A, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(A, null, "Section"), /* @__PURE__ */ e.createElement(A, null, "Notes")), /* @__PURE__ */ e.createElement(de, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "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", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(s, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(s, null, "Saved Search"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(s, null, "Advanced Search"), /* @__PURE__ */ e.createElement(s, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(s, null, "Column Editor"), /* @__PURE__ */ e.createElement(s, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(s, null, "List View Selector"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(s, null, "Sorting"), /* @__PURE__ */ e.createElement(s, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(s, null, "Buttons"), /* @__PURE__ */ e.createElement(s, { 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."))))));
|
|
570
579
|
}
|
|
571
|
-
const
|
|
580
|
+
const je = {
|
|
572
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."),
|
|
573
|
-
components: [
|
|
582
|
+
components: [K, F, M, q],
|
|
574
583
|
examples: {
|
|
575
584
|
general: {
|
|
576
585
|
label: "General Usage",
|
|
@@ -578,7 +587,7 @@ const Ue = {
|
|
|
578
587
|
},
|
|
579
588
|
contentOrder: {
|
|
580
589
|
label: "Content Order",
|
|
581
|
-
description: /* @__PURE__ */ e.createElement(
|
|
590
|
+
description: /* @__PURE__ */ e.createElement(Ue, null)
|
|
582
591
|
},
|
|
583
592
|
checkbox: {
|
|
584
593
|
label: "Checkbox",
|
|
@@ -1466,7 +1475,7 @@ const Ue = {
|
|
|
1466
1475
|
}
|
|
1467
1476
|
}
|
|
1468
1477
|
}
|
|
1469
|
-
},
|
|
1478
|
+
}, Ke = {
|
|
1470
1479
|
components: [R],
|
|
1471
1480
|
examples: {
|
|
1472
1481
|
basic: {
|
|
@@ -1692,18 +1701,18 @@ const Ue = {
|
|
|
1692
1701
|
}
|
|
1693
1702
|
}
|
|
1694
1703
|
}
|
|
1695
|
-
},
|
|
1696
|
-
"Advanced Search":
|
|
1697
|
-
"List Bar":
|
|
1698
|
-
"Search Results Bar":
|
|
1704
|
+
}, Je = {
|
|
1705
|
+
"Advanced Search": Ge,
|
|
1706
|
+
"List Bar": je,
|
|
1707
|
+
"Search Results Bar": Ke
|
|
1699
1708
|
};
|
|
1700
1709
|
export {
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1710
|
+
H as AdvancedSearch,
|
|
1711
|
+
Ne as InputGroupWrapper,
|
|
1712
|
+
K as ListBar,
|
|
1704
1713
|
F as ListBarSearch,
|
|
1705
1714
|
M as ListBarSearchInfo,
|
|
1706
|
-
|
|
1707
|
-
|
|
1715
|
+
q as ListBarSortBy,
|
|
1716
|
+
Je as MANIFEST,
|
|
1708
1717
|
R as SearchResultsBar
|
|
1709
1718
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
-
export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, onSelectionChange, pinResultsBar, pinToolbar, children, className, ...rest }: ComponentProps<{
|
|
3
|
+
export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, disableSelection, onSelectionChange, pinResultsBar, pinToolbar, children, className, ...rest }: ComponentProps<{
|
|
4
4
|
advancedSearch?: {
|
|
5
5
|
isOpen: boolean;
|
|
6
6
|
enteredFields?: number;
|
|
@@ -11,6 +11,7 @@ export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title,
|
|
|
11
11
|
selectable?: boolean;
|
|
12
12
|
isSelected?: boolean;
|
|
13
13
|
isIndeterminate?: boolean;
|
|
14
|
+
disableSelection?: boolean;
|
|
14
15
|
onSelectionChange?: (arg: boolean) => void;
|
|
15
16
|
pinResultsBar?: boolean;
|
|
16
17
|
pinToolbar?: boolean;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/list-bar",
|
|
3
3
|
"description": "SPS Woodland Design System list bar components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.9.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.
|
|
33
|
-
"@sps-woodland/
|
|
34
|
-
"@sps-woodland/
|
|
35
|
-
"@sps-woodland/tags": "8.
|
|
36
|
-
"@
|
|
37
|
-
"@
|
|
32
|
+
"@sps-woodland/buttons": "8.9.0",
|
|
33
|
+
"@sps-woodland/tabs": "8.9.0",
|
|
34
|
+
"@sps-woodland/core": "8.9.0",
|
|
35
|
+
"@sps-woodland/tags": "8.9.0",
|
|
36
|
+
"@spscommerce/ds-react": "8.9.0",
|
|
37
|
+
"@sps-woodland/tokens": "8.9.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@react-stately/collections": "^3.3.3",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0",
|
|
46
|
-
"@sps-woodland/buttons": "8.
|
|
47
|
-
"@sps-woodland/core": "8.
|
|
48
|
-
"@sps-woodland/tabs": "8.
|
|
49
|
-
"@sps-woodland/tags": "8.
|
|
50
|
-
"@sps-woodland/tokens": "8.
|
|
51
|
-
"@spscommerce/ds-react": "8.
|
|
52
|
-
"@spscommerce/ds-shared": "8.
|
|
46
|
+
"@sps-woodland/buttons": "8.9.0",
|
|
47
|
+
"@sps-woodland/core": "8.9.0",
|
|
48
|
+
"@sps-woodland/tabs": "8.9.0",
|
|
49
|
+
"@sps-woodland/tags": "8.9.0",
|
|
50
|
+
"@sps-woodland/tokens": "8.9.0",
|
|
51
|
+
"@spscommerce/ds-react": "8.9.0",
|
|
52
|
+
"@spscommerce/ds-shared": "8.9.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|