@sps-woodland/list-bar 8.0.3 → 8.0.5
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 +97 -92
- package/lib/list-bar/ListBar.css.d.ts +2 -1
- package/lib/list-bar/ListBar.d.ts +1 -1
- package/lib/style.css +1 -1
- package/package.json +14 -14
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=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"),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);function Z(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){Z(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 J=(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)J(d,s,t.defaultVariants)&&(n+=" "+p);return n},Q="_9h4p70e",X=P({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),$="_9h4p709",ee="_9h4p70a",te="_9h4p707",ae="_9h4p708",re="_9h4p704",D="_9h4p70b",ne="_9h4p706",se="_9h4p70d",oe="_9h4p70c",le="_9h4p705",ce="_9h4p70f";function G({children:t}){const a=l.modChildren(t,n=>n.type===T.Button?[{className:l.cl(n.props.className,Q)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:oe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:se},e.createElement(G,null,a)))}l.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}l.Metadata.set(C,{name:"ListBarSearchInfo"});var ie="_1gxdcgc1",de="_1gxdcgc8",ue="_1gxdcgc7",me="_1gxdcgc2",pe="_1gxdcgc5",he="_1gxdcgc6",Se="_1gxdcgc4",fe="_1gxdcgc0",ve="_1gxdcgc3";function x({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:ie,...h},t!=null&&e.createElement("div",{className:me},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:ve,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:Se},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:pe},d,":"),S[d].map((b,B)=>e.createElement(A.Tag,{className:he,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:ue},e.createElement(T.Button,{className:de,kind:"link",onClick:s},c("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(x,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});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: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:y},{type:C},{type:x},{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:X({pinned:f}),ref:g,...B},k?l.addProps(k,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:re},!!i&&e.createElement("div",{className:le},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:ne},!n&&O,!n&&H,O.length>0&&t&&e.createElement("div",{className:te},e.createElement("div",{className:ae},e.createElement(T.Button,{kind:"link",onClick:q},j("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:$,kind:"info"},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ee},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:fe},(!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,ce),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 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:ge},d),e.createElement("div",{className:Be},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(T.Button,{kind:"default",type:"button",className:Y.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 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 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`
|
|
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(
|
|
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`
|
|
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:[
|
|
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`
|
|
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=
|
|
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;
|
package/lib/index.es.js
CHANGED
|
@@ -1,11 +1,58 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { Button as
|
|
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";
|
|
4
4
|
import { Tag as C } from "@sps-woodland/tags";
|
|
5
5
|
import { lockToAnimationFrames as ee, code as o } from "@spscommerce/utils";
|
|
6
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
7
|
import { sprinkles as ie } from "@sps-woodland/tokens";
|
|
8
|
-
|
|
8
|
+
var de = "_1gxdcgc1", me = "_1gxdcgc8", ue = "_1gxdcgc7", he = "_1gxdcgc2", pe = "_1gxdcgc5", Se = "_1gxdcgc6", fe = "_1gxdcgc4", ve = "_1gxdcgc0", be = "_1gxdcgc3";
|
|
9
|
+
function R({
|
|
10
|
+
results: t,
|
|
11
|
+
selections: a,
|
|
12
|
+
zeroStateText: r,
|
|
13
|
+
onClear: n,
|
|
14
|
+
className: c,
|
|
15
|
+
children: m,
|
|
16
|
+
...h
|
|
17
|
+
}) {
|
|
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
|
+
return /* @__PURE__ */ e.createElement("div", {
|
|
20
|
+
className: de,
|
|
21
|
+
...h
|
|
22
|
+
}, t != null && /* @__PURE__ */ e.createElement("div", {
|
|
23
|
+
className: he
|
|
24
|
+
}, /* @__PURE__ */ e.createElement("span", null, l("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, {
|
|
25
|
+
className: be,
|
|
26
|
+
kind: "info"
|
|
27
|
+
}, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", {
|
|
28
|
+
className: fe
|
|
29
|
+
}, Object.keys(p).length > 0 ? Object.keys(p).map((i, u) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
|
|
30
|
+
key: u,
|
|
31
|
+
className: pe
|
|
32
|
+
}, i, ":"), p[i].map((B, T) => /* @__PURE__ */ e.createElement(C, {
|
|
33
|
+
className: Se,
|
|
34
|
+
key: T,
|
|
35
|
+
kind: "key"
|
|
36
|
+
}, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", {
|
|
37
|
+
className: "font-italic"
|
|
38
|
+
}, r || l("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", {
|
|
39
|
+
className: ue
|
|
40
|
+
}, /* @__PURE__ */ e.createElement(g, {
|
|
41
|
+
className: me,
|
|
42
|
+
kind: "link",
|
|
43
|
+
onClick: n
|
|
44
|
+
}, l("design-system:searchResultsBar.clearResults"))));
|
|
45
|
+
}
|
|
46
|
+
b.set(R, {
|
|
47
|
+
name: "Search Results Bar",
|
|
48
|
+
props: {
|
|
49
|
+
results: { type: "number | null" },
|
|
50
|
+
selections: { type: "{ [key: string]: string[] }" },
|
|
51
|
+
zeroStateText: { type: "string" },
|
|
52
|
+
onClear: { type: "() => void" }
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
function Be(t, a, r) {
|
|
9
56
|
return a in t ? Object.defineProperty(t, a, {
|
|
10
57
|
value: r,
|
|
11
58
|
enumerable: !0,
|
|
@@ -27,14 +74,14 @@ function D(t) {
|
|
|
27
74
|
for (var a = 1; a < arguments.length; a++) {
|
|
28
75
|
var r = arguments[a] != null ? arguments[a] : {};
|
|
29
76
|
a % 2 ? _(Object(r), !0).forEach(function(n) {
|
|
30
|
-
|
|
77
|
+
Be(t, n, r[n]);
|
|
31
78
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : _(Object(r)).forEach(function(n) {
|
|
32
79
|
Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
|
|
33
80
|
});
|
|
34
81
|
}
|
|
35
82
|
return t;
|
|
36
83
|
}
|
|
37
|
-
var
|
|
84
|
+
var ge = (t, a, r) => {
|
|
38
85
|
for (var n of Object.keys(t)) {
|
|
39
86
|
var c;
|
|
40
87
|
if (t[n] !== ((c = a[n]) !== null && c !== void 0 ? c : r[n]))
|
|
@@ -53,23 +100,23 @@ var me = (t, a, r) => {
|
|
|
53
100
|
}
|
|
54
101
|
}
|
|
55
102
|
for (var [i, u] of t.compoundVariants)
|
|
56
|
-
|
|
103
|
+
ge(i, n, t.defaultVariants) && (r += " " + u);
|
|
57
104
|
return r;
|
|
58
|
-
},
|
|
59
|
-
function
|
|
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({
|
|
60
107
|
children: t
|
|
61
108
|
}) {
|
|
62
109
|
const a = Z(
|
|
63
110
|
t,
|
|
64
|
-
(r) => r.type ===
|
|
111
|
+
(r) => r.type === g ? [
|
|
65
112
|
{
|
|
66
|
-
className: x(r.props.className,
|
|
113
|
+
className: x(r.props.className, Te)
|
|
67
114
|
}
|
|
68
115
|
] : []
|
|
69
116
|
);
|
|
70
117
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
|
|
71
118
|
}
|
|
72
|
-
function
|
|
119
|
+
function F({
|
|
73
120
|
onSubmit: t,
|
|
74
121
|
children: a
|
|
75
122
|
}) {
|
|
@@ -78,72 +125,25 @@ function R({
|
|
|
78
125
|
}
|
|
79
126
|
return /* @__PURE__ */ e.createElement("form", {
|
|
80
127
|
onSubmit: r,
|
|
81
|
-
className:
|
|
128
|
+
className: Fe,
|
|
82
129
|
noValidate: !0
|
|
83
130
|
}, /* @__PURE__ */ e.createElement(te, {
|
|
84
|
-
className:
|
|
85
|
-
}, /* @__PURE__ */ e.createElement(
|
|
131
|
+
className: Re
|
|
132
|
+
}, /* @__PURE__ */ e.createElement(ke, null, a)));
|
|
86
133
|
}
|
|
87
|
-
b.set(
|
|
134
|
+
b.set(F, {
|
|
88
135
|
name: "ListBarSearch",
|
|
89
136
|
props: {
|
|
90
137
|
onSubmit: { type: "FormEventHandler" }
|
|
91
138
|
}
|
|
92
139
|
});
|
|
93
|
-
function
|
|
140
|
+
function M({
|
|
94
141
|
children: t
|
|
95
142
|
}) {
|
|
96
143
|
return /* @__PURE__ */ e.createElement("div", null, t);
|
|
97
144
|
}
|
|
98
|
-
b.set(F, {
|
|
99
|
-
name: "ListBarSearchInfo"
|
|
100
|
-
});
|
|
101
|
-
var xe = "_1gxdcgc1", Ae = "_1gxdcgc8", Ce = "_1gxdcgc7", we = "_1gxdcgc2", Re = "_1gxdcgc5", Fe = "_1gxdcgc6", Me = "_1gxdcgc4", Ie = "_1gxdcgc0", ke = "_1gxdcgc3";
|
|
102
|
-
function M({
|
|
103
|
-
results: t,
|
|
104
|
-
selections: a,
|
|
105
|
-
zeroStateText: r,
|
|
106
|
-
onClear: n,
|
|
107
|
-
className: c,
|
|
108
|
-
children: m,
|
|
109
|
-
...h
|
|
110
|
-
}) {
|
|
111
|
-
const { t: l } = e.useContext(w), p = a ? Object.keys(a).reduce((i, u) => (a[u].length > 0 && (i[u] = a[u]), i), {}) : {};
|
|
112
|
-
return /* @__PURE__ */ e.createElement("div", {
|
|
113
|
-
className: xe,
|
|
114
|
-
...h
|
|
115
|
-
}, t != null && /* @__PURE__ */ e.createElement("div", {
|
|
116
|
-
className: we
|
|
117
|
-
}, /* @__PURE__ */ e.createElement("span", null, l("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(C, {
|
|
118
|
-
className: ke,
|
|
119
|
-
kind: "info"
|
|
120
|
-
}, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", {
|
|
121
|
-
className: Me
|
|
122
|
-
}, Object.keys(p).length > 0 ? Object.keys(p).map((i, u) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
|
|
123
|
-
key: u,
|
|
124
|
-
className: Re
|
|
125
|
-
}, i, ":"), p[i].map((B, g) => /* @__PURE__ */ e.createElement(C, {
|
|
126
|
-
className: Fe,
|
|
127
|
-
key: g,
|
|
128
|
-
kind: "key"
|
|
129
|
-
}, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", {
|
|
130
|
-
className: "font-italic"
|
|
131
|
-
}, r || l("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", {
|
|
132
|
-
className: Ce
|
|
133
|
-
}, /* @__PURE__ */ e.createElement(T, {
|
|
134
|
-
className: Ae,
|
|
135
|
-
kind: "link",
|
|
136
|
-
onClick: n
|
|
137
|
-
}, l("design-system:searchResultsBar.clearResults"))));
|
|
138
|
-
}
|
|
139
145
|
b.set(M, {
|
|
140
|
-
name: "
|
|
141
|
-
props: {
|
|
142
|
-
results: { type: "number | null" },
|
|
143
|
-
selections: { type: "{ [key: string]: string[] }" },
|
|
144
|
-
zeroStateText: { type: "string" },
|
|
145
|
-
onClear: { type: "() => void" }
|
|
146
|
-
}
|
|
146
|
+
name: "ListBarSearchInfo"
|
|
147
147
|
});
|
|
148
148
|
function U({
|
|
149
149
|
advancedSearch: t,
|
|
@@ -158,7 +158,7 @@ function U({
|
|
|
158
158
|
pinToolbar: i = !0,
|
|
159
159
|
children: u,
|
|
160
160
|
className: B,
|
|
161
|
-
...
|
|
161
|
+
...T
|
|
162
162
|
}) {
|
|
163
163
|
const { t: q } = e.useContext(w);
|
|
164
164
|
let y = null;
|
|
@@ -196,10 +196,16 @@ function U({
|
|
|
196
196
|
e.useEffect(() => {
|
|
197
197
|
W(S);
|
|
198
198
|
}, [S]);
|
|
199
|
-
const [
|
|
200
|
-
|
|
199
|
+
const [
|
|
200
|
+
O,
|
|
201
|
+
Y,
|
|
202
|
+
z,
|
|
203
|
+
[N],
|
|
204
|
+
V
|
|
205
|
+
] = J(u, [
|
|
201
206
|
{ type: F },
|
|
202
207
|
{ type: M },
|
|
208
|
+
{ type: R },
|
|
203
209
|
{
|
|
204
210
|
custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
|
|
205
211
|
}
|
|
@@ -207,15 +213,14 @@ function U({
|
|
|
207
213
|
return /* @__PURE__ */ e.createElement("div", {
|
|
208
214
|
className: x(B),
|
|
209
215
|
ref: f,
|
|
210
|
-
...
|
|
216
|
+
...T
|
|
211
217
|
}, /* @__PURE__ */ e.createElement("div", {
|
|
212
|
-
className:
|
|
213
|
-
ref: E
|
|
214
|
-
...g
|
|
218
|
+
className: Ee({ pinned: S }),
|
|
219
|
+
ref: E
|
|
215
220
|
}, N ? Q(N, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
|
|
216
|
-
className:
|
|
221
|
+
className: Ce
|
|
217
222
|
}, !!c && /* @__PURE__ */ e.createElement("div", {
|
|
218
|
-
className:
|
|
223
|
+
className: Me
|
|
219
224
|
}, /* @__PURE__ */ e.createElement(ae, {
|
|
220
225
|
checked: m,
|
|
221
226
|
indeterminate: h,
|
|
@@ -223,19 +228,19 @@ function U({
|
|
|
223
228
|
l == null || l(!m);
|
|
224
229
|
}
|
|
225
230
|
})), /* @__PURE__ */ e.createElement("div", {
|
|
226
|
-
className:
|
|
231
|
+
className: we
|
|
227
232
|
}, !r && O, !r && Y, O.length > 0 && t && /* @__PURE__ */ e.createElement("div", {
|
|
228
|
-
className:
|
|
233
|
+
className: xe
|
|
229
234
|
}, /* @__PURE__ */ e.createElement("div", {
|
|
230
|
-
className:
|
|
231
|
-
}, /* @__PURE__ */ e.createElement(
|
|
235
|
+
className: Ae
|
|
236
|
+
}, /* @__PURE__ */ e.createElement(g, {
|
|
232
237
|
kind: "link",
|
|
233
238
|
onClick: H
|
|
234
239
|
}, q("design-system:listToolbar.advancedSearchToggle"))), (t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, {
|
|
235
|
-
className:
|
|
240
|
+
className: Le,
|
|
236
241
|
kind: "info"
|
|
237
242
|
}, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))), r && /* @__PURE__ */ e.createElement("div", {
|
|
238
|
-
className:
|
|
243
|
+
className: ye
|
|
239
244
|
}, r)), S ? /* @__PURE__ */ e.createElement("div", {
|
|
240
245
|
className: P
|
|
241
246
|
}, /* @__PURE__ */ e.createElement(X.Provider, {
|
|
@@ -243,7 +248,7 @@ function U({
|
|
|
243
248
|
}, V)) : /* @__PURE__ */ e.createElement("div", {
|
|
244
249
|
className: P
|
|
245
250
|
}, V)), /* @__PURE__ */ e.createElement("div", {
|
|
246
|
-
className:
|
|
251
|
+
className: ve
|
|
247
252
|
}, (!S || S && p) && z))));
|
|
248
253
|
}
|
|
249
254
|
b.set(U, {
|
|
@@ -278,7 +283,7 @@ function j({
|
|
|
278
283
|
}
|
|
279
284
|
]);
|
|
280
285
|
return /* @__PURE__ */ e.createElement(re, {
|
|
281
|
-
className: x(c,
|
|
286
|
+
className: x(c, Ie),
|
|
282
287
|
icon: (a == null ? void 0 : a.icon) || (n == null ? void 0 : n.icon),
|
|
283
288
|
label: (a == null ? void 0 : a.label) || (n == null ? void 0 : n.label),
|
|
284
289
|
options: h
|
|
@@ -308,7 +313,7 @@ function K({
|
|
|
308
313
|
...u
|
|
309
314
|
}) {
|
|
310
315
|
const { t: B } = e.useContext(w);
|
|
311
|
-
function
|
|
316
|
+
function T() {
|
|
312
317
|
l && l();
|
|
313
318
|
}
|
|
314
319
|
return /* @__PURE__ */ e.createElement("div", {
|
|
@@ -327,13 +332,13 @@ function K({
|
|
|
327
332
|
id: "footer_links"
|
|
328
333
|
}, $(m)), /* @__PURE__ */ e.createElement("div", {
|
|
329
334
|
className: Ve
|
|
330
|
-
}, /* @__PURE__ */ e.createElement(
|
|
335
|
+
}, /* @__PURE__ */ e.createElement(g, {
|
|
331
336
|
kind: "default",
|
|
332
337
|
type: "button",
|
|
333
338
|
className: ie({ mr: "sm" }),
|
|
334
|
-
onClick:
|
|
339
|
+
onClick: T,
|
|
335
340
|
disabled: c
|
|
336
|
-
}, B("design-system:advancedSearch.clear")), /* @__PURE__ */ e.createElement(
|
|
341
|
+
}, B("design-system:advancedSearch.clear")), /* @__PURE__ */ e.createElement(g, {
|
|
337
342
|
kind: "key",
|
|
338
343
|
type: "submit",
|
|
339
344
|
disabled: c
|
|
@@ -633,7 +638,7 @@ function Pe() {
|
|
|
633
638
|
function n() {
|
|
634
639
|
a(!0);
|
|
635
640
|
}
|
|
636
|
-
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(
|
|
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
642
|
kind: "link",
|
|
638
643
|
onClick: n
|
|
639
644
|
}, "View Content Order Example"), /* @__PURE__ */ e.createElement(se, {
|
|
@@ -669,7 +674,7 @@ function Pe() {
|
|
|
669
674
|
}
|
|
670
675
|
const Ge = {
|
|
671
676
|
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."),
|
|
672
|
-
components: [U,
|
|
677
|
+
components: [U, F, M, j],
|
|
673
678
|
examples: {
|
|
674
679
|
general: {
|
|
675
680
|
label: "General Usage",
|
|
@@ -1424,7 +1429,7 @@ const Ge = {
|
|
|
1424
1429
|
}
|
|
1425
1430
|
}
|
|
1426
1431
|
}, Ue = {
|
|
1427
|
-
components: [
|
|
1432
|
+
components: [R],
|
|
1428
1433
|
examples: {
|
|
1429
1434
|
basic: {
|
|
1430
1435
|
label: "Basic",
|
|
@@ -1658,11 +1663,11 @@ const Ge = {
|
|
|
1658
1663
|
};
|
|
1659
1664
|
export {
|
|
1660
1665
|
K as AdvancedSearch,
|
|
1661
|
-
|
|
1666
|
+
ke as InputGroupWrapper,
|
|
1662
1667
|
U as ListBar,
|
|
1663
|
-
|
|
1664
|
-
|
|
1668
|
+
F as ListBarSearch,
|
|
1669
|
+
M as ListBarSearchInfo,
|
|
1665
1670
|
j as ListBarSortBy,
|
|
1666
1671
|
ze as MANIFEST,
|
|
1667
|
-
|
|
1672
|
+
R as SearchResultsBar
|
|
1668
1673
|
};
|
|
@@ -4,9 +4,10 @@ export declare const listBar: import("@vanilla-extract/recipes/dist/declarations
|
|
|
4
4
|
true: {
|
|
5
5
|
width: string;
|
|
6
6
|
borderRadius: number;
|
|
7
|
-
marginLeft: `calc(-${string} /
|
|
7
|
+
marginLeft: `calc(-${string} / 2)`;
|
|
8
8
|
position: "fixed";
|
|
9
9
|
top: string;
|
|
10
|
+
left: "50%";
|
|
10
11
|
zIndex: number;
|
|
11
12
|
selectors: {
|
|
12
13
|
"&:after": {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { ComponentProps } from "@sps-woodland/core";
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
3
|
export declare function ListBar({ advancedSearch, onToggleAdvancedSearch, title, onToolbarPinned, selectable, isSelected, isIndeterminate, onSelectionChange, pinResultsBar, pinToolbar, children, className, ...rest }: ComponentProps<{
|
|
4
4
|
advancedSearch?: {
|
|
5
5
|
isOpen: boolean;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._9h4p701{background:#ffffff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-
|
|
1
|
+
._9h4p701{background:#ffffff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.q4fj410{background:#ffffff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.q4fj411{display:block}.q4fj413{padding:1rem}.q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.q4fj415{text-align:right}.q4fj414>*{flex:1}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/list-bar",
|
|
3
3
|
"description": "SPS Woodland Design System list bar components",
|
|
4
|
-
"version": "8.0.
|
|
4
|
+
"version": "8.0.5",
|
|
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.0.
|
|
33
|
-
"@sps-woodland/tokens": "8.0.
|
|
34
|
-
"@sps-woodland/tabs": "8.0.
|
|
35
|
-
"@sps-woodland/buttons": "8.0.
|
|
36
|
-
"@sps-woodland/tags": "8.0.
|
|
37
|
-
"@spscommerce/ds-react": "8.0.
|
|
32
|
+
"@sps-woodland/core": "8.0.5",
|
|
33
|
+
"@sps-woodland/tokens": "8.0.5",
|
|
34
|
+
"@sps-woodland/tabs": "8.0.5",
|
|
35
|
+
"@sps-woodland/buttons": "8.0.5",
|
|
36
|
+
"@sps-woodland/tags": "8.0.5",
|
|
37
|
+
"@spscommerce/ds-react": "8.0.5"
|
|
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.0.
|
|
47
|
-
"@sps-woodland/tokens": "8.0.
|
|
48
|
-
"@sps-woodland/tabs": "8.0.
|
|
49
|
-
"@sps-woodland/buttons": "8.0.
|
|
50
|
-
"@sps-woodland/tags": "8.0.
|
|
51
|
-
"@spscommerce/ds-react": "8.0.
|
|
52
|
-
"@spscommerce/ds-shared": "8.0.
|
|
46
|
+
"@sps-woodland/core": "8.0.5",
|
|
47
|
+
"@sps-woodland/tokens": "8.0.5",
|
|
48
|
+
"@sps-woodland/tabs": "8.0.5",
|
|
49
|
+
"@sps-woodland/buttons": "8.0.5",
|
|
50
|
+
"@sps-woodland/tags": "8.0.5",
|
|
51
|
+
"@spscommerce/ds-react": "8.0.5",
|
|
52
|
+
"@spscommerce/ds-shared": "8.0.5"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|