@spscommerce/ds-react 7.5.2 → 7.5.4

package/lib/index.cjs.js

@@ -6603,7 +6603,7 @@ var n=r.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
               <br />
               {JSON.stringify(formValue)}
           </>
-        }`}}}},KN={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",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",disableOptionsMemoization:"boolean"},ca=s.forwardRef((e,t)=>{const{action:r,autoFixWidth:n=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:h,onChange:g,onClick:E,onOpen:C,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:I,textKey:b,valueKey:x,unsafelyReplaceClassName:L,value:k,zeroState:O,loading:B,filterByTextAndCaptionKey:G,maxHeightOptionListPx:_,maxHeightOptionListRem:W,"data-testid":M,disableOptionsMemoization:F,disableDefaultOptionsFiltering:J,...ee}=e,z=u||p,{wrapperId:se,controlId:A}=gt(f,z),H=s.useRef(null),q=s.useRef(null),Z=s.useRef(null),{t:te}=s.useContext(Re),[Q,U]=Rt({isOpen:!1,value:k,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ie(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function ne(ge){ie(ge);const _e=ge&&x&&typeof ge=="object"?ge[x]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sr({value:_e}))}s.useEffect(()=>{ie(k)},[k,b]);function ce(){ne(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!Q.isOpen})}function Te(ge){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ge.key)>-1&&ge.preventDefault(),ge.persist(),U({keyDown:ge}))}function ae(ge){U({isOpen:ge})}function Ge(ge){U({opensUpward:ge})}function Ve(ge){ge.detail!==se&&U({isOpen:!1})}function tt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${se}-options-option-${Se}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",re),document.addEventListener("DropdownOpened",Ve),()=>{document.removeEventListener("click",re),document.removeEventListener("DropdownOpened",Ve)}),[]),s.useLayoutEffect(()=>{if(n&&Z.current&&H.current){H.current.style.width="";const _e=`${H.current.getBoundingClientRect().width+6}px`;H.current.style.width=_e,Z.current.style.width=_e,Z.current.style.maxWidth=_e}}),Ho(()=>{var ge;if(Q.isOpen){C==null||C();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[Q.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const pt=K(L||"sps-select",Q.isOpen&&"sps-select--open",Q.isOpen&&"z-stratum-dropdown",Q.opensUpward&&"sps-select--opens-upward",o),rt=Q.text||T||te("design-system:select.defaultPlaceholder");return s.createElement(et,{id:se,className:pt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":Q.optionIds,"data-testid":M,onClick:E,...ee},s.createElement("div",{className:K("sps-select__dropctrl",c&&"disabled"),id:A,tabIndex:0,onClick:xe,ref:Z,title:rt,"data-testid":`${M}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:K("sps-select__value",!Q.text&&"sps-select__value--placeholder"),"data-testid":`${M}-value`},rt),Q.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:ce,"data-testid":`${M}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Vn,{id:`${se}-options`,ref:H,attachTo:Z,captionKey:a,comparisonKey:l,isOpen:Q.isOpen,keyDown:Q.keyDown,options:h,onOptionSelected:ne,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:Q.value,specialAction:r,tall:I,textKey:b,filterByTextAndCaptionKey:G,optionRole:"option",valueKey:x,onOptionListChanged:tt,zeroState:O,ignoreWidthStyles:n,loading:B,maxHeightPx:_,maxHeightRem:W,disableOptionsMemoization:F,disableDefaultOptionsFiltering:J,"data-testid":`${M}-option-list`}))});Object.assign(ca,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function da(e){const{numPages:t=0,onPageChange:r,page:n=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...f}=e,{t:m}=s.useContext(Re),[h,g]=s.useState(n),[E,C]=s.useState(n);s.useEffect(()=>{C(n),g(n)},[n]);function T(b){const x=y.constrain(b,[1,t]);b!==E&&(C(x),g(x),r&&typeof r=="function"&&r(x))}function D(b){g(Number(b.target.value)||"")}const N=K(a||"sps-page-selector",o),I=Dr();return s.createElement("div",{className:N,"data-testid":l,...f},!p&&s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},h),s.createElement("label",{htmlFor:I.current,className:"sr-only"},m("design-system:pagination.page")),s.createElement(An,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:I.current,type:"text",value:h,onInput:D,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>T(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?m("design-system:pagination.ofMany"):m("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:K("sps-button","sps-button--icon",(E===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E-1),disabled:E===1||c,title:m("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:K("sps-button","sps-button--icon",(E===t||c||u)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E+1),disabled:E===t||c||u,title:m("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(da,{props:HN,displayName:"SpsPageSelector"});const WN={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean",resultsOnPage:"number"};function Wi(e){const{className:t,onPageChange:r,page:n=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c=0,unsafelyReplaceClassName:p,disabled:u=!1,unknownPageCount:f=!1,nextPageBtnDisabled:m=!1,resultsOnPage:h,...g}=e,[E,C]=Rt({page:n,pageSize:o,numPages:0,indices:[0,0]});function T(O=E.pageSize){return Math.ceil(c/O)}function D(O=E.page,B=E.pageSize){const G=T(B),_=O===G&&c%B||B,W=h||(G===0?0:_),M=(O-1)*B;return G===0?[0,0]:[M+1,M+W]}function N(O){const B={page:O,indices:D(O)};return C(B),B}function I(O,B){const G={page:B,pageSize:O,numPages:T(O),indices:D(B,O)};return C(G),G}s.useEffect(()=>{n!==E.page&&N(n)},[n]),s.useEffect(()=>{o!==E.pageSize&&I(o,n!==E.page?n:E.page)},[o]),s.useEffect(()=>{C({numPages:T(),indices:D()})},[c,h]);function b(){return typeof c=="number"?c:"many"}function x(O){const B=I(O.target.value,1);r(B.page,B.pageSize,B.indices)}function L(O){const B=N(O);r(B.page,E.pageSize,B.indices)}const k=K(p||"sps-pagination",t);return s.createElement("div",{className:k,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(ca,{options:a,onChange:x,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),f?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]} of ${b()}`),s.createElement(da,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:f,nextPageBtnDisabled:m}))}Object.assign(Wi,{props:WN,displayName:"SpsPagination"});const Gm={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:y.code`
+        }`}}}},KN={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",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",disableOptionsMemoization:"boolean"},ca=s.forwardRef((e,t)=>{const{action:r,autoFixWidth:n=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:f,notClearable:m,options:h,onChange:g,onClick:E,onOpen:C,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:I,textKey:b,valueKey:x,unsafelyReplaceClassName:L,value:k,zeroState:O,loading:B,filterByTextAndCaptionKey:G,maxHeightOptionListPx:_,maxHeightOptionListRem:W,"data-testid":M,disableOptionsMemoization:F,disableDefaultOptionsFiltering:J,...ee}=e,z=u||p,{wrapperId:se,controlId:A}=gt(f,z),H=s.useRef(null),q=s.useRef(null),Z=s.useRef(null),{t:te}=s.useContext(Re),[Q,U]=Rt({isOpen:!1,value:k,text:"",keyDown:null,opensUpward:!1,optionIds:""});function ie(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function ne(ge){ie(ge);const _e=ge&&x&&typeof ge=="object"?ge[x]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sr({value:_e}))}s.useEffect(()=>{ie(k)},[k,b]);function ce(){ne(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!Q.isOpen})}function Te(ge){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(ge.key)>-1&&ge.preventDefault(),ge.persist(),U({keyDown:ge}))}function ae(ge){U({isOpen:ge})}function Ge(ge){U({opensUpward:ge})}function Ve(ge){ge.detail!==se&&U({isOpen:!1})}function tt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${se}-options-option-${Se}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",re),document.addEventListener("DropdownOpened",Ve),()=>{document.removeEventListener("click",re),document.removeEventListener("DropdownOpened",Ve)}),[]),s.useLayoutEffect(()=>{if(n&&Z.current&&H.current){H.current.style.width="";const _e=`${H.current.getBoundingClientRect().width+6}px`;H.current.style.width=_e,Z.current.style.width=_e,Z.current.style.maxWidth=_e}}),Ho(()=>{var ge;if(Q.isOpen){C==null||C();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[Q.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const pt=K(L||"sps-select",Q.isOpen&&"sps-select--open",Q.isOpen&&"z-stratum-dropdown",Q.opensUpward&&"sps-select--opens-upward",o),rt=Q.text||T||te("design-system:select.defaultPlaceholder");return s.createElement(et,{id:se,className:pt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":Q.optionIds,"data-testid":M,onClick:E,...ee},s.createElement("div",{className:K("sps-select__dropctrl",c&&"disabled"),id:A,tabIndex:0,onClick:xe,ref:Z,title:rt,"data-testid":`${M}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:K("sps-select__value",!Q.text&&"sps-select__value--placeholder"),"data-testid":`${M}-value`},rt),Q.value&&!m&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:ce,"data-testid":`${M}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Vn,{id:`${se}-options`,ref:H,attachTo:Z,captionKey:a,comparisonKey:l,isOpen:Q.isOpen,keyDown:Q.keyDown,options:h,onOptionSelected:ne,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:Q.value,specialAction:r,tall:I,textKey:b,filterByTextAndCaptionKey:G,optionRole:"option",valueKey:x,onOptionListChanged:tt,zeroState:O,ignoreWidthStyles:n,loading:B,maxHeightPx:_,maxHeightRem:W,disableOptionsMemoization:F,disableDefaultOptionsFiltering:J,"data-testid":`${M}-option-list`}))});Object.assign(ca,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function da(e){const{numPages:t=0,onPageChange:r,page:n=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...f}=e,{t:m}=s.useContext(Re),[h,g]=s.useState(n),[E,C]=s.useState(n);s.useEffect(()=>{C(n),g(n)},[n]);function T(b){const x=y.constrain(b,[1,t]);b!==E&&(C(x),g(x),r&&typeof r=="function"&&r(x))}function D(b){g(Number(b.target.value)||"")}const N=K(a||"sps-page-selector",o),I=Dr();return s.createElement("div",{className:N,"data-testid":l,...f},!p&&s.createElement(s.Fragment,null,s.createElement("div",{className:"sps-pagination__input-wrapper","data-testid":`${l}__input`},s.createElement("div",{className:"sps-form-control sps-pagination__input-sizer"},h),s.createElement("label",{htmlFor:I.current,className:"sr-only"},m("design-system:pagination.page")),s.createElement(An,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:I.current,type:"text",value:h,onInput:D,onChange:()=>{},className:"sps-form-control sps-pagination__input",disabled:c,onBlur:()=>T(Number(h))}))),s.createElement("span",{className:"sps-page-selector__total-pages","data-testid":`${l}_page-count`},Number.isNaN(t)?m("design-system:pagination.ofMany"):m("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:K("sps-button","sps-button--icon",(E===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E-1),disabled:E===1||c,title:m("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:K("sps-button","sps-button--icon",(E===t||c||u)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(E+1),disabled:E===t||c||u,title:m("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(da,{props:HN,displayName:"SpsPageSelector"});const WN={page:"number",pageSize:"number",pageSizeOptions:"Array<number>",totalResults:"number",onPageChange:"(page: number, pageSize: number, indices: [number, number]) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean",resultsOnPage:"number"};function Wi(e){const{className:t,onPageChange:r,page:n=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1,unknownPageCount:f=!1,nextPageBtnDisabled:m=!1,resultsOnPage:h,...g}=e,[E,C]=Rt({page:n,pageSize:o,numPages:0,indices:[0,0]});function T(O=E.pageSize){return c!==void 0?Math.ceil(c/O):NaN}function D(O=E.page,B=E.pageSize){const G=T(B),_=O===G&&c!==void 0&&c%B||B,W=h||(G===0?0:_),M=(O-1)*B;return G===0?[0,0]:[M+1,M+W]}function N(O){const B={page:O,indices:D(O)};return C(B),B}function I(O,B){const G={page:B,pageSize:O,numPages:T(O),indices:D(B,O)};return C(G),G}s.useEffect(()=>{n!==E.page&&N(n)},[n]),s.useEffect(()=>{o!==E.pageSize&&I(o,n!==E.page?n:E.page)},[o]),s.useEffect(()=>{C({numPages:T(),indices:D()})},[c,h]);function b(){return typeof c=="number"?c:"many"}function x(O){const B=I(O.target.value,1);r(B.page,B.pageSize,B.indices)}function L(O){const B=N(O);r(B.page,E.pageSize,B.indices)}const k=K(p||"sps-pagination",t);return s.createElement("div",{className:k,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(ca,{options:a,onChange:x,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),f?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${E.indices[0]} - ${E.indices[1]} of ${b()}`),s.createElement(da,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:f,nextPageBtnDisabled:m}))}Object.assign(Wi,{props:WN,displayName:"SpsPagination"});const Gm={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:y.code`
                     import { SpsPagination } from "@spscommerce/ds-react";
                     function Component() {
                         const [page, setPage] = React.useState(2);

package/lib/index.es.js

@@ -23772,7 +23772,7 @@ function Wu(e) {
     pageSizeOptions: a = Ag,
     pageSize: o = a[0],
     "data-testid": l,
-    totalResults: c = 0,
+    totalResults: c,
     unsafelyReplaceClassName: p,
     disabled: u = !1,
     unknownPageCount: f = !1,
@@ -23786,10 +23786,10 @@ function Wu(e) {
     indices: [0, 0]
   });
   function T(O = y.pageSize) {
-    return Math.ceil(c / O);
+    return c !== void 0 ? Math.ceil(c / O) : NaN;
   }
   function D(O = y.page, B = y.pageSize) {
-    const H = T(B), _ = O === H && c % B || B, K = h || (H === 0 ? 0 : _), M = (O - 1) * B;
+    const H = T(B), _ = O === H && c !== void 0 && c % B || B, K = h || (H === 0 ? 0 : _), M = (O - 1) * B;
     return H === 0 ? [0, 0] : [M + 1, M + K];
   }
   function N(O) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.5.2",
+  "version": "7.5.4",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -40,11 +40,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.6.0",
-    "@sps-woodland/illustrations": "7.5.2",
-    "@sps-woodland/tabs": "7.5.2",
-    "@spscommerce/ds-colors": "7.5.2",
-    "@spscommerce/ds-shared": "7.5.2",
-    "@spscommerce/positioning": "7.5.2",
+    "@sps-woodland/illustrations": "7.5.4",
+    "@sps-woodland/tabs": "7.5.4",
+    "@spscommerce/ds-colors": "7.5.4",
+    "@spscommerce/ds-shared": "7.5.4",
+    "@spscommerce/positioning": "7.5.4",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -58,11 +58,11 @@
     "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.8.0",
     "@react-types/tabs": "^3.0.1",
-    "@sps-woodland/illustrations": "7.5.2",
-    "@sps-woodland/tabs": "7.5.2",
-    "@spscommerce/ds-colors": "7.5.2",
-    "@spscommerce/ds-shared": "7.5.2",
-    "@spscommerce/positioning": "7.5.2",
+    "@sps-woodland/illustrations": "7.5.4",
+    "@sps-woodland/tabs": "7.5.4",
+    "@spscommerce/ds-colors": "7.5.4",
+    "@spscommerce/ds-shared": "7.5.4",
+    "@spscommerce/positioning": "7.5.4",
     "@spscommerce/utils": "^6.12.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^10.0.0",
@@ -76,7 +76,7 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "test": "7.5.2"
+    "test": "7.5.4"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",