@spscommerce/ds-react 7.17.14 → 7.17.15

package/lib/index.cjs.js

@@ -7220,7 +7220,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
               <br />
               {JSON.stringify(formValue)}
           </>
-        }`}}}},zN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function Ca(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:f=!1,...m}=e,{t:u}=s.useContext($e),[h,g]=s.useState(r),[v,C]=s.useState(r);s.useEffect(()=>{C(r),g(r)},[r]);function T(I){const k=y.constrain(I,[1,t]);I!==v&&(C(k),g(k),n&&typeof n=="function"&&n(k))}function E(I){g(Number(I.target.value)||"")}const N=H(a||"sps-page-selector",o),x=vn();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:x.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement(ts,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:x.current,type:"text",value:h,onInput:E,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)?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:H("sps-button","sps-button--icon",(v===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(v-1),disabled:v===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:H("sps-button","sps-button--icon",(v===t||c||f)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(v+1),disabled:v===t||c||f,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Ca,{props:zN,displayName:"SpsPageSelector"});const qN={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 Zi(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:f=!1,unknownPageCount:m=!1,nextPageBtnDisabled:u=!1,resultsOnPage:h,...g}=e,[v,C]=Wt({page:r,pageSize:o,numPages:0,indices:[0,0]});function T(w=v.pageSize){return c!==void 0?Math.ceil(c/w):NaN}function E(w=v.page,L=v.pageSize){const O=T(L),V=w===O&&c!==void 0&&c%L||L,W=h||(O===0?0:V),M=(w-1)*L;return O===0?[0,0]:[M+1,M+W]}function N(w){const L={page:w,indices:E(w)};return C(L),L}function x(w,L){const O={page:L,pageSize:w,numPages:T(w),indices:E(L,w)};return C(O),O}s.useEffect(()=>{C({numPages:T(),indices:E()})},[c,h]),s.useEffect(()=>{r!==v.page&&N(r)},[r]),s.useEffect(()=>{o!==v.pageSize&&x(o,r!==v.page?r:v.page)},[o]);function I(){return typeof c=="number"?c:"many"}function k(w){const L=x(w.target.value,1);n(L.page,L.pageSize,L.indices)}function P(w){const L=N(w);n(L.page,v.pageSize,L.indices)}const _=H(p||"sps-pagination",t);return s.createElement("div",{className:_,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Wn,{options:a,onChange:k,notClearable:!0,autoFixWidth:!0,value:v.pageSize,className:"ml-1 mr-1",disabled:f}),"Per Page"),m?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]}`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of ${I()}`),s.createElement(Ca,{numPages:v.numPages,page:v.page,onPageChange:P,disabled:f,unknownPageCount:m,nextPageBtnDisabled:u}))}Object.assign(Zi,{props:qN,displayName:"SpsPagination"});const jm={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`
+        }`}}}},zN={page:"number",numPages:"number",onPageChange:"(number) => void",disabled:"boolean",unknownPageCount:"boolean",nextPageBtnDisabled:"boolean"};function Ca(e){const{numPages:t=0,onPageChange:n,page:r=1,unsafelyReplaceClassName:a,className:o,"data-testid":l,disabled:c=!1,unknownPageCount:p=!1,nextPageBtnDisabled:f=!1,...m}=e,{t:u}=s.useContext($e),[h,g]=s.useState(r),[v,C]=s.useState(r);s.useEffect(()=>{C(r),g(r)},[r]);function T(I){const k=y.constrain(I,[1,t]);I!==v&&(C(k),g(k),n&&typeof n=="function"&&n(k))}function E(I){g(Number(I.target.value)||"")}const N=H(a||"sps-page-selector",o),x=vn();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:x.current,className:"sr-only"},u("design-system:pagination.page")),s.createElement(ts,{onSubmit:()=>T(Number(h))},s.createElement("input",{id:x.current,type:"text",value:h,onInput:E,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)?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:H("sps-button","sps-button--icon",(v===1||c)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(v-1),disabled:v===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:H("sps-button","sps-button--icon",(v===t||c||f)&&"sps-button--disabled")},s.createElement("button",{type:"button",onClick:()=>T(v+1),disabled:v===t||c||f,title:u("design-system:pagination.nextPage")},s.createElement("i",{className:"sps-icon sps-icon-chevron-right","aria-hidden":"true"})))))}Object.assign(Ca,{props:zN,displayName:"SpsPageSelector"});const qN={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 Zi(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:f=!1,unknownPageCount:m=!1,nextPageBtnDisabled:u=!1,resultsOnPage:h,...g}=e,[v,C]=Wt({page:r,pageSize:o,numPages:0,indices:[0,0]});function T(w=v.pageSize){return c!==void 0?Math.ceil(c/w):NaN}function E(w=v.page,L=v.pageSize){const O=T(L),V=w===O&&c!==void 0&&c%L||L,W=h||(O===0?0:V),M=(w-1)*L;return O===0?[0,0]:[M+1,M+W]}function N(w){const L={page:w,indices:E(w)};return C(L),L}function x(w,L){const O={page:L,pageSize:w,numPages:T(w),indices:E(L,w)};return C(O),O}s.useEffect(()=>{C({numPages:T(),indices:E()})},[c,h]),s.useEffect(()=>{r!==v.page&&N(r)},[r]),s.useEffect(()=>{o!==v.pageSize&&x(o,r!==v.page?r:v.page)},[o]);function I(){return typeof c=="number"?c:"many"}function k(w){const L=x(w.target.value,1);n(L.page,L.pageSize,L.indices)}function P(w){const L=N(w);n(L.page,v.pageSize,L.indices)}const _=H(p||"sps-pagination",t);return s.createElement("div",{className:_,"data-testid":l,...g},s.createElement("div",{"data-testid":`${l}__size-selector`,className:"sps-page-size-selector"},"View",s.createElement(Wn,{options:a,onChange:k,notClearable:!0,autoFixWidth:!0,value:v.pageSize,className:"ml-1 mr-1",disabled:f}),"Per Page"),m?s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of many`):s.createElement("div",{className:"sps-pagination__details"},`Viewing ${v.indices[0]} - ${v.indices[1]} of ${I()}`),s.createElement(Ca,{numPages:v.numPages,page:v.page,onPageChange:P,disabled:f,unknownPageCount:m,nextPageBtnDisabled:u}))}Object.assign(Zi,{props:qN,displayName:"SpsPagination"});const jm={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

@@ -25417,7 +25417,7 @@ function Gu(e) {
       className: "ml-1 mr-1",
       disabled: f
     }
-  ), "Per Page"), m ? /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]}`) : /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of ${I()}`), /* @__PURE__ */ s.createElement(
+  ), "Per Page"), m ? /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of many`) : /* @__PURE__ */ s.createElement("div", { className: "sps-pagination__details" }, `Viewing ${v.indices[0]} - ${v.indices[1]} of ${I()}`), /* @__PURE__ */ s.createElement(
     Pi,
     {
       numPages: v.numPages,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.17.14",
+  "version": "7.17.15",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -46,11 +46,11 @@
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "7.17.14",
-    "@sps-woodland/tabs": "7.17.14",
-    "@spscommerce/ds-shared": "7.17.14",
-    "@spscommerce/ds-colors": "7.17.14",
-    "@spscommerce/positioning": "7.17.14"
+    "@sps-woodland/illustrations": "7.17.15",
+    "@sps-woodland/tabs": "7.17.15",
+    "@spscommerce/positioning": "7.17.15",
+    "@spscommerce/ds-colors": "7.17.15",
+    "@spscommerce/ds-shared": "7.17.15"
   },
   "devDependencies": {
     "@react-spectrum/provider": "^3.4.1",
@@ -72,12 +72,12 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "7.17.14",
-    "@sps-woodland/tabs": "7.17.14",
-    "@spscommerce/ds-shared": "7.17.14",
-    "@spscommerce/ds-colors": "7.17.14",
-    "test": "7.17.10",
-    "@spscommerce/positioning": "7.17.14"
+    "@sps-woodland/illustrations": "7.17.15",
+    "@spscommerce/positioning": "7.17.15",
+    "@spscommerce/ds-colors": "7.17.15",
+    "@spscommerce/ds-shared": "7.17.15",
+    "@sps-woodland/tabs": "7.17.15",
+    "test": "7.17.10"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",