@spscommerce/ds-react 7.7.4 → 7.8.0

package/lib/index.cjs.js

@@ -6603,7 +6603,7 @@ var r=n.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"},da=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:m,notClearable:f,options:h,onChange:g,onClick:E,onOpen:w,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:k,textKey:b,valueKey:I,unsafelyReplaceClassName:L,value:M,zeroState:O,loading:R,filterByTextAndCaptionKey:W,maxHeightOptionListPx:_,maxHeightOptionListRem:V,"data-testid":x,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,...te}=e,z=u||p,{wrapperId:X,controlId:G}=vt(m,z),A=s.useRef(null),q=s.useRef(null),J=s.useRef(null),{t:ne}=s.useContext(Re),[ee,U]=Rt({isOpen:!1,value:M,text:"",keyDown:null,opensUpward:!1,optionIds:""});function le(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function se(ge){le(ge);const _e=ge&&I&&typeof ge=="object"?ge[I]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sn({value:_e}))}s.useEffect(()=>{le(M)},[M,b]);function de(){se(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!ee.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!==X&&U({isOpen:!1})}function rt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${X}-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(r&&J.current&&A.current){A.current.style.width="";const _e=`${A.current.getBoundingClientRect().width+6}px`;A.current.style.width=_e,J.current.style.width=_e,J.current.style.maxWidth=_e}}),Wo(()=>{var ge;if(ee.isOpen){w==null||w();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,X),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[ee.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const mt=H(L||"sps-select",ee.isOpen&&"sps-select--open",ee.isOpen&&"z-stratum-dropdown",ee.opensUpward&&"sps-select--opens-upward",o),st=ee.text||T||ne("design-system:select.defaultPlaceholder");return s.createElement(nt,{id:X,className:mt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":ee.optionIds,"data-testid":x,onClick:E,...te},s.createElement("div",{className:H("sps-select__dropctrl",c&&"disabled"),id:G,tabIndex:0,onClick:xe,ref:J,title:st,"data-testid":`${x}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:H("sps-select__value",!ee.text&&"sps-select__value--placeholder"),"data-testid":`${x}-value`},st),ee.value&&!f&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:de,"data-testid":`${x}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Kr,{id:`${X}-options`,ref:A,attachTo:J,captionKey:a,comparisonKey:l,isOpen:ee.isOpen,keyDown:ee.keyDown,options:h,onOptionSelected:se,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:ee.value,specialAction:n,tall:k,textKey:b,filterByTextAndCaptionKey:W,optionRole:"option",valueKey:I,onOptionListChanged:rt,zeroState:O,ignoreWidthStyles:r,loading:R,maxHeightPx:_,maxHeightRem:V,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,"data-testid":`${x}-option-list`}))});Object.assign(da,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function pa(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...m}=e,{t:f}=s.useContext(Re),[h,g]=s.useState(r),[E,w]=s.useState(r);s.useEffect(()=>{w(r),g(r)},[r]);function T(b){const I=y.constrain(b,[1,t]);b!==E&&(w(I),g(I),n&&typeof n=="function"&&n(I))}function D(b){g(Number(b.target.value)||"")}const N=H(a||"sps-page-selector",o),k=Nn();return s.createElement("div",{className:N,"data-testid":l,...m},!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:k.current,className:"sr-only"},f("design-system:pagination.page")),s.createElement($r,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:k.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)?f("design-system:pagination.ofMany"):f("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:H("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:f("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:H("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:f("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(pa,{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 Gi(e){const{className:t,onPageChange:n,page:r=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1,unknownPageCount:m=!1,nextPageBtnDisabled:f=!1,resultsOnPage:h,...g}=e,[E,w]=Rt({page:r,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,R=E.pageSize){const W=T(R),_=O===W&&c!==void 0&&c%R||R,V=h||(W===0?0:_),x=(O-1)*R;return W===0?[0,0]:[x+1,x+V]}function N(O){const R={page:O,indices:D(O)};return w(R),R}function k(O,R){const W={page:R,pageSize:O,numPages:T(O),indices:D(R,O)};return w(W),W}s.useEffect(()=>{r!==E.page&&N(r)},[r]),s.useEffect(()=>{o!==E.pageSize&&k(o,r!==E.page?r:E.page)},[o]),s.useEffect(()=>{w({numPages:T(),indices:D()})},[c,h]);function b(){return typeof c=="number"?c:"many"}function I(O){const R=k(O.target.value,1);n(R.page,R.pageSize,R.indices)}function L(O){const R=N(O);n(R.page,E.pageSize,R.indices)}const M=H(p||"sps-pagination",t);return s.createElement("div",{className:M,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(da,{options:a,onChange:I,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),m?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(pa,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:m,nextPageBtnDisabled:f}))}Object.assign(Gi,{props:WN,displayName:"SpsPagination"});const zm={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"},da=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:o,comparisonKey:l,disabled:c,formControl:p,formMeta:u,id:m,notClearable:f,options:h,onChange:g,onClick:E,onOpen:w,placeholder:T,searchDebounce:D,searchPlaceholder:N="Search\u2026",tallOptionList:k,textKey:b,valueKey:I,unsafelyReplaceClassName:L,value:M,zeroState:O,loading:R,filterByTextAndCaptionKey:W,maxHeightOptionListPx:_,maxHeightOptionListRem:V,"data-testid":x,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,...te}=e,z=u||p,{wrapperId:X,controlId:G}=vt(m,z),A=s.useRef(null),q=s.useRef(null),J=s.useRef(null),{t:ne}=s.useContext(Re),[ee,U]=Rt({isOpen:!1,value:M,text:"",keyDown:null,opensUpward:!1,optionIds:""});function le(ge){U({value:ge,text:ge&&b?ge[b]:ge})}function se(ge){le(ge);const _e=ge&&I&&typeof ge=="object"?ge[I]:ge;z&&(z.setValue(_e),z.markAsDirty()),g&&g(new sn({value:_e}))}s.useEffect(()=>{le(M)},[M,b]);function de(){se(void 0)}function re(){U({isOpen:!1})}function xe(ge){ge.nativeEvent.stopImmediatePropagation(),c||U({isOpen:!ee.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!==X&&U({isOpen:!1})}function rt(ge){U({optionIds:new Array(ge).fill("").map((_e,Se)=>`${X}-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(r&&J.current&&A.current){A.current.style.width="";const _e=`${A.current.getBoundingClientRect().width+6}px`;A.current.style.width=_e,J.current.style.width=_e,J.current.style.maxWidth=_e}}),Wo(()=>{var ge;if(ee.isOpen){w==null||w();const _e=document.createEvent("CustomEvent");_e.initCustomEvent("DropdownOpened",!1,!1,X),document.dispatchEvent(_e)}else(ge=q.current)==null||ge.focus()},[ee.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var ge;(ge=q.current)==null||ge.focus()}}));const mt=H(L||"sps-select",ee.isOpen&&"sps-select--open",ee.isOpen&&"z-stratum-dropdown",ee.opensUpward&&"sps-select--opens-upward",o),st=ee.text||T||ne("design-system:select.defaultPlaceholder");return s.createElement(nt,{id:X,className:mt,onKeyDown:Te,formControl:p,formMeta:u,ref:q,role:"listbox","aria-owns":ee.optionIds,"data-testid":x,onClick:E,...te},s.createElement("div",{className:H("sps-select__dropctrl",c&&"disabled"),id:G,tabIndex:0,onClick:xe,ref:J,title:st,"data-testid":`${x}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:H("sps-select__value",!ee.text&&"sps-select__value--placeholder"),"data-testid":`${x}-value`},st),ee.value&&!f&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:de,"data-testid":`${x}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(Kr,{id:`${X}-options`,ref:A,attachTo:J,captionKey:a,comparisonKey:l,isOpen:ee.isOpen,keyDown:ee.keyDown,options:h,onOptionSelected:se,onPositionFlip:Ge,onSelfToggle:ae,searchDebounce:D,searchPlaceholder:N,selectedOption:ee.value,specialAction:n,tall:k,textKey:b,filterByTextAndCaptionKey:W,optionRole:"option",valueKey:I,onOptionListChanged:rt,zeroState:O,ignoreWidthStyles:r,loading:R,maxHeightPx:_,maxHeightRem:V,disableOptionsMemoization:F,disableDefaultOptionsFiltering:Z,"data-testid":`${x}-option-list`}))});Object.assign(da,{props:KN,displayName:"SpsSelect"});const HN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function pa(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:u=!1,...m}=e,{t:f}=s.useContext(Re),[h,g]=s.useState(r),[E,w]=s.useState(r);s.useEffect(()=>{w(r),g(r)},[r]);function T(b){const I=y.constrain(b,[1,t]);b!==E&&(w(I),g(I),n&&typeof n=="function"&&n(I))}function D(b){g(Number(b.target.value)||"")}const N=H(a||"sps-page-selector",o),k=Nn();return s.createElement("div",{className:N,"data-testid":l,...m},!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:k.current,className:"sr-only"},f("design-system:pagination.page")),s.createElement($r,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:k.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)?f("design-system:pagination.ofMany"):f("design-system:pagination.ofPageCount",{pageCount:t}))),s.createElement("div",{className:"sps-icon-button-panel","data-testid":`${l}__buttons`},s.createElement("div",{className:H("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:f("design-system:pagination.prevPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-left","aria-hidden":"true"}))),s.createElement("div",{className:H("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:f("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(pa,{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 Gi(e){const{className:t,onPageChange:n,page:r=1,pageSizeOptions:a=$.DEFAULT_PAGE_SIZE_OPTIONS,pageSize:o=a[0],"data-testid":l,totalResults:c,unsafelyReplaceClassName:p,disabled:u=!1,unknownPageCount:m=!1,nextPageBtnDisabled:f=!1,resultsOnPage:h,...g}=e,[E,w]=Rt({page:r,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,R=E.pageSize){const W=T(R),_=O===W&&c!==void 0&&c%R||R,V=h||(W===0?0:_),x=(O-1)*R;return W===0?[0,0]:[x+1,x+V]}function N(O){const R={page:O,indices:D(O)};return w(R),R}function k(O,R){const W={page:R,pageSize:O,numPages:T(O),indices:D(R,O)};return w(W),W}s.useEffect(()=>{w({numPages:T(),indices:D()})},[c,h]),s.useEffect(()=>{r!==E.page&&N(r)},[r]),s.useEffect(()=>{o!==E.pageSize&&k(o,r!==E.page?r:E.page)},[o]);function b(){return typeof c=="number"?c:"many"}function I(O){const R=k(O.target.value,1);n(R.page,R.pageSize,R.indices)}function L(O){const R=N(O);n(R.page,E.pageSize,R.indices)}const M=H(p||"sps-pagination",t);return s.createElement("div",{className:M,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(da,{options:a,onChange:I,notClearable:!0,autoFixWidth:!0,value:E.pageSize,className:"ml-1 mr-1",disabled:u}),"Per Page"),m?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(pa,{numPages:E.numPages,page:E.page,onPageChange:L,disabled:u,unknownPageCount:m,nextPageBtnDisabled:f}))}Object.assign(Gi,{props:WN,displayName:"SpsPagination"});const zm={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

@@ -23943,15 +23943,15 @@ function Yu(e) {
     return w(K), K;
   }
   s.useEffect(() => {
-    n !== y.page && N(n);
-  }, [n]), s.useEffect(() => {
-    o !== y.pageSize && k(o, n !== y.page ? n : y.page);
-  }, [o]), s.useEffect(() => {
     w({
       numPages: T(),
       indices: D()
     });
-  }, [c, h]);
+  }, [c, h]), s.useEffect(() => {
+    n !== y.page && N(n);
+  }, [n]), s.useEffect(() => {
+    o !== y.pageSize && k(o, n !== y.page ? n : y.page);
+  }, [o]);
   function b() {
     return typeof c == "number" ? c : "many";
   }

package/package.json

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