@spscommerce/ds-react 5.21.0 → 5.21.2

package/lib/index.cjs.js

@@ -5916,7 +5916,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             MacNeil Automotive Parts
                         </SpsPageSubtitle>
                     </SpsPageTitle>
-                `}}}},GI={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number"},UI=$(I({},q),{action:re(),captionKey:T.exports.string,comparisonKey:T.exports.string,disabled:T.exports.bool,formControl:ce(),formMeta:ce(),notClearable:T.exports.bool,options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,onChange:re(),placeholder:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,tallOptionList:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,value:T.exports.any,zeroState:T.exports.string,autoFixWidth:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool,maxHeightOptionListPx:T.exports.number,maxHeightOptionListRem:T.exports.number}),Lr=s.forwardRef((e,t)=>{const bt=e,{action:n,autoFixWidth:a=!1,captionKey:o,className:i,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:g,onChange:v,onClick:C,placeholder:k,searchDebounce:S,searchPlaceholder:w="Search\u2026",tallOptionList:E,textKey:y,valueKey:N,unsafelyReplaceClassName:_,value:R,zeroState:O,loading:B,filterByTextAndCaptionKey:F,maxHeightOptionListPx:P,maxHeightOptionListRem:U,"data-testid":K}=bt,j=Z(bt,["action","autoFixWidth","captionKey","className","comparisonKey","disabled","formControl","formMeta","id","notClearable","options","onChange","onClick","placeholder","searchDebounce","searchPlaceholder","tallOptionList","textKey","valueKey","unsafelyReplaceClassName","value","zeroState","loading","filterByTextAndCaptionKey","maxHeightOptionListPx","maxHeightOptionListRem","data-testid"]),J=u||p,{wrapperId:ee,controlId:ae}=Ft(f,J),pe=s.useRef(null),de=s.useRef(null),G=s.useRef(null),{t:X}=s.useContext(Ye),[V,oe]=Zt({isOpen:!1,value:R,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ne(ye){oe({value:ye,text:ye&&y?ye[y]:ye})}function se(ye){ne(ye);const Ae=ye&&N&&typeof ye=="object"?ye[N]:ye;J&&(J.setValue(Ae),J.markAsDirty()),v&&v(new Vn({value:Ae}))}s.useEffect(()=>{ne(R)},[R,y]);function Q(){se(void 0)}function Ie(){oe({isOpen:!1})}function Be(ye){ye.nativeEvent.stopImmediatePropagation(),c||oe({isOpen:!V.isOpen})}function ve(ye){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ye.key)>-1&&ye.preventDefault(),ye.persist(),oe({keyDown:ye}))}function Fe(ye){oe({isOpen:ye})}function Ve(ye){oe({opensUpward:ye})}function Qe(ye){ye.detail!==ee&&oe({isOpen:!1})}function Ze(ye){oe({optionIds:new Array(ye).fill("").map((Ae,De)=>`${ee}-options-option-${De}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",Ie),document.addEventListener("DropdownOpened",Qe),()=>{document.removeEventListener("click",Ie),document.removeEventListener("DropdownOpened",Qe)}),[]),s.useLayoutEffect(()=>{if(a&&G.current&&pe.current){pe.current.style.width=null;const Ae=`${pe.current.getBoundingClientRect().width+6}px`;pe.current.style.width=Ae,G.current.style.width=Ae,G.current.style.maxWidth=Ae}}),cd(()=>{if(V.isOpen){const ye=document.createEvent("CustomEvent");ye.initCustomEvent("DropdownOpened",!1,!1,ee),document.dispatchEvent(ye)}else de.current.focus()},[V.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{de.current.focus()}}));const st=A(_||"sps-select",V.isOpen&&"sps-select--open",V.isOpen&&"z-stratum-dropdown",V.opensUpward&&"sps-select--opens-upward",i),et=V.text||k||X("design-system:select.defaultPlaceholder");return s.createElement(Tt,I({id:ee,className:st,onKeyDown:ve,formControl:p,formMeta:u,ref:de,role:"listbox","aria-owns":V.optionIds,"data-testid":K,onClick:C},j),s.createElement("div",{className:A("sps-select__dropctrl",c&&"disabled"),id:ae,tabIndex:0,onClick:Be,ref:G,title:et,"data-testid":`${K}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:A("sps-select__value",!V.text&&"sps-select__value--placeholder"),"data-testid":`${K}-value`},et),V.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:Q,"data-testid":`${K}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Ka,{id:`${ee}-options`,ref:pe,attachTo:G,captionKey:o,comparisonKey:l,isOpen:V.isOpen,keyDown:V.keyDown,nullOption:V.value&&!m?k:null,options:g,onOptionSelected:se,onPositionFlip:Ve,onSelfToggle:Fe,searchDebounce:S,searchPlaceholder:w,selectedOption:V.value,specialAction:n,tall:E,textKey:y,filterByTextAndCaptionKey:F,optionRole:"option",valueKey:N,onOptionListChanged:Ze,zeroState:O,ignoreWidthStyles:a,loading:B,maxHeightPx:P,maxHeightRem:U,"data-testid":`${K}-option-list`}))});Object.assign(Lr,{props:GI,propTypes:UI,displayName:"SpsSelect"});const zI={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean"},qI=I({numPages:T.exports.number,onPageChange:re(),page:T.exports.number,disabled:T.exports.bool},q);function Br(e){const y=e,{numPages:t=0,onPageChange:n,page:a=1,unsafelyReplaceClassName:o,className:i,"data-testid":l,disabled:c=!1}=y,p=Z(y,["numPages","onPageChange","page","unsafelyReplaceClassName","className","data-testid","disabled"]),{t:u}=s.useContext(Ye),[f,m]=s.useState(a),[g,v]=s.useState(a);s.useEffect(()=>{v(a),m(a)},[a]);function C(N){const _=x.constrain(N,[1,t]);_!==f&&(v(_),m(_),n&&typeof n=="function"&&n(_))}const k=x.debounce(C,500);function S(N){m(N.target.value),k(parseInt(N.target.value,10))}const w=A(o||"sps-page-selector",i),E=ca(null);return s.createElement("div",I({className:w,"data-testid":l},p),s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},f),s.createElement("label",{htmlFor:E.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement("input",{id:E.current,type:"text",value:f,onInput:S,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c})),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t})),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:A("sps-button","sps-button--icon",(g===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g-1),disabled:g===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:A("sps-button","sps-button--icon",(g===t||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g+1),disabled:g===t||c,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Br,{props:zI,propTypes:qI,displayName:"SpsPageSelector"});const JI={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean"},ZI=I({onPageChange:re().isRequired,page:T.exports.number,pageSize:T.exports.number,pageSizeOptions:T.exports.arrayOf(T.exports.number),totalResults:T.exports.number,disabled:T.exports.bool},q);function pl(e){const _=e,{className:t,onPageChange:n,page:a=1,pageSizeOptions:o=M.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:i=o[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1}=_,f=Z(_,["className","onPageChange","page","pageSizeOptions","pageSize","data-testid","totalResults","unsafelyReplaceClassName","disabled"]),[m,g]=Zt({page:a,pageSize:i,numPages:0,indices:[0,0]});function v(R=m.pageSize){return Math.ceil(c/R)}function C(R=m.page,O=m.pageSize){const B=v(O),F=R===B&&c%O||O,P=B===0?0:F,U=(R-1)*O;return B===0?[0,0]:[U+1,U+P]}function k(R){const O={page:R,indices:C(R)};return g(O),O}function S(R,O){const B={page:O,pageSize:R,numPages:v(R),indices:C(O,R)};return g(B),B}s.useEffect(()=>{a!==m.page&&k(a)},[a]),s.useEffect(()=>{i!==m.pageSize&&S(i,a!==m.page?a:m.page)},[i]),s.useEffect(()=>{g({numPages:v(),indices:C()})},[c]);function w(){return typeof c=="number"?c:"many"}function E(R){const O=S(R.target.value,1);n(O.page,O.pageSize,O.indices)}function y(R){const O=k(R);n(O.page,m.pageSize,O.indices)}const N=A(p||"sps-pagination",t);return s.createElement("div",I({className:N,"data-testid":l},f),s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Lr,{options:o,onChange:E,notClearable:!0,autoFixWidth:!0,value:m.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),s.createElement("div",{className:"sps-pagination__details"},`Viewing ${m.indices[0]} - ${m.indices[1]} of ${w()}`),s.createElement(Br,{numPages:m.numPages,page:m.page,onPageChange:y,disabled:u}))}Object.assign(pl,{props:JI,propTypes:ZI,displayName:"SpsPagination"});const Mf={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," ","(left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the"," ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:x.code`
+                `}}}},GI={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number"},UI=$(I({},q),{action:re(),captionKey:T.exports.string,comparisonKey:T.exports.string,disabled:T.exports.bool,formControl:ce(),formMeta:ce(),notClearable:T.exports.bool,options:T.exports.oneOfType([T.exports.array,T.exports.instanceOf(Promise),re()]).isRequired,onChange:re(),placeholder:T.exports.string,searchDebounce:T.exports.number,searchPlaceholder:T.exports.string,tallOptionList:T.exports.bool,textKey:T.exports.string,valueKey:T.exports.string,value:T.exports.any,zeroState:T.exports.string,autoFixWidth:T.exports.bool,loading:T.exports.bool,filterByTextAndCaptionKey:T.exports.bool,maxHeightOptionListPx:T.exports.number,maxHeightOptionListRem:T.exports.number}),Lr=s.forwardRef((e,t)=>{const bt=e,{action:n,autoFixWidth:a=!1,captionKey:o,className:i,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:g,onChange:v,onClick:C,placeholder:k,searchDebounce:S,searchPlaceholder:w="Search\u2026",tallOptionList:E,textKey:y,valueKey:N,unsafelyReplaceClassName:_,value:R,zeroState:O,loading:B,filterByTextAndCaptionKey:F,maxHeightOptionListPx:P,maxHeightOptionListRem:U,"data-testid":K}=bt,j=Z(bt,["action","autoFixWidth","captionKey","className","comparisonKey","disabled","formControl","formMeta","id","notClearable","options","onChange","onClick","placeholder","searchDebounce","searchPlaceholder","tallOptionList","textKey","valueKey","unsafelyReplaceClassName","value","zeroState","loading","filterByTextAndCaptionKey","maxHeightOptionListPx","maxHeightOptionListRem","data-testid"]),J=u||p,{wrapperId:ee,controlId:ae}=Ft(f,J),pe=s.useRef(null),de=s.useRef(null),G=s.useRef(null),{t:X}=s.useContext(Ye),[V,oe]=Zt({isOpen:!1,value:R,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ne(ye){oe({value:ye,text:ye&&y?ye[y]:ye})}function se(ye){ne(ye);const Ae=ye&&N&&typeof ye=="object"?ye[N]:ye;J&&(J.setValue(Ae),J.markAsDirty()),v&&v(new Vn({value:Ae}))}s.useEffect(()=>{ne(R)},[R,y]);function Q(){se(void 0)}function Ie(){oe({isOpen:!1})}function Be(ye){ye.nativeEvent.stopImmediatePropagation(),c||oe({isOpen:!V.isOpen})}function ve(ye){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ye.key)>-1&&ye.preventDefault(),ye.persist(),oe({keyDown:ye}))}function Fe(ye){oe({isOpen:ye})}function Ve(ye){oe({opensUpward:ye})}function Qe(ye){ye.detail!==ee&&oe({isOpen:!1})}function Ze(ye){oe({optionIds:new Array(ye).fill("").map((Ae,De)=>`${ee}-options-option-${De}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",Ie),document.addEventListener("DropdownOpened",Qe),()=>{document.removeEventListener("click",Ie),document.removeEventListener("DropdownOpened",Qe)}),[]),s.useLayoutEffect(()=>{if(a&&G.current&&pe.current){pe.current.style.width=null;const Ae=`${pe.current.getBoundingClientRect().width+6}px`;pe.current.style.width=Ae,G.current.style.width=Ae,G.current.style.maxWidth=Ae}}),cd(()=>{if(V.isOpen){const ye=document.createEvent("CustomEvent");ye.initCustomEvent("DropdownOpened",!1,!1,ee),document.dispatchEvent(ye)}else de.current.focus()},[V.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{de.current.focus()}}));const st=A(_||"sps-select",V.isOpen&&"sps-select--open",V.isOpen&&"z-stratum-dropdown",V.opensUpward&&"sps-select--opens-upward",i),et=V.text||k||X("design-system:select.defaultPlaceholder");return s.createElement(Tt,I({id:ee,className:st,onKeyDown:ve,formControl:p,formMeta:u,ref:de,role:"listbox","aria-owns":V.optionIds,"data-testid":K,onClick:C},j),s.createElement("div",{className:A("sps-select__dropctrl",c&&"disabled"),id:ae,tabIndex:0,onClick:Be,ref:G,title:et,"data-testid":`${K}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:A("sps-select__value",!V.text&&"sps-select__value--placeholder"),"data-testid":`${K}-value`},et),V.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:Q,"data-testid":`${K}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Ka,{id:`${ee}-options`,ref:pe,attachTo:G,captionKey:o,comparisonKey:l,isOpen:V.isOpen,keyDown:V.keyDown,options:g,onOptionSelected:se,onPositionFlip:Ve,onSelfToggle:Fe,searchDebounce:S,searchPlaceholder:w,selectedOption:V.value,specialAction:n,tall:E,textKey:y,filterByTextAndCaptionKey:F,optionRole:"option",valueKey:N,onOptionListChanged:Ze,zeroState:O,ignoreWidthStyles:a,loading:B,maxHeightPx:P,maxHeightRem:U,"data-testid":`${K}-option-list`}))});Object.assign(Lr,{props:GI,propTypes:UI,displayName:"SpsSelect"});const zI={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean"},qI=I({numPages:T.exports.number,onPageChange:re(),page:T.exports.number,disabled:T.exports.bool},q);function Br(e){const y=e,{numPages:t=0,onPageChange:n,page:a=1,unsafelyReplaceClassName:o,className:i,"data-testid":l,disabled:c=!1}=y,p=Z(y,["numPages","onPageChange","page","unsafelyReplaceClassName","className","data-testid","disabled"]),{t:u}=s.useContext(Ye),[f,m]=s.useState(a),[g,v]=s.useState(a);s.useEffect(()=>{v(a),m(a)},[a]);function C(N){const _=x.constrain(N,[1,t]);_!==f&&(v(_),m(_),n&&typeof n=="function"&&n(_))}const k=x.debounce(C,500);function S(N){m(N.target.value),k(parseInt(N.target.value,10))}const w=A(o||"sps-page-selector",i),E=ca(null);return s.createElement("div",I({className:w,"data-testid":l},p),s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},f),s.createElement("label",{htmlFor:E.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement("input",{id:E.current,type:"text",value:f,onInput:S,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c})),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?u("design-system:pagination.ofMany"):u("design-system:pagination.ofPageCount",{pageCount:t})),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:A("sps-button","sps-button--icon",(g===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g-1),disabled:g===1||c,title:u("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:A("sps-button","sps-button--icon",(g===t||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>C(g+1),disabled:g===t||c,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Br,{props:zI,propTypes:qI,displayName:"SpsPageSelector"});const JI={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean"},ZI=I({onPageChange:re().isRequired,page:T.exports.number,pageSize:T.exports.number,pageSizeOptions:T.exports.arrayOf(T.exports.number),totalResults:T.exports.number,disabled:T.exports.bool},q);function pl(e){const _=e,{className:t,onPageChange:n,page:a=1,pageSizeOptions:o=M.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:i=o[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1}=_,f=Z(_,["className","onPageChange","page","pageSizeOptions","pageSize","data-testid","totalResults","unsafelyReplaceClassName","disabled"]),[m,g]=Zt({page:a,pageSize:i,numPages:0,indices:[0,0]});function v(R=m.pageSize){return Math.ceil(c/R)}function C(R=m.page,O=m.pageSize){const B=v(O),F=R===B&&c%O||O,P=B===0?0:F,U=(R-1)*O;return B===0?[0,0]:[U+1,U+P]}function k(R){const O={page:R,indices:C(R)};return g(O),O}function S(R,O){const B={page:O,pageSize:R,numPages:v(R),indices:C(O,R)};return g(B),B}s.useEffect(()=>{a!==m.page&&k(a)},[a]),s.useEffect(()=>{i!==m.pageSize&&S(i,a!==m.page?a:m.page)},[i]),s.useEffect(()=>{g({numPages:v(),indices:C()})},[c]);function w(){return typeof c=="number"?c:"many"}function E(R){const O=S(R.target.value,1);n(O.page,O.pageSize,O.indices)}function y(R){const O=k(R);n(O.page,m.pageSize,O.indices)}const N=A(p||"sps-pagination",t);return s.createElement("div",I({className:N,"data-testid":l},f),s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Lr,{options:o,onChange:E,notClearable:!0,autoFixWidth:!0,value:m.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),s.createElement("div",{className:"sps-pagination__details"},`Viewing ${m.indices[0]} - ${m.indices[1]} of ${w()}`),s.createElement(Br,{numPages:m.numPages,page:m.page,onPageChange:y,disabled:u}))}Object.assign(pl,{props:JI,propTypes:ZI,displayName:"SpsPagination"});const Mf={general:{label:"General Usage",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the Standard Pagination Bar on a list page (comprised of a Table, Content Rows, or Content Tiles). It should always appear at the bottom of the listed records."),s.createElement("p",null,"Use the Mini Pagination component when a paginated list of results exists inside a smaller Card."))},pagination:{label:"Standard Pagination Bar",description:({Link:e})=>s.createElement(s.Fragment,null,s.createElement("p",null,"The Standard Pagination Bar is comprised of three main sections. The middle section is hidden from view when the width of its container is at the responsive breakpoint of 767 pixels."),s.createElement("ul",null,s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Results-per-page Select")," ","(left): allows the user to adjust the number of records being displayed per page.*")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Viewing details")," (middle): describes which results are being displayed on the current page.")),s.createElement("li",null,s.createElement("p",null,s.createElement("span",{className:"sps-text-semibold"},"Page Navigator")," (right): allows the user to navigate between pages of results"))),s.createElement("i",null,"*Note: For Tables and Content Rows, per-page options should be 25, 50, and 100. For Content Tiles, per-page options should be 24, 48, and 100."),s.createElement("br",null),s.createElement("p",{className:"mt-2"},"To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the"," ",s.createElement(e,{to:"/style-and-layout/page-types"},"Page Types")," page.")),examples:{basic:{description:()=>s.createElement("h4",null,"Building the Standard Pagination Bar"),react:x.code`
                     function Component() {
                         const [page, setPage] = React.useState(2);
                         const [pageSize, setPageSize] = React.useState(25);

package/lib/index.es.js

@@ -30892,7 +30892,6 @@ const SpsSelect = React.forwardRef((props2, ref2) => {
     comparisonKey,
     isOpen: state.isOpen,
     keyDown: state.keyDown,
-    nullOption: state.value && !notClearable ? placeholder : null,
     options,
     onOptionSelected: updateValue,
     onPositionFlip: handlePositionFlip,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.21.0",
+  "version": "5.21.2",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,11 +28,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.21.0",
-    "@spscommerce/ds-illustrations": "5.21.0",
-    "@spscommerce/ds-shared": "5.21.0",
-    "@spscommerce/positioning": "5.21.0",
-    "@spscommerce/utils": "5.21.0",
+    "@spscommerce/ds-colors": "5.21.2",
+    "@spscommerce/ds-illustrations": "5.21.2",
+    "@spscommerce/ds-shared": "5.21.2",
+    "@spscommerce/positioning": "5.21.2",
+    "@spscommerce/utils": "5.21.2",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -40,11 +40,11 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.21.0",
-    "@spscommerce/ds-illustrations": "5.21.0",
-    "@spscommerce/ds-shared": "5.21.0",
-    "@spscommerce/positioning": "5.21.0",
-    "@spscommerce/utils": "5.21.0",
+    "@spscommerce/ds-colors": "5.21.2",
+    "@spscommerce/ds-illustrations": "5.21.2",
+    "@spscommerce/ds-shared": "5.21.2",
+    "@spscommerce/positioning": "5.21.2",
+    "@spscommerce/utils": "5.21.2",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",