@sps-woodland/list-bar 8.7.4 → 8.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs.js +1 -1
- package/lib/index.es.js +171 -8
- package/lib/style.css +1 -1
- package/package.json +14 -14
- /package/{vite.config.js → vite.config.mjs} +0 -0
package/lib/index.cjs.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Y=require("react"),l=require("@sps-woodland/core"),T=require("@sps-woodland/buttons"),A=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),z=require("@sps-woodland/tokens");function Z(t){if(t&&t.__esModule)return t;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=Z(Y);var J="_1gxdcgc1",Q="_1gxdcgc8",X="_1gxdcgc7",$="_1gxdcgc2",ee="_1gxdcgc5",te="_1gxdcgc6",ae="_1gxdcgc4",re="_1gxdcgc0",ne="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:c}=e.useContext(l.I18nContext),S=a?Object.keys(a).reduce((d,p)=>(a[p].length>0&&(d[p]=a[p]),d),{}):{};return e.createElement("div",{className:J,...h},t!=null&&e.createElement("div",{className:$},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:ae},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:ee},d,":"),S[d].map((b,B)=>e.createElement(A.Tag,{className:te,key:B,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||c("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:X},e.createElement(T.Button,{className:Q,kind:"link",onClick:s},c("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function se(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function _(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function D(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?_(Object(n),!0).forEach(function(s){se(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var oe=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},G=t=>a=>{var n=t.defaultClassName,s=D(D({},t.defaultVariants),a);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var c=h;typeof c=="boolean"&&(c=c===!0?"true":"false");var S=t.variantClassNames[i][c];S&&(n+=" "+S)}}for(var[d,p]of t.compoundVariants)oe(d,s,t.defaultVariants)&&(n+=" "+p);return n},le="_9h4p70e",ce=G({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ie="_9h4p709",de="_9h4p70a",ue="_9h4p707",me="_9h4p708",pe="_9h4p704",P="_9h4p70b",he="_9h4p706",Se="_9h4p70d",fe="_9h4p70c",ve="_9h4p705",be="_9h4p70f";function j({children:t}){const a=l.modChildren(t,n=>n.type===T.Button?[{className:l.cl(n.props.className,le)}]:[]);return e.createElement(e.Fragment,null,a)}function C({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:fe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:Se},e.createElement(j,null,a)))}l.Metadata.set(C,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function x({children:t}){return e.createElement("div",null,t)}l.Metadata.set(x,{name:"ListBarSearchInfo"});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:m,isIndeterminate:h,onSelectionChange:c,pinResultsBar:S,pinToolbar:d=!0,children:p,className:b,...B}){const{t:q}=e.useContext(l.I18nContext);let L=null;const[f,M]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":I}=B,O=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,M(!1)):(L=window.scrollY,M(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",O),()=>{window.removeEventListener("scroll",O)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function U(){a&&a(!(t!=null&&t.isOpen))}function H(u){s&&s(u)}e.useEffect(()=>{H(f)},[f]);const[k,K,W,[N],V]=l.selectChildren(p,[{type:C},{type:x},{type:y},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(b),ref:v,...B},e.createElement("div",{className:ce({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:pe},!!i&&e.createElement("div",{className:ve},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:he},!n&&k,!n&&K,k.length>0&&t&&e.createElement("div",{className:ue,"data-testid":`${I}__advanced-search`},e.createElement("div",{className:me},e.createElement(T.Button,{kind:"link",onClick:U},q("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:ie,kind:"info","data-testid":`${I}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:de},n)),f?e.createElement("div",{className:P},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:P},V)),e.createElement("div",{className:re},(!f||f&&S)&&W))))}l.Metadata.set(w,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...m}){const h=(t||[]).map(c=>[{label:c.label,icon:c.icon},()=>{n&&n(c)}]);return e.createElement(r.SpsDropdown,{className:l.cl(i,be),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:h})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Be=G({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Te="q4fj414",ge="q4fj415",Ee="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:c,className:S,children:d,...p}){const{t:b}=e.useContext(l.I18nContext);function B(){c&&c()}return e.createElement("div",{className:l.cl(Be({open:h})),...p},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Ee},d),e.createElement("div",{className:Te},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:ge},e.createElement(T.Button,{kind:"default",type:"button",className:z.sprinkles({mr:"sm"}),onClick:B,disabled:i},b("design-system:advancedSearch.clear")),e.createElement(T.Button,{kind:"key",type:"submit",disabled:i},b("design-system:advancedSearch.search"))))))}l.Metadata.set(F,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const Le={components:[F],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),l=require("@sps-woodland/core"),T=require("@sps-woodland/buttons"),A=require("@sps-woodland/tags"),o=require("@spscommerce/utils"),r=require("@spscommerce/ds-react"),z=require("@sps-woodland/tokens");function Z(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(a,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return a.default=t,Object.freeze(a)}const e=Z(Y);var J="_1gxdcgc1",Q="_1gxdcgc8",X="_1gxdcgc7",$="_1gxdcgc2",ee="_1gxdcgc5",te="_1gxdcgc6",ae="_1gxdcgc4",re="_1gxdcgc0",ne="_1gxdcgc3";function y({results:t,selections:a,zeroStateText:n,onClear:s,className:i,children:m,...h}){const{t:c}=e.useContext(l.I18nContext),S=a?Object.keys(a).reduce((d,p)=>(a[p].length>0&&(d[p]=a[p]),d),{}):{};return e.createElement("div",{className:J,...h},t!=null&&e.createElement("div",{className:$},e.createElement("span",null,c("design-system:searchResultsBar.results")),e.createElement(A.Tag,{className:ne,kind:"info"},e.createElement("span",null,t))),e.createElement("div",{className:ae},Object.keys(S).length>0?Object.keys(S).map((d,p)=>e.createElement(e.Fragment,null,e.createElement("span",{key:p,className:ee},d,":"),S[d].map((b,B)=>e.createElement(A.Tag,{className:te,key:B,kind:"key"},e.createElement("span",null,b))))):e.createElement("span",{className:"font-italic"},n||c("design-system:searchResultsBar.noAdvancedSearchSelections"))),e.createElement("div",{className:X},e.createElement(T.Button,{className:Q,kind:"link",onClick:s},c("design-system:searchResultsBar.clearResults"))))}l.Metadata.set(y,{name:"Search Results Bar",props:{results:{type:"number | null"},selections:{type:"{ [key: string]: string[] }"},zeroStateText:{type:"string"},onClear:{type:"() => void"}}});function se(t,a,n){return a in t?Object.defineProperty(t,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[a]=n,t}function D(t,a){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),n.push.apply(n,s)}return n}function _(t){for(var a=1;a<arguments.length;a++){var n=arguments[a]!=null?arguments[a]:{};a%2?D(Object(n),!0).forEach(function(s){se(t,s,n[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):D(Object(n)).forEach(function(s){Object.defineProperty(t,s,Object.getOwnPropertyDescriptor(n,s))})}return t}var oe=(t,a,n)=>{for(var s of Object.keys(t)){var i;if(t[s]!==((i=a[s])!==null&&i!==void 0?i:n[s]))return!1}return!0},G=t=>a=>{var n=t.defaultClassName,s=_(_({},t.defaultVariants),a);for(var i in s){var m,h=(m=s[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(h!=null){var c=h;typeof c=="boolean"&&(c=c===!0?"true":"false");var S=t.variantClassNames[i][c];S&&(n+=" "+S)}}for(var[d,p]of t.compoundVariants)oe(d,s,t.defaultVariants)&&(n+=" "+p);return n},le="_9h4p70e",ce=G({defaultClassName:"_9h4p701",variantClassNames:{pinned:{true:"_9h4p702",false:"_9h4p703"}},defaultVariants:{pinned:!1},compoundVariants:[]}),ie="_9h4p709",de="_9h4p70a",ue="_9h4p707",me="_9h4p708",pe="_9h4p704",P="_9h4p70b",he="_9h4p706",Se="_9h4p70d",fe="_9h4p70c",ve="_9h4p705",be="_9h4p70f";function j({children:t}){const a=l.modChildren(t,n=>n.type===T.Button?[{className:l.cl(n.props.className,le)}]:[]);return e.createElement(e.Fragment,null,a)}function C({onSubmit:t,children:a}){function n(s){s.preventDefault(),t&&t(s)}return e.createElement("form",{onSubmit:n,className:fe,noValidate:!0},e.createElement(r.SpsInputGroup,{className:Se},e.createElement(j,null,a)))}l.Metadata.set(C,{name:"ListBarSearch",props:{onSubmit:{type:"FormEventHandler"}}});function x({children:t}){return e.createElement("div",null,t)}l.Metadata.set(x,{name:"ListBarSearchInfo"});function w({advancedSearch:t,onToggleAdvancedSearch:a,title:n,onToolbarPinned:s,selectable:i,isSelected:m,isIndeterminate:h,onSelectionChange:c,pinResultsBar:S,pinToolbar:d=!0,children:p,className:b,...B}){const{t:q}=e.useContext(l.I18nContext);let L=null;const[f,M]=e.useState(!1),g=e.useRef(null),v=e.useRef(null),{"data-testid":I}=B,O=o.lockToAnimationFrames(()=>{if(g.current&&d){const u=g.current.getBoundingClientRect();u&&u.height>0&&u.top<=60&&(typeof L=="number"?window.scrollY<L&&(L=null,M(!1)):(L=window.scrollY,M(!0),a&&a(!1)))}});e.useEffect(()=>(window.addEventListener("scroll",O),()=>{window.removeEventListener("scroll",O)}),[]);const E=e.useRef();e.useLayoutEffect(()=>{if(v.current&&g.current&&d){if(f&&E.current)v.current.style.height=E.current.height,v.current.style.width=E.current.width,v.current.style.marginBottom=E.current.marginBottom;else if(!f){v.current.style.height="",v.current.style.width="",v.current.style.marginBottom="";const u=window.getComputedStyle(g.current);E.current={height:u.height,width:u.width,marginBottom:u.marginBottom}}}},[f]);function U(){a&&a(!(t!=null&&t.isOpen))}function H(u){s&&s(u)}e.useEffect(()=>{H(f)},[f]);const[k,K,W,[N],V]=l.selectChildren(p,[{type:C},{type:x},{type:y},{custom:u=>l.Metadata.isWoodlandComponent(u)&&l.Metadata.get(u).name==="Tabs"}]);return e.createElement("div",{className:l.cl(b),ref:v,...B},e.createElement("div",{className:ce({pinned:f}),ref:g},N?l.addProps(N,{context:"container"}):e.createElement(e.Fragment,null,e.createElement("div",{className:pe},!!i&&e.createElement("div",{className:ve},e.createElement(r.SpsCheckbox,{checked:m,indeterminate:h,onChange:()=>{c==null||c(!m)}})),e.createElement("div",{className:he},!n&&k,!n&&K,k.length>0&&t&&e.createElement("div",{className:ue,"data-testid":`${I}__advanced-search`},e.createElement("div",{className:me},e.createElement(T.Button,{kind:"link",onClick:U},q("design-system:listToolbar.advancedSearchToggle"))),(t.enteredFields||0)>0&&e.createElement(A.Tag,{className:ie,kind:"info","data-testid":`${I}__entered-fields`},e.createElement("span",null,t.enteredFields))),n&&e.createElement("div",{className:de},n)),f?e.createElement("div",{className:P},e.createElement(l.PortalContext.Provider,{value:{fixed:!0}},V)):e.createElement("div",{className:P},V)),e.createElement("div",{className:re},(!f||f&&S)&&W))))}l.Metadata.set(w,{name:"ListBar",props:{activeTab:{type:"Tab"},advancedSearch:{type:"{ isOpen: boolean, enteredFields: number }"},onToggleAdvancedSearch:{type:"(boolean) => void"},onTabChange:{type:"(Tab) => void"},title:{type:"string"},onToolbarPinned:{type:"(boolean) => void"},selectable:{type:"boolean"},isSelected:{type:"boolean"},isIndeterminate:{type:"boolean"},onSelectionChange:{type:"(boolean) => void"},pinResultsBar:{type:"boolean"},pinToolbar:{type:"boolean",default:"true"}}});function R({options:t,activeOption:a,onSortChange:n,defaultOption:s,className:i,...m}){const h=(t||[]).map(c=>[{label:c.label,icon:c.icon},()=>{n&&n(c)}]);return e.createElement(r.SpsDropdown,{className:l.cl(i,be),icon:(a==null?void 0:a.icon)||(s==null?void 0:s.icon),label:(a==null?void 0:a.label)||(s==null?void 0:s.label),options:h})}l.Metadata.set(R,{name:"ListBarSortBy",props:{options:{type:"SortOption[]"},activeOption:{type:"SortOption"},onSortChange:{type:"(option: SortOption) => void"},defaultOption:{type:"SortOption"}}});var Be=G({defaultClassName:"q4fj410",variantClassNames:{open:{true:"q4fj411",false:"q4fj412"}},defaultVariants:{open:!1},compoundVariants:[]}),Te="q4fj414",ge="q4fj415",Ee="q4fj413";function F({formArray:t,formGroup:a,formMeta:n,onSubmit:s,controlsDisabled:i,footerLinks:m,isOpen:h,onClear:c,className:S,children:d,...p}){const{t:b}=e.useContext(l.I18nContext);function B(){c&&c()}return e.createElement("div",{className:l.cl(Be({open:h})),...p},e.createElement(r.SpsForm,{onSubmit:s,formArray:t,formGroup:a,formMeta:n},e.createElement("div",{className:Ee},d),e.createElement("div",{className:Te},m&&e.createElement("div",{id:"footer_links"},l.contentOf(m)),e.createElement("div",{className:ge},e.createElement(T.Button,{kind:"default",type:"button",className:z.sprinkles({mr:"sm"}),onClick:B,disabled:i},b("design-system:advancedSearch.clear")),e.createElement(T.Button,{kind:"key",type:"submit",disabled:i},b("design-system:advancedSearch.search"))))))}l.Metadata.set(F,{name:"Advanced Search",props:{formArray:{type:"SpsFormArray<any>"},formGroup:{type:"SpsFormGroup"},formMeta:{type:"SpsFormSetMeta<any>"},onSubmit:{type:"React.FormEventHandler"},controlsDisabled:{type:"boolean"},footerLinks:{type:"React.ReactNode | (() => React.ReactNode)"},isOpen:{type:"boolean"},onClear:{type:"() => void"}}});const Le={components:[F],examples:{general:{label:"General Usage",description:({NavigateTo:t,Link:a})=>e.createElement(e.Fragment,null,e.createElement("p",null,'Advanced Search is comprised of a panel of input fields, and a text button that exposes and hides the panel. By default, the Advanced Search panel is hidden (with the exception of "Advanced Search Only" scenarios).'),e.createElement("p",null,"Advanced Search works in conjunction with the"," ",e.createElement(t,{to:"list-toolbar"},"List Bar")," and"," ",e.createElement(t,{to:"search-results-bar"},"Search Results")," components. Refer to those pages for additional details."),e.createElement("p",null,"Use the following guidelines when including Advanced Search on your page:",e.createElement("ul",null,e.createElement("li",null,"The Advanced Search Panel can contain any number of input fields."),e.createElement("li",null,"The Advanced Search Panel can place input fields in any unique layout to best serve the needs of the search criteria, but must adhere to the rules of the"," ",e.createElement(a,{to:"/style-and-layout/grid/"},"SPS Grid")," and guidelines for"," ",e.createElement(t,{to:"form"},"Form Layouts"),"."))))},basic:{label:"Basic Usage",description:({NavigateTo:t})=>e.createElement(e.Fragment,null,e.createElement("p",null,"A Basic Advanced Search consists of the List Bar with a search input and an Advanced Search text button. For more details on additional button and component options in the List Bar reference the ",e.createElement(t,{to:"list-toolbar"},"List Bar")," page.")),examples:{basic:{react:o.code`
|
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";
|
package/lib/index.es.js
CHANGED
@@ -35,7 +35,7 @@ function ge(t, a, r) {
|
|
35
35
|
writable: !0
|
36
36
|
}) : t[a] = r, t;
|
37
37
|
}
|
38
|
-
function
|
38
|
+
function _(t, a) {
|
39
39
|
var r = Object.keys(t);
|
40
40
|
if (Object.getOwnPropertySymbols) {
|
41
41
|
var n = Object.getOwnPropertySymbols(t);
|
@@ -48,9 +48,9 @@ function D(t, a) {
|
|
48
48
|
function P(t) {
|
49
49
|
for (var a = 1; a < arguments.length; a++) {
|
50
50
|
var r = arguments[a] != null ? arguments[a] : {};
|
51
|
-
a % 2 ?
|
51
|
+
a % 2 ? _(Object(r), !0).forEach(function(n) {
|
52
52
|
ge(t, n, r[n]);
|
53
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) :
|
53
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : _(Object(r)).forEach(function(n) {
|
54
54
|
Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(r, n));
|
55
55
|
});
|
56
56
|
}
|
@@ -70,7 +70,10 @@ var Te = (t, a, r) => {
|
|
70
70
|
if (h != null) {
|
71
71
|
var l = h;
|
72
72
|
typeof l == "boolean" && (l = l === !0 ? "true" : "false");
|
73
|
-
var p =
|
73
|
+
var p = (
|
74
|
+
// @ts-expect-error
|
75
|
+
t.variantClassNames[c][l]
|
76
|
+
);
|
74
77
|
p && (r += " " + p);
|
75
78
|
}
|
76
79
|
}
|
@@ -165,7 +168,7 @@ function j({
|
|
165
168
|
e.useEffect(() => {
|
166
169
|
Y(S);
|
167
170
|
}, [S]);
|
168
|
-
const [N, z, Z, [V],
|
171
|
+
const [N, z, Z, [V], D] = Q(u, [
|
169
172
|
{ type: F },
|
170
173
|
{ type: M },
|
171
174
|
{ type: R },
|
@@ -190,7 +193,7 @@ function j({
|
|
190
193
|
},
|
191
194
|
/* @__PURE__ */ e.createElement("div", { className: Ce }, /* @__PURE__ */ e.createElement(T, { kind: "link", onClick: W }, H("design-system:listToolbar.advancedSearchToggle"))),
|
192
195
|
(t.enteredFields || 0) > 0 && /* @__PURE__ */ e.createElement(C, { className: ye, kind: "info", "data-testid": `${k}__entered-fields` }, /* @__PURE__ */ e.createElement("span", null, t.enteredFields))
|
193
|
-
), r && /* @__PURE__ */ e.createElement("div", { className: xe }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement($.Provider, { value: { fixed: !0 } },
|
196
|
+
), r && /* @__PURE__ */ e.createElement("div", { className: xe }, r)), S ? /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement($.Provider, { value: { fixed: !0 } }, D)) : /* @__PURE__ */ e.createElement("div", { className: G }, D)), /* @__PURE__ */ e.createElement("div", { className: be }, (!S || S && p) && Z))));
|
194
197
|
}
|
195
198
|
b.set(j, {
|
196
199
|
name: "ListBar",
|
@@ -242,7 +245,7 @@ b.set(K, {
|
|
242
245
|
defaultOption: { type: "SortOption" }
|
243
246
|
}
|
244
247
|
});
|
245
|
-
var Ne = U({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ve = "q4fj414",
|
248
|
+
var Ne = U({ defaultClassName: "q4fj410", variantClassNames: { open: { true: "q4fj411", false: "q4fj412" } }, defaultVariants: { open: !1 }, compoundVariants: [] }), Ve = "q4fj414", De = "q4fj415", _e = "q4fj413";
|
246
249
|
function q({
|
247
250
|
formArray: t,
|
248
251
|
formGroup: a,
|
@@ -260,7 +263,7 @@ function q({
|
|
260
263
|
function g() {
|
261
264
|
l && l();
|
262
265
|
}
|
263
|
-
return /* @__PURE__ */ e.createElement("div", { className: x(Ne({ open: h })), ...u }, /* @__PURE__ */ e.createElement(se, { onSubmit: n, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className:
|
266
|
+
return /* @__PURE__ */ e.createElement("div", { className: x(Ne({ open: h })), ...u }, /* @__PURE__ */ e.createElement(se, { onSubmit: n, formArray: t, formGroup: a, formMeta: r }, /* @__PURE__ */ e.createElement("div", { className: _e }, i), /* @__PURE__ */ e.createElement("div", { className: Ve }, m && /* @__PURE__ */ e.createElement("div", { id: "footer_links" }, ee(m)), /* @__PURE__ */ e.createElement("div", { className: De }, /* @__PURE__ */ e.createElement(
|
264
267
|
T,
|
265
268
|
{
|
266
269
|
kind: "default",
|
@@ -841,6 +844,59 @@ const Ue = {
|
|
841
844
|
}
|
842
845
|
}
|
843
846
|
},
|
847
|
+
/*
|
848
|
+
* TODO: updates needed to the list toolbar component
|
849
|
+
* savedSearch: {
|
850
|
+
* label: 'Saved Search',
|
851
|
+
* description: () => (
|
852
|
+
* <p>
|
853
|
+
* Use the Saved Search feature to enable users to repeat a
|
854
|
+
* frequently-executed search query.
|
855
|
+
* For more information, visit the Saved Search page.
|
856
|
+
* </p>
|
857
|
+
* ),
|
858
|
+
* examples: {
|
859
|
+
* savedSearch: {
|
860
|
+
* react: code`
|
861
|
+
* function Component() {
|
862
|
+
* const { formValue, formMeta, updateForm } = useSpsForm({
|
863
|
+
* searchText: "",
|
864
|
+
* });
|
865
|
+
*/
|
866
|
+
/*
|
867
|
+
* function handleSearch(event) {
|
868
|
+
* console.log(event, formValue.searchText)
|
869
|
+
* }
|
870
|
+
*/
|
871
|
+
/*
|
872
|
+
* return (
|
873
|
+
* <SpsListToolbar>
|
874
|
+
* <SpsListToolbarSearch onSubmit={handleSearch}>
|
875
|
+
* <SpsTextInput
|
876
|
+
* value={formValue.searchText}
|
877
|
+
* formMeta={formMeta.fields.searchText}
|
878
|
+
* placeholder="Search fields"
|
879
|
+
* />
|
880
|
+
* <SpsButton
|
881
|
+
* kind={ButtonKind.ICON}
|
882
|
+
* icon={SpsIcon.SEARCH}
|
883
|
+
* type="submit"
|
884
|
+
* />
|
885
|
+
* </SpsListToolbarSearch>
|
886
|
+
* <SpsDropdown
|
887
|
+
* label="Saved Searches"
|
888
|
+
* options={[
|
889
|
+
* [{ label: "Option A" }, () => console.log("Option A")],
|
890
|
+
* ]}
|
891
|
+
* />
|
892
|
+
* </SpsListToolbar>
|
893
|
+
* )
|
894
|
+
* }
|
895
|
+
* `,
|
896
|
+
* },
|
897
|
+
* },
|
898
|
+
* },
|
899
|
+
*/
|
844
900
|
advancedSearch: {
|
845
901
|
label: "Advanced Search",
|
846
902
|
description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Include the Advanced Search feature when more complex options are required to narrow down search results. For more information, visit the", " ", /* @__PURE__ */ e.createElement(t, { to: "advanced-search" }, "Advanced Search"), " page."),
|
@@ -1075,6 +1131,7 @@ const Ue = {
|
|
1075
1131
|
}
|
1076
1132
|
}
|
1077
1133
|
},
|
1134
|
+
// TODO: do this in column editor ticket
|
1078
1135
|
columnEditor: {
|
1079
1136
|
label: "Column Editor",
|
1080
1137
|
description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use a Column Editor when tables require the ability to show or hide specific columns based on the user's preferences. The Column Editor should only be used for", " ", /* @__PURE__ */ e.createElement(t, { to: "tables" }, "Tables"), ", and not any other type of list view. For more information, visit the ", /* @__PURE__ */ e.createElement(t, { to: "column-chooser" }, "Column Editor"), " page."),
|
@@ -1123,6 +1180,112 @@ const Ue = {
|
|
1123
1180
|
}
|
1124
1181
|
}
|
1125
1182
|
},
|
1183
|
+
/*
|
1184
|
+
* TODO: add when list view selector is implemented
|
1185
|
+
* listViewSelector: {
|
1186
|
+
* label: 'List View Selector',
|
1187
|
+
* description: ({ NavigateTo }) => (
|
1188
|
+
* <p>
|
1189
|
+
* Use a List View Selector to change the visual display of the list between{' '}
|
1190
|
+
* <NavigateTo to="tables">Tables</NavigateTo>,{' '}
|
1191
|
+
* <NavigateTo to="content-rows">Content Rows</NavigateTo>,{' '}
|
1192
|
+
* <NavigateTo to="cards">Cards</NavigateTo>.
|
1193
|
+
* </p>
|
1194
|
+
* ),
|
1195
|
+
* examples: {
|
1196
|
+
* listView: {
|
1197
|
+
* react: code`
|
1198
|
+
* function Component() {
|
1199
|
+
* const { formValue, formMeta, updateForm } = useSpsForm({
|
1200
|
+
* searchText: "",
|
1201
|
+
* });
|
1202
|
+
*/
|
1203
|
+
/*
|
1204
|
+
* function handleSearch(event) {
|
1205
|
+
* console.log(event, formValue.searchText)
|
1206
|
+
* }
|
1207
|
+
*/
|
1208
|
+
/*
|
1209
|
+
* return (
|
1210
|
+
* <SpsListToolbar>
|
1211
|
+
* <SpsListToolbarSearch onSubmit={handleSearch}>
|
1212
|
+
* <SpsTextInput
|
1213
|
+
* value={formValue.searchText}
|
1214
|
+
* formMeta={formMeta.fields.searchText}
|
1215
|
+
* placeholder="Search fields"
|
1216
|
+
* />
|
1217
|
+
* <SpsButton
|
1218
|
+
* kind={ButtonKind.ICON}
|
1219
|
+
* icon={SpsIcon.SEARCH}
|
1220
|
+
* type="submit"
|
1221
|
+
* />
|
1222
|
+
* </SpsListToolbarSearch>
|
1223
|
+
* <SpsButton kind={ButtonKind.ICON} icon={SpsIcon.LIST_TABLE} />
|
1224
|
+
* </SpsListToolbar>
|
1225
|
+
* )
|
1226
|
+
* }
|
1227
|
+
* `,
|
1228
|
+
* },
|
1229
|
+
* },
|
1230
|
+
* },
|
1231
|
+
* TODO: add example when sorting feature is implemented
|
1232
|
+
* sorting: {
|
1233
|
+
* label: 'Sorting',
|
1234
|
+
* description: ({ NavigateTo }) => (
|
1235
|
+
* <>
|
1236
|
+
* <p>
|
1237
|
+
* Use the Sorting feature only when content is displayed in{' '}
|
1238
|
+
* <NavigateTo to="content-rows">Content Rows</NavigateTo> or{' '}
|
1239
|
+
* <NavigateTo to="cards">Cards</NavigateTo>.
|
1240
|
+
* </p>
|
1241
|
+
* <i>
|
1242
|
+
* Note: The <NavigateTo to="tables">Table</NavigateTo> component has its own
|
1243
|
+
* sorting options for each column.
|
1244
|
+
* </i>
|
1245
|
+
* </>
|
1246
|
+
* ),
|
1247
|
+
* examples: {
|
1248
|
+
* sorting: {
|
1249
|
+
* react: code`
|
1250
|
+
* function Component() {
|
1251
|
+
* const { formValue, formMeta, updateForm } = useSpsForm({
|
1252
|
+
* searchText: "",
|
1253
|
+
* });
|
1254
|
+
*/
|
1255
|
+
/*
|
1256
|
+
* function handleSearch(event) {
|
1257
|
+
* console.log(event, formValue.searchText)
|
1258
|
+
* }
|
1259
|
+
*/
|
1260
|
+
/*
|
1261
|
+
* return (
|
1262
|
+
* <SpsListToolbar>
|
1263
|
+
* <SpsListToolbarSearch onSubmit={handleSearch}>
|
1264
|
+
* <SpsTextInput
|
1265
|
+
* value={formValue.searchText}
|
1266
|
+
* formMeta={formMeta.fields.searchText}
|
1267
|
+
* placeholder="Search fields"
|
1268
|
+
* />
|
1269
|
+
* <SpsButton
|
1270
|
+
* kind={ButtonKind.ICON}
|
1271
|
+
* icon={SpsIcon.SEARCH}
|
1272
|
+
* type="submit"
|
1273
|
+
* />
|
1274
|
+
* </SpsListToolbarSearch>
|
1275
|
+
* <SpsButton
|
1276
|
+
* className="gray500"
|
1277
|
+
* kind={ButtonKind.LINK}
|
1278
|
+
* icon={SpsIcon.ARROW_DOWN}>
|
1279
|
+
* Order Type
|
1280
|
+
* </SpsButton>
|
1281
|
+
* </SpsListToolbar>
|
1282
|
+
* )
|
1283
|
+
* }
|
1284
|
+
* `,
|
1285
|
+
* },
|
1286
|
+
* },
|
1287
|
+
* },
|
1288
|
+
*/
|
1126
1289
|
buttons: {
|
1127
1290
|
label: "Buttons",
|
1128
1291
|
description: ({ NavigateTo: t }) => /* @__PURE__ */ e.createElement("p", null, "Use Buttons only for actions that do not affect existing list items, such as exporting the list or creating a new list item. For actions that are taken on list items, such as changing a status of a list item, refer to the", " ", /* @__PURE__ */ e.createElement(t, { to: "list-action-bar" }, "List Action Bar"), "."),
|
package/lib/style.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
._9h4p701{background
|
1
|
+
._9h4p701{background:#fff;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-flow:column wrap;margin-top:0;margin-right:0;margin-bottom:.5rem;margin-left:0;position:relative}._9h4p702{width:75rem;border-radius:0;margin-left:-37.5rem;position:fixed;top:3.75rem;left:50%;z-index:999}._9h4p702:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.1),transparent);display:block;height:.625rem;left:-.0625rem;position:absolute;top:calc(100% + 1px);width:75rem}._9h4p704{display:flex;flex-wrap:wrap;padding:.5rem}._9h4p705{display:flex;align-items:center;border-right-color:#d2d4d4;border-right-style:solid;border-right-width:.0625rem;padding:1rem;margin:-.5rem .5rem -.5rem -.5rem}._9h4p706{align-items:center;display:inline-flex;flex:1 0 auto;height:2rem;vertical-align:middle}._9h4p707{padding-top:.25rem;padding-right:0;padding-bottom:.25rem;padding-left:0;white-space:nowrap}._9h4p708{display:inline-block;position:relative}._9h4p709{margin-left:.25rem}._9h4p70a{align-items:center;display:flex;float:left;font-size:.75rem;font-weight:600;line-height:1.5rem;margin-bottom:0;padding-left:.5rem;text-transform:uppercase}._9h4p70b{display:inline-block;height:2rem;margin-left:.5rem;text-align:right;vertical-align:middle;white-space:nowrap}._9h4p70c{flex:1;margin-right:.25rem;max-width:25rem}._9h4p70e{background-color:#e9e9ea;border-color:#717779;border-width:.0625rem;border-style:solid;border-bottom-left-radius:0;border-bottom-right-radius:.25rem;border-top-left-radius:0;border-top-right-radius:.25rem;border-left-width:0}._9h4p70e:hover{background-color:#d2d4d4;border-width:.0625rem;border-style:solid;border-color:#717779;border-left-width:0}._9h4p70f>.sps-button{margin:0!important;background:transparent;border-color:transparent;color:#4b5356}._9h4p70f>.sps-button>button{padding:.25rem}._9h4p70e>button{height:1.875rem}._9h4p70a>i{font-size:.875rem;margin-right:.25rem}._9h4p70d>.sps-input-group>.sps-autocomplete{flex:1}._9h4p70d>.sps-input-group>.sps-select{min-width:30%}._9h4p70d>.sps-input-group>.sps-select:not(:last-child)>.sps-select__dropctrl{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:first-child)>.sps-text-input>.sps-form-control{border-bottom-left-radius:0;border-top-left-radius:0;border-left:0}._9h4p70d>.sps-input-group>.sps-autocomplete:not(:last-child)>.sps-text-input>.sps-form-control{height:2rem;line-height:2rem;border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:last-child)>.sps-form-control{border-bottom-right-radius:0;border-top-right-radius:0}._9h4p70d>.sps-input-group>.sps-text-input:not(:first-child):not(:only-child)>.sps-form-control{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}._1gxdcgc1{background-color:#e9e9ea;border-width:.0625rem;border-color:#d2d4d4;border-style:solid;border-radius:.25rem;display:flex;min-height:3.25rem}._9h4p701>._1gxdcgc0>._1gxdcgc1{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.125rem;border-bottom-right-radius:.125rem;border-top-width:.0625rem;border-right-width:0;border-bottom-width:0;border-left-width:0}._1gxdcgc2{flex:1 1 auto;border-right-width:.0625rem;border-right-color:#d2d4d4;border-right-style:solid;padding:.5rem;display:flex;align-items:center}._1gxdcgc3{margin-left:.25rem}._1gxdcgc4{flex:1 1 100%;padding:.5rem;display:flex;align-items:center;flex-wrap:wrap}._1gxdcgc5{margin-top:0;margin-bottom:0;margin-right:.25rem;margin-left:.25rem}._1gxdcgc5:first-child{margin-left:0}._1gxdcgc6{margin-top:.125rem;margin-bottom:.125rem;margin-right:.25rem}._1gxdcgc6:last-child{margin-right:0}._1gxdcgc7{flex:1 1 auto;border-left-width:.0625rem;border-left-style:solid;border-left-color:#d2d4d4;display:flex;align-items:center}._1gxdcgc7:hover{background:#d2d4d4}._1gxdcgc8{padding:.5rem;width:5.25rem}.q4fj410{background:#fff;border-color:#d2d4d4;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-style:solid;border-top-width:0;border-right-width:.0625rem;border-bottom-width:.0625rem;border-left-width:.0625rem;display:none;margin-top:-.625rem;margin-right:0;margin-bottom:1rem;margin-left:0}.q4fj411{display:block}.q4fj413{padding:1rem}.q4fj414{background:#f3f4f4;border-top-left-radius:undefined;border-top-right-radius:undefined;border-bottom-left-radius:undefined;border-bottom-right-radius:undefined;display:flex;padding:.5rem}.q4fj415{text-align:right}.q4fj414>*{flex:1}
|
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.7.
|
4
|
+
"version": "8.7.6",
|
5
5
|
"author": "SPS Commerce",
|
6
6
|
"license": "UNLICENSED",
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/list-bar",
|
@@ -29,12 +29,12 @@
|
|
29
29
|
"@spscommerce/utils": "^6.12.1",
|
30
30
|
"react": "^16.9.0",
|
31
31
|
"react-dom": "^16.9.0",
|
32
|
-
"@sps-woodland/core": "8.7.
|
33
|
-
"@sps-woodland/tokens": "8.7.
|
34
|
-
"@sps-woodland/tabs": "8.7.
|
35
|
-
"@sps-woodland/buttons": "8.7.
|
36
|
-
"@sps-woodland/tags": "8.7.
|
37
|
-
"@spscommerce/ds-react": "8.7.
|
32
|
+
"@sps-woodland/core": "8.7.6",
|
33
|
+
"@sps-woodland/tokens": "8.7.6",
|
34
|
+
"@sps-woodland/tabs": "8.7.6",
|
35
|
+
"@sps-woodland/buttons": "8.7.6",
|
36
|
+
"@sps-woodland/tags": "8.7.6",
|
37
|
+
"@spscommerce/ds-react": "8.7.6"
|
38
38
|
},
|
39
39
|
"devDependencies": {
|
40
40
|
"@react-stately/collections": "^3.3.3",
|
@@ -43,13 +43,13 @@
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
44
44
|
"react": "^16.9.0",
|
45
45
|
"react-dom": "^16.9.0",
|
46
|
-
"@sps-woodland/core": "8.7.
|
47
|
-
"@sps-woodland/tokens": "8.7.
|
48
|
-
"@sps-woodland/tabs": "8.7.
|
49
|
-
"@sps-woodland/buttons": "8.7.
|
50
|
-
"@sps-woodland/tags": "8.7.
|
51
|
-
"@spscommerce/ds-react": "8.7.
|
52
|
-
"@spscommerce/ds-shared": "8.7.
|
46
|
+
"@sps-woodland/core": "8.7.6",
|
47
|
+
"@sps-woodland/tokens": "8.7.6",
|
48
|
+
"@sps-woodland/tabs": "8.7.6",
|
49
|
+
"@sps-woodland/buttons": "8.7.6",
|
50
|
+
"@sps-woodland/tags": "8.7.6",
|
51
|
+
"@spscommerce/ds-react": "8.7.6",
|
52
|
+
"@spscommerce/ds-shared": "8.7.6"
|
53
53
|
},
|
54
54
|
"scripts": {
|
55
55
|
"build": "pnpm run build:js && pnpm run build:types",
|
File without changes
|