@sps-woodland/list-bar 8.17.1 → 8.18.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 +89 -89
- package/lib/style.css +1 -1
- package/package.json +14 -14
- package/vite.config.mjs +11 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),l=require("@sps-woodland/core"),B=require("@sps-woodland/buttons"),A=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),Z=require("@sps-woodland/tokens");function J(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=J(z);var Q="_1gxdcgc1",X="_1gxdcgc8",$="_1gxdcgc7",ee="_1gxdcgc2",te="_1gxdcgc5",ae="_1gxdcgc6",re="_1gxdcgc4",ne="_1gxdcgc0",se="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:c,children:m,...S}){const{t:i}=e.useContext(l.I18nContext),p=a?Object.keys(a).reduce((h,d)=>(a[d].length>0&&(h[d]=a[d]),h),{}):{};return e.createElement("div",{className:Q,...S},t!=null&&e.createElement("div",{className:ee},e.createElement("span",null,i("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:se,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:re},Object.keys(p).length>0?Object.keys(p).map((h,d)=>e.createElement(e.Fragment,null,e.createElement("span",{key:d,className:te},h,":"),p[h].map((b,T)=>e.createElement(A.Tag,{className:ae,key:T,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:s},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function _(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),n.push.apply(n,s)}return n}function P(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?_(Object(n),!0).forEach(function(s){oe(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var le=(t,a,n)=>{for(var s of Object.keys(t)){var c;if(t[s]!==((c=a[s])!==null&&c!==void 0?c:n[s]))return!1}return!0},j=t=>a=>{var n=t.defaultClassName,s=P(P({},t.defaultVariants),a);for(var c in s){var m,S=(m=s[c])!==null&&m!==void 0?m:t.defaultVariants[c];if(S!=null){var i=S;typeof i=="boolean"&&(i=i===!0?"true":"false");var p=t.variantClassNames[c][i];p&&(n+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,s,t.defaultVariants)&&(n+=" "+d);return n},ce="_9h4p70e",ie=j({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="_9h4p709",ue="_9h4p70a",me="_9h4p707",pe="_9h4p708",he="_9h4p704",G="_9h4p70b",Se="_9h4p706",fe="_9h4p70d",ve="_9h4p70c",be="_9h4p705",Be="_9h4p70f";function q({children:t}){const a=l.modChildren(t,n=>n.type===B.Button?[{className:l.cl(n.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function x({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(x,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function C({children:t}){return e.createElement("div",null,t)}l.Metadata.set(C,{name:"ListBarSearchInfo"});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:T,...M}){const{t:U}=e.useContext(l.I18nContext);let L=null;const[f,I]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":O}=M,k=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,I(!1)):(L=window.scrollY,I(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",k),()=>{window.removeEventListener("scroll",k)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function K(){a&&a(!(t!=null&&t.isOpen))}function H(u){s&&s(u)}e.useEffect(()=>{H(f)},[f]);const[N,W,Y,[V],D]=l.selectChildren(b,[{type:x},{type:C},{type:y},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(T),ref:v,...M},e.createElement("div",{className:ie({pinned:f}),ref:g},V?l.addProps(V,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:he},!!c&&e.createElement("div",{className:be},e.createElement(r.SpsCheckbox,{checked:m,disabled:i,indeterminate:S,onChange:()=>{p==null||p(!m)}})),e.createElement("div",{className:Se},!n&&N,!n&&W,N.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${O}__advanced-search`},e.createElement("div",{className:pe},e.createElement(B.Button,{kind:"link",onClick:K},U("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:de,kind:"info","data-testid":`${O}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:ue},n)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},D)):e.createElement("div",{className:G},D)),e.createElement("div",{className:ne},(!f||f&&h)&&Y))))}l.Metadata.set(w,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{n&&n(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:S})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Te=j({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="q4fj414",Ee="q4fj415",Le="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function T(){i&&i()}return e.createElement("div",{className:l.cl(Te({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Le},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Ee},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:T,disabled:c},b("design-system:advancedSearch.clear")),e.createElement(B.Button,{kind:"key",type:"submit",disabled:c},b("design-system:advancedSearch.search"))))))}l.Metadata.set(F,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const ye={components:[F],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),l=require("@sps-woodland/core"),B=require("@sps-woodland/buttons"),x=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),Z=require("@sps-woodland/tokens");function J(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const e=J(z);var Q="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc1",X="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc8",$="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc7",ee="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc2",te="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc5",ae="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc6",re="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc4",se="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc0",ne="pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc3";function L({results:t,selections:a,zeroStateText:s,onClear:n,className:c,children:m,...S}){const{t:i}=e.useContext(l.I18nContext),p=a?Object.keys(a).reduce((h,d)=>(a[d].length>0&&(h[d]=a[d]),h),{}):{};return e.createElement("div",{className:Q,...S},t!=null&&e.createElement("div",{className:ee},e.createElement("span",null,i("design-system:searchResultsBar.results")),e.createElement(x.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:re},Object.keys(p).length>0?Object.keys(p).map((h,d)=>e.createElement(e.Fragment,null,e.createElement("span",{key:d,className:te},h,":"),p[h].map((b,_)=>e.createElement(x.Tag,{className:ae,key:_,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},s||i("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:$},e.createElement(B.Button,{className:X,kind:"link",onClick:n},i("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(L,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function oe(t,a,s){return a in t?Object.defineProperty(t,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[a]=s,t}function D(t,a){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter(function(c){return Object.getOwnPropertyDescriptor(t,c).enumerable})),s.push.apply(s,n)}return s}function P(t){for(var a=1;a<arguments.length;a++){var s=arguments[a]!=null?arguments[a]:{};a%2?D(Object(s),!0).forEach(function(n){oe(t,n,s[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):D(Object(s)).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(s,n))})}return t}var le=(t,a,s)=>{for(var n of Object.keys(t)){var c;if(t[n]!==((c=a[n])!==null&&c!==void 0?c:s[n]))return!1}return!0},j=t=>a=>{var s=t.defaultClassName,n=P(P({},t.defaultVariants),a);for(var c in n){var m,S=(m=n[c])!==null&&m!==void 0?m:t.defaultVariants[c];if(S!=null){var i=S;typeof i=="boolean"&&(i=i===!0?"true":"false");var p=t.variantClassNames[c][i];p&&(s+=" "+p)}}for(var[h,d]of t.compoundVariants)le(h,n,t.defaultVariants)&&(s+=" "+d);return s},ce="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70e",ie=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p701",variantClassNames:{pinned:{true:"pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p702",false:"pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),de="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p709",ue="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70a",me="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p707",pe="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p708",he="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p704",G="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70b",Se="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p706",fe="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d",ve="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70c",be="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p705",Be="pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70f";function q({children:t}){const a=l.modChildren(t,s=>s.type===B.Button?[{className:l.cl(s.props.className,ce)}]:[]);return e.createElement(e.Fragment,null,a)}function y({onSubmit:t,children:a}){function s(n){n.preventDefault(),t&&t(n)}return e.createElement("form",{onSubmit:s,className:ve,noValidate:!0},e.createElement(r.SpsInputGroup,{className:fe},e.createElement(q,null,a)))}l.Metadata.set(y,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function w({children:t}){return e.createElement("div",null,t)}l.Metadata.set(w,{name:"ListBarSearchInfo"});function C({advancedSearch:t,onToggleAdvancedSearch:a,title:s,onToolbarPinned:n,selectable:c,isSelected:m,isIndeterminate:S,disableSelection:i=!1,onSelectionChange:p,pinResultsBar:h,pinToolbar:d=!0,children:b,className:_,...k}){const{t:U}=e.useContext(l.I18nContext);let E=null;const[f,F]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":M}=k,I=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof E=="number"?window.scrollY<E&&(E=null,F(!1)):(E=window.scrollY,F(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",I),()=>{window.removeEventListener("scroll",I)}),[]);const T=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&T.current)v.current.style.height=T.current.height,v.current.style.width=T.current.width,v.current.style.marginBottom=T.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);T.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function K(){a&&a(!(t!=null&&t.isOpen))}function H(u){n&&n(u)}e.useEffect(()=>{H(f)},[f]);const[O,W,Y,[N],V]=l.selectChildren(b,[{type:y},{type:w},{type:L},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(_),ref:v,...k},e.createElement("div",{className:ie({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:he},!!c&&e.createElement("div",{className:be},e.createElement(r.SpsCheckbox,{checked:m,disabled:i,indeterminate:S,onChange:()=>{p==null||p(!m)}})),e.createElement("div",{className:Se},!s&&O,!s&&W,O.length>0&&t&&e.createElement("div",{className:me,"data-testid":`${M}__advanced-search`},e.createElement("div",{className:pe},e.createElement(B.Button,{kind:"link",onClick:K},U("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(x.Tag,{className:de,kind:"info","data-testid":`${M}__entered-fields`},e.createElement("span",null,t.enteredFields))),s&&e.createElement("div",{className:ue},s)),f?e.createElement("div",{className:G},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:G},V)),e.createElement("div",{className:se},(!f||f&&h)&&Y))))}l.Metadata.set(C,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},disableSelection:{type:"boolean",default:"false"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function A({options:t,activeOption:a,onSortChange:s,defaultOption:n,className:c,...m}){const S=(t||[]).map(i=>[{label:i.label,icon:i.icon},()=>{s&&s(i)}]);return e.createElement(r.SpsDropdown,{className:l.cl(c,Be),icon:(a==null?void 0:a.icon)||(n==null?void 0:n.icon),label:(a==null?void 0:a.label)||(n==null?void 0:n.label),options:S})}l.Metadata.set(A,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var _e=j({defaultClassName:"pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj410",variantClassNames:{open:{true:"pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj411",false:"pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),ge="pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj414",Te="pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj415",Ee="pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj413";function R({formArray:t,formGroup:a,formMeta:s,onSubmit:n,controlsDisabled:c,footerLinks:m,isOpen:S,onClear:i,className:p,children:h,...d}){const{t:b}=e.useContext(l.I18nContext);function _(){i&&i()}return e.createElement("div",{className:l.cl(_e({open:S})),...d},e.createElement(r.SpsForm,{onSubmit:n,formArray:t,formGroup:a,formMeta:s},e.createElement("div",{className:Ee},h),e.createElement("div",{className:ge},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:Te},e.createElement(B.Button,{kind:"default",type:"button",className:Z.sprinkles({mr:"sm"}),onClick:_,disabled:c},b("design-system:advancedSearch.clear")),e.createElement(B.Button,{kind:"key",type:"submit",disabled:c},b("design-system:advancedSearch.search"))))))}l.Metadata.set(R,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const Le={components:[R],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
|
2
2
|
import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
|
|
3
3
|
import { Button } from "@sps-woodland/buttons";
|
|
4
4
|
import { grid } from "@sps-woodland/tokens";
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
</>
|
|
217
217
|
)
|
|
218
218
|
}
|
|
219
|
-
`}}}}};function
|
|
219
|
+
`}}}}};function ye(){const[t,a]=e.useState(!1);function s(){a(!1)}function n(){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:n},"View Content Order Example"),e.createElement(r.SpsFocusedTask,{isOpen:t,onClose:s},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 we={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:[C,y,w,A],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When list content needs to be searched, filtered, sorted, or otherwise interacted with.")),e.createElement("h5",null,"Avoid a List Toolbar:"),e.createElement("ul",null,e.createElement("li",null,"When no list is present."),e.createElement("li",null,"When there will always be a small number of elements in the list, or the list does not require searching, filtering, or other actions.")))},contentOrder:{label:"Content Order",description:e.createElement(ye,null)},checkbox:{label:"Checkbox",description:({NavigateTo:t})=>e.createElement("p",null,"Use a Checkbox in the List Bar when items in a"," ",e.createElement(t,{to:"content-row"},"Content Row")," or"," ",e.createElement(t,{to:"content-tile"},"Content Tile")," are selectable. The Checkbox selects all items in the list, and will cause the Action Bar to appear. Do not use this with a Table, as Tables have a built-in checkbox in the header row."),examples:{basic:{react:o.code`
|
|
220
220
|
import { ListBar, ListBarSearch } from "@sps-woodland/list-bar";
|
|
221
221
|
|
|
222
222
|
function Component() {
|
|
@@ -881,7 +881,7 @@
|
|
|
881
881
|
</ListBar>
|
|
882
882
|
)
|
|
883
883
|
}
|
|
884
|
-
`}}}}},
|
|
884
|
+
`}}}}},xe={components:[L],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`
|
|
885
885
|
import { ListBar, ListBarSearch, SearchResultsBar, AdvancedSearch } from "@sps-woodland/list-bar";
|
|
886
886
|
import { Button } from "@sps-woodland/buttons";
|
|
887
887
|
import { SpsTextInput } from "@spscommerce/ds-react";
|
|
@@ -1081,4 +1081,4 @@
|
|
|
1081
1081
|
</>
|
|
1082
1082
|
)
|
|
1083
1083
|
}
|
|
1084
|
-
`}}}}},
|
|
1084
|
+
`}}}}},Ce={"Advanced Search":Le,"List Bar":we,"Search Results Bar":xe};exports.AdvancedSearch=R;exports.InputGroupWrapper=q;exports.ListBar=C;exports.ListBarSearch=y;exports.ListBarSearchInfo=w;exports.ListBarSortBy=A;exports.MANIFEST=Ce;exports.SearchResultsBar=L;
|
package/lib/index.es.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b, I18nContext as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { Tag as
|
|
2
|
+
import { Metadata as b, I18nContext as A, modChildren as Q, cl as y, selectChildren as X, addProps as $, PortalContext as ee, contentOf as te } from "@sps-woodland/core";
|
|
3
|
+
import { Button as _ } from "@sps-woodland/buttons";
|
|
4
|
+
import { Tag as w } from "@sps-woodland/tags";
|
|
5
5
|
import { lockToAnimationFrames as ae, code as o } from "@spscommerce/utils";
|
|
6
|
-
import { SpsInputGroup as re, SpsCheckbox as
|
|
6
|
+
import { SpsInputGroup as re, SpsCheckbox as se, SpsDropdown as ne, SpsForm as oe, SpsFocusedTask as le, SpsTable as ce, SpsTableHead as ie, SpsTableHeader as x, SpsTableBody as de, SpsTableRow as v, SpsTableCell as n } from "@spscommerce/ds-react";
|
|
7
7
|
import { sprinkles as me } from "@sps-woodland/tokens";
|
|
8
|
-
var ue = "
|
|
9
|
-
function
|
|
8
|
+
var ue = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc1", pe = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc8", he = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc7", Se = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc2", fe = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc5", ve = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc6", be = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc4", Be = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc0", _e = "pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc3";
|
|
9
|
+
function C({
|
|
10
10
|
results: t,
|
|
11
11
|
selections: a,
|
|
12
12
|
zeroStateText: r,
|
|
13
|
-
onClear:
|
|
13
|
+
onClear: s,
|
|
14
14
|
className: l,
|
|
15
15
|
children: m,
|
|
16
16
|
...h
|
|
17
17
|
}) {
|
|
18
|
-
const { t: c } = e.useContext(
|
|
19
|
-
return /* @__PURE__ */ e.createElement("div", { className: ue, ...h }, t != null && /* @__PURE__ */ e.createElement("div", { className: Se }, /* @__PURE__ */ e.createElement("span", null, c("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(
|
|
18
|
+
const { t: c } = e.useContext(A), u = a ? Object.keys(a).reduce((p, i) => (a[i].length > 0 && (p[i] = a[i]), p), {}) : {};
|
|
19
|
+
return /* @__PURE__ */ e.createElement("div", { className: ue, ...h }, t != null && /* @__PURE__ */ e.createElement("div", { className: Se }, /* @__PURE__ */ e.createElement("span", null, c("design-system:searchResultsBar.results")), /* @__PURE__ */ e.createElement(w, { className: _e, kind: "info" }, /* @__PURE__ */ e.createElement("span", null, t))), /* @__PURE__ */ e.createElement("div", { className: be }, Object.keys(u).length > 0 ? Object.keys(u).map((p, i) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { key: i, className: fe }, p, ":"), u[p].map((B, g) => /* @__PURE__ */ e.createElement(w, { className: ve, key: g, kind: "key" }, /* @__PURE__ */ e.createElement("span", null, B))))) : /* @__PURE__ */ e.createElement("span", { className: "font-italic" }, r || c("design-system:searchResultsBar.noAdvancedSearchSelections"))), /* @__PURE__ */ e.createElement("div", { className: he }, /* @__PURE__ */ e.createElement(_, { className: pe, kind: "link", onClick: s }, c("design-system:searchResultsBar.clearResults"))));
|
|
20
20
|
}
|
|
21
|
-
b.set(
|
|
21
|
+
b.set(C, {
|
|
22
22
|
name: "Search Results Bar",
|
|
23
23
|
props: {
|
|
24
24
|
results: { type: "number | null" },
|
|
@@ -27,7 +27,7 @@ b.set(F, {
|
|
|
27
27
|
onClear: { type: "() => void" }
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
function
|
|
30
|
+
function ge(t, a, r) {
|
|
31
31
|
return a in t ? Object.defineProperty(t, a, {
|
|
32
32
|
value: r,
|
|
33
33
|
enumerable: !0,
|
|
@@ -38,35 +38,35 @@ function Te(t, a, r) {
|
|
|
38
38
|
function P(t, a) {
|
|
39
39
|
var r = Object.keys(t);
|
|
40
40
|
if (Object.getOwnPropertySymbols) {
|
|
41
|
-
var
|
|
42
|
-
a && (
|
|
41
|
+
var s = Object.getOwnPropertySymbols(t);
|
|
42
|
+
a && (s = s.filter(function(l) {
|
|
43
43
|
return Object.getOwnPropertyDescriptor(t, l).enumerable;
|
|
44
|
-
})), r.push.apply(r,
|
|
44
|
+
})), r.push.apply(r, s);
|
|
45
45
|
}
|
|
46
46
|
return r;
|
|
47
47
|
}
|
|
48
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 ? P(Object(r), !0).forEach(function(
|
|
52
|
-
|
|
53
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : P(Object(r)).forEach(function(
|
|
54
|
-
Object.defineProperty(t,
|
|
51
|
+
a % 2 ? P(Object(r), !0).forEach(function(s) {
|
|
52
|
+
ge(t, s, r[s]);
|
|
53
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : P(Object(r)).forEach(function(s) {
|
|
54
|
+
Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(r, s));
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
57
|
return t;
|
|
58
58
|
}
|
|
59
|
-
var
|
|
60
|
-
for (var
|
|
59
|
+
var Te = (t, a, r) => {
|
|
60
|
+
for (var s of Object.keys(t)) {
|
|
61
61
|
var l;
|
|
62
|
-
if (t[
|
|
62
|
+
if (t[s] !== ((l = a[s]) !== null && l !== void 0 ? l : r[s]))
|
|
63
63
|
return !1;
|
|
64
64
|
}
|
|
65
65
|
return !0;
|
|
66
66
|
}, j = (t) => (a) => {
|
|
67
|
-
var r = t.defaultClassName,
|
|
68
|
-
for (var l in
|
|
69
|
-
var m, h = (m =
|
|
67
|
+
var r = t.defaultClassName, s = G(G({}, t.defaultVariants), a);
|
|
68
|
+
for (var l in s) {
|
|
69
|
+
var m, h = (m = s[l]) !== null && m !== void 0 ? m : t.defaultVariants[l];
|
|
70
70
|
if (h != null) {
|
|
71
71
|
var c = h;
|
|
72
72
|
typeof c == "boolean" && (c = c === !0 ? "true" : "false");
|
|
@@ -78,50 +78,50 @@ var Ee = (t, a, r) => {
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
for (var [p, i] of t.compoundVariants)
|
|
81
|
-
|
|
81
|
+
Te(p, s, t.defaultVariants) && (r += " " + i);
|
|
82
82
|
return r;
|
|
83
|
-
},
|
|
84
|
-
function
|
|
83
|
+
}, Ee = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70e", Le = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p701", variantClassNames: { pinned: { true: "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p702", false: "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p703" } }, defaultVariants: { pinned: !1 }, compoundVariants: [] }), ye = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p709", xe = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70a", we = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p707", Ae = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p708", Ce = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p704", U = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70b", ke = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p706", Fe = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d", Re = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70c", Me = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p705", Ie = "pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70f";
|
|
84
|
+
function Oe({
|
|
85
85
|
children: t
|
|
86
86
|
}) {
|
|
87
87
|
const a = Q(
|
|
88
88
|
t,
|
|
89
|
-
(r) => r.type ===
|
|
89
|
+
(r) => r.type === _ ? [
|
|
90
90
|
{
|
|
91
|
-
className:
|
|
91
|
+
className: y(r.props.className, Ee)
|
|
92
92
|
}
|
|
93
93
|
] : []
|
|
94
94
|
);
|
|
95
95
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, a);
|
|
96
96
|
}
|
|
97
|
-
function
|
|
97
|
+
function k({
|
|
98
98
|
onSubmit: t,
|
|
99
99
|
children: a
|
|
100
100
|
}) {
|
|
101
|
-
function r(
|
|
102
|
-
|
|
101
|
+
function r(s) {
|
|
102
|
+
s.preventDefault(), t && t(s);
|
|
103
103
|
}
|
|
104
|
-
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className:
|
|
104
|
+
return /* @__PURE__ */ e.createElement("form", { onSubmit: r, className: Re, noValidate: !0 }, /* @__PURE__ */ e.createElement(re, { className: Fe }, /* @__PURE__ */ e.createElement(Oe, null, a)));
|
|
105
105
|
}
|
|
106
|
-
b.set(
|
|
106
|
+
b.set(k, {
|
|
107
107
|
name: "ListBarSearch",
|
|
108
108
|
props: {
|
|
109
109
|
onSubmit: { type: "FormEventHandler" }
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
|
-
function
|
|
112
|
+
function F({
|
|
113
113
|
children: t
|
|
114
114
|
}) {
|
|
115
115
|
return /* @__PURE__ */ e.createElement("div", null, t);
|
|
116
116
|
}
|
|
117
|
-
b.set(
|
|
117
|
+
b.set(F, {
|
|
118
118
|
name: "ListBarSearchInfo"
|
|
119
119
|
});
|
|
120
120
|
function K({
|
|
121
121
|
advancedSearch: t,
|
|
122
122
|
onToggleAdvancedSearch: a,
|
|
123
123
|
title: r,
|
|
124
|
-
onToolbarPinned:
|
|
124
|
+
onToolbarPinned: s,
|
|
125
125
|
selectable: l,
|
|
126
126
|
isSelected: m,
|
|
127
127
|
isIndeterminate: h,
|
|
@@ -130,29 +130,29 @@ function K({
|
|
|
130
130
|
pinResultsBar: p,
|
|
131
131
|
pinToolbar: i = !0,
|
|
132
132
|
children: B,
|
|
133
|
-
className:
|
|
134
|
-
...
|
|
133
|
+
className: g,
|
|
134
|
+
...R
|
|
135
135
|
}) {
|
|
136
|
-
const { t: W } = e.useContext(
|
|
137
|
-
let
|
|
138
|
-
const [S,
|
|
139
|
-
if (
|
|
140
|
-
const d =
|
|
141
|
-
d && d.height > 0 && d.top <= 60 && (typeof
|
|
136
|
+
const { t: W } = e.useContext(A);
|
|
137
|
+
let L = null;
|
|
138
|
+
const [S, M] = e.useState(!1), T = e.useRef(null), f = e.useRef(null), { "data-testid": I } = R, O = ae(() => {
|
|
139
|
+
if (T.current && i) {
|
|
140
|
+
const d = T.current.getBoundingClientRect();
|
|
141
|
+
d && d.height > 0 && d.top <= 60 && (typeof L == "number" ? window.scrollY < L && (L = null, M(!1)) : (L = window.scrollY, M(!0), a && a(!1)));
|
|
142
142
|
}
|
|
143
143
|
});
|
|
144
|
-
e.useEffect(() => (window.addEventListener("scroll",
|
|
145
|
-
window.removeEventListener("scroll",
|
|
144
|
+
e.useEffect(() => (window.addEventListener("scroll", O), () => {
|
|
145
|
+
window.removeEventListener("scroll", O);
|
|
146
146
|
}), []);
|
|
147
|
-
const
|
|
147
|
+
const E = e.useRef();
|
|
148
148
|
e.useLayoutEffect(() => {
|
|
149
|
-
if (f.current &&
|
|
150
|
-
if (S &&
|
|
151
|
-
f.current.style.height =
|
|
149
|
+
if (f.current && T.current && i) {
|
|
150
|
+
if (S && E.current)
|
|
151
|
+
f.current.style.height = E.current.height, f.current.style.width = E.current.width, f.current.style.marginBottom = E.current.marginBottom;
|
|
152
152
|
else if (!S) {
|
|
153
153
|
f.current.style.height = "", f.current.style.width = "", f.current.style.marginBottom = "";
|
|
154
|
-
const d = window.getComputedStyle(
|
|
155
|
-
|
|
154
|
+
const d = window.getComputedStyle(T.current);
|
|
155
|
+
E.current = {
|
|
156
156
|
height: d.height,
|
|
157
157
|
width: d.width,
|
|
158
158
|
marginBottom: d.marginBottom
|
|
@@ -164,27 +164,27 @@ function K({
|
|
|
164
164
|
a && a(!(t != null && t.isOpen));
|
|
165
165
|
}
|
|
166
166
|
function z(d) {
|
|
167
|
-
|
|
167
|
+
s && s(d);
|
|
168
168
|
}
|
|
169
169
|
e.useEffect(() => {
|
|
170
170
|
z(S);
|
|
171
171
|
}, [S]);
|
|
172
172
|
const [
|
|
173
|
-
|
|
173
|
+
V,
|
|
174
174
|
Z,
|
|
175
175
|
J,
|
|
176
|
-
[
|
|
177
|
-
|
|
176
|
+
[N],
|
|
177
|
+
D
|
|
178
178
|
] = X(B, [
|
|
179
|
-
{ type:
|
|
180
|
-
{ type: M },
|
|
179
|
+
{ type: k },
|
|
181
180
|
{ type: F },
|
|
181
|
+
{ type: C },
|
|
182
182
|
{
|
|
183
183
|
custom: (d) => b.isWoodlandComponent(d) && b.get(d).name === "Tabs"
|
|
184
184
|
}
|
|
185
185
|
]);
|
|
186
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
187
|
-
|
|
186
|
+
return /* @__PURE__ */ e.createElement("div", { className: y(g), ref: f, ...R }, /* @__PURE__ */ e.createElement("div", { className: Le({ pinned: S }), ref: T }, N ? $(N, { context: "container" }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: Ce }, !!l && /* @__PURE__ */ e.createElement("div", { className: Me }, /* @__PURE__ */ e.createElement(
|
|
187
|
+
se,
|
|
188
188
|
{
|
|
189
189
|
checked: m,
|
|
190
190
|
disabled: c,
|
|
@@ -193,15 +193,15 @@ function K({
|
|
|
193
193
|
u == null || u(!m);
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
)), /* @__PURE__ */ e.createElement("div", { className:
|
|
196
|
+
)), /* @__PURE__ */ e.createElement("div", { className: ke }, !r && V, !r && Z, V.length > 0 && t && /* @__PURE__ */ e.createElement(
|
|
197
197
|
"div",
|
|
198
198
|
{
|
|
199
|
-
className:
|
|
200
|
-
"data-testid": `${
|
|
199
|
+
className: we,
|
|
200
|
+
"data-testid": `${I}__advanced-search`
|
|
201
201
|
},
|
|
202
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
203
|
-
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(
|
|
204
|
-
), r && /* @__PURE__ */ e.createElement("div", { className:
|
|
202
|
+
/* @__PURE__ */ e.createElement("div", { className: Ae }, /* @__PURE__ */ e.createElement(_, { kind: "link", onClick: Y }, W("design-system:listToolbar.advancedSearchToggle"))),
|
|
203
|
+
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(w, { className: ye, kind: "info", "data-testid": `${I}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
|
|
204
|
+
), r && /* @__PURE__ */ e.createElement("div", { className: xe }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: U }, /* @__PURE__ */ e.createElement(ee.Provider, { value: { fixed: !0 } }, D)) : /* @__PURE__ */ e.createElement("div", { className: U }, D)), /* @__PURE__ */ e.createElement("div", { className: Be }, (!S || S && p) && J))));
|
|
205
205
|
}
|
|
206
206
|
b.set(K, {
|
|
207
207
|
name: "ListBar",
|
|
@@ -225,7 +225,7 @@ function q({
|
|
|
225
225
|
options: t,
|
|
226
226
|
activeOption: a,
|
|
227
227
|
onSortChange: r,
|
|
228
|
-
defaultOption:
|
|
228
|
+
defaultOption: s,
|
|
229
229
|
className: l,
|
|
230
230
|
...m
|
|
231
231
|
}) {
|
|
@@ -236,11 +236,11 @@ function q({
|
|
|
236
236
|
}
|
|
237
237
|
]);
|
|
238
238
|
return /* @__PURE__ */ e.createElement(
|
|
239
|
-
|
|
239
|
+
ne,
|
|
240
240
|
{
|
|
241
|
-
className:
|
|
242
|
-
icon: (a == null ? void 0 : a.icon) || (
|
|
243
|
-
label: (a == null ? void 0 : a.label) || (
|
|
241
|
+
className: y(l, Ie),
|
|
242
|
+
icon: (a == null ? void 0 : a.icon) || (s == null ? void 0 : s.icon),
|
|
243
|
+
label: (a == null ? void 0 : a.label) || (s == null ? void 0 : s.label),
|
|
244
244
|
options: h
|
|
245
245
|
}
|
|
246
246
|
);
|
|
@@ -254,12 +254,12 @@ b.set(q, {
|
|
|
254
254
|
defaultOption: { type: "SortOption" }
|
|
255
255
|
}
|
|
256
256
|
});
|
|
257
|
-
var
|
|
257
|
+
var Ve = j({ defaultClassName: "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj410", variantClassNames: { open: { true: "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj411", false: "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ne = "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj414", De = "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj415", Pe = "pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj413";
|
|
258
258
|
function H({
|
|
259
259
|
formArray: t,
|
|
260
260
|
formGroup: a,
|
|
261
261
|
formMeta: r,
|
|
262
|
-
onSubmit:
|
|
262
|
+
onSubmit: s,
|
|
263
263
|
controlsDisabled: l,
|
|
264
264
|
footerLinks: m,
|
|
265
265
|
isOpen: h,
|
|
@@ -268,21 +268,21 @@ function H({
|
|
|
268
268
|
children: p,
|
|
269
269
|
...i
|
|
270
270
|
}) {
|
|
271
|
-
const { t: B } = e.useContext(
|
|
272
|
-
function
|
|
271
|
+
const { t: B } = e.useContext(A);
|
|
272
|
+
function g() {
|
|
273
273
|
c && c();
|
|
274
274
|
}
|
|
275
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
276
|
-
|
|
275
|
+
return /* @__PURE__ */ e.createElement("div", { className: y(Ve({ open: h })), ...i }, /* @__PURE__ */ e.createElement(oe, { onSubmit: s, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: Pe }, p), /* @__PURE__ */ e.createElement("div", { className: Ne }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, te(m)), /* @__PURE__ */ e.createElement("div", { className: De }, /* @__PURE__ */ e.createElement(
|
|
276
|
+
_,
|
|
277
277
|
{
|
|
278
278
|
kind: "default",
|
|
279
279
|
type: "button",
|
|
280
280
|
className: me({ mr: "sm" }),
|
|
281
|
-
onClick:
|
|
281
|
+
onClick: g,
|
|
282
282
|
disabled: l
|
|
283
283
|
},
|
|
284
284
|
B("design-system:advancedSearch.clear")
|
|
285
|
-
), /* @__PURE__ */ e.createElement(
|
|
285
|
+
), /* @__PURE__ */ e.createElement(_, { kind: "key", type: "submit", disabled: l }, B("design-system:advancedSearch.search"))))));
|
|
286
286
|
}
|
|
287
287
|
b.set(H, {
|
|
288
288
|
name: "Advanced Search",
|
|
@@ -565,21 +565,21 @@ function Ue() {
|
|
|
565
565
|
function r() {
|
|
566
566
|
a(!1);
|
|
567
567
|
}
|
|
568
|
-
function
|
|
568
|
+
function s() {
|
|
569
569
|
a(!0);
|
|
570
570
|
}
|
|
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(
|
|
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(_, { kind: "link", onClick: s }, "View Content Order Example"), /* @__PURE__ */ e.createElement(le, { isOpen: t, onClose: r }, /* @__PURE__ */ e.createElement("h1", null, "Content Order"), /* @__PURE__ */ e.createElement(
|
|
572
572
|
"img",
|
|
573
573
|
{
|
|
574
574
|
src: "assets/images/list-toolbar-example.svg",
|
|
575
575
|
alt: "A List Toolbar with labels on each section",
|
|
576
576
|
className: "w-100 mb-3"
|
|
577
577
|
}
|
|
578
|
-
), /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(
|
|
578
|
+
), /* @__PURE__ */ e.createElement(ce, null, /* @__PURE__ */ e.createElement(ie, null, /* @__PURE__ */ e.createElement(x, { style: { width: "80px" } }, "Order"), /* @__PURE__ */ e.createElement(x, null, "Section"), /* @__PURE__ */ e.createElement(x, null, "Notes")), /* @__PURE__ */ e.createElement(de, null, /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(n, null, "Checkbox"), /* @__PURE__ */ e.createElement(n, null, "For Content Rows and Content Tiles only.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(n, null, "Search/Filter Box"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(n, null, "Saved Search"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(n, null, "Advanced Search"), /* @__PURE__ */ e.createElement(n, null, "For more information, visit the Advanced Search page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(n, null, "Column Editor"), /* @__PURE__ */ e.createElement(n, { wrap: 500 }, "Use for Tables only. For more information, visit the Column Editor page.")), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "6")), /* @__PURE__ */ e.createElement(n, null, "List View Selector"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "7")), /* @__PURE__ */ e.createElement(n, null, "Sorting"), /* @__PURE__ */ e.createElement(n, null)), /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "8")), /* @__PURE__ */ e.createElement(n, null, "Buttons"), /* @__PURE__ */ e.createElement(n, { 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."))))));
|
|
579
579
|
}
|
|
580
580
|
const je = {
|
|
581
581
|
description: () => /* @__PURE__ */ e.createElement("p", null, "The List Toolbar provides the ability to interact with elements in a list or table. It can contain elements to search, filter, sort, or perform other actions."),
|
|
582
|
-
components: [K,
|
|
582
|
+
components: [K, k, F, q],
|
|
583
583
|
examples: {
|
|
584
584
|
general: {
|
|
585
585
|
label: "General Usage",
|
|
@@ -1517,7 +1517,7 @@ const je = {
|
|
|
1517
1517
|
}
|
|
1518
1518
|
}
|
|
1519
1519
|
}, Ke = {
|
|
1520
|
-
components: [
|
|
1520
|
+
components: [C],
|
|
1521
1521
|
examples: {
|
|
1522
1522
|
basic: {
|
|
1523
1523
|
label: "Basic",
|
|
@@ -1749,11 +1749,11 @@ const je = {
|
|
|
1749
1749
|
};
|
|
1750
1750
|
export {
|
|
1751
1751
|
H as AdvancedSearch,
|
|
1752
|
-
|
|
1752
|
+
Oe as InputGroupWrapper,
|
|
1753
1753
|
K as ListBar,
|
|
1754
|
-
|
|
1755
|
-
|
|
1754
|
+
k as ListBarSearch,
|
|
1755
|
+
F as ListBarSearchInfo,
|
|
1756
1756
|
q as ListBarSortBy,
|
|
1757
1757
|
Je as MANIFEST,
|
|
1758
|
-
|
|
1758
|
+
C as SearchResultsBar
|
|
1759
1759
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p701{background:#fff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p702{width:calc(1280px - 2.5rem);border-radius:0;transform:translate(-50%);position:fixed;top:3.75rem;left:50%;z-index:999}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;position:absolute;top:calc(100% + 1px);width:100%}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p708{display:inline-block;position:relative}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p709{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70f>.sps-button>button{padding:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70e>button{height:1.875rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70a>i{font-size:.875rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-multi-select{flex:1}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-select{min-width:30%}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-multi-select>.sps-text-input>.sps-form-control{border-radius:0;border-left:0;height:32px}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_9h4p701>.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc0>.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc3{margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc5:first-child{margin-left:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc6:last-child{margin-right:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc7:hover{background:#d2d4d4}.pkg_sps-woodland_list-bar__version_8_18_0__hash_1gxdcgc8{padding:.5rem;width:5.25rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj410{background:#fff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj411{display:block}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj413{padding:1rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj415{text-align:right}.pkg_sps-woodland_list-bar__version_8_18_0__hash_q4fj414>*{flex:1}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/list-bar",
|
|
3
3
|
"description": "SPS Woodland Design System list bar components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.18.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/core": "8.
|
|
34
|
-
"@sps-woodland/tabs": "8.
|
|
35
|
-
"@sps-woodland/tags": "8.
|
|
36
|
-
"@sps-woodland/tokens": "8.
|
|
37
|
-
"@spscommerce/ds-react": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.18.0",
|
|
33
|
+
"@sps-woodland/core": "8.18.0",
|
|
34
|
+
"@sps-woodland/tabs": "8.18.0",
|
|
35
|
+
"@sps-woodland/tags": "8.18.0",
|
|
36
|
+
"@sps-woodland/tokens": "8.18.0",
|
|
37
|
+
"@spscommerce/ds-react": "8.18.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.18.0",
|
|
47
|
+
"@sps-woodland/core": "8.18.0",
|
|
48
|
+
"@sps-woodland/tabs": "8.18.0",
|
|
49
|
+
"@sps-woodland/tags": "8.18.0",
|
|
50
|
+
"@sps-woodland/tokens": "8.18.0",
|
|
51
|
+
"@spscommerce/ds-react": "8.18.0",
|
|
52
|
+
"@spscommerce/ds-shared": "8.18.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import path from "path";
|
|
2
2
|
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
3
|
import { defineConfig } from "vite";
|
|
4
|
-
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
5
|
import pkg from "./package.json";
|
|
6
6
|
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
8
|
+
|
|
7
9
|
export default defineConfig({
|
|
8
|
-
plugins: [
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
9
18
|
build: {
|
|
10
19
|
lib: {
|
|
11
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|