@spscommerce/ds-react 6.32.2 → 6.33.0

package/lib/index.es.js

@@ -31171,14 +31171,16 @@ const propsDoc$E = {
   numPages: "number",
   onPageChange: "(number) => void",
   disabled: "boolean",
-  unknownPageCount: "boolean"
+  unknownPageCount: "boolean",
+  nextPageBtnDisabled: "boolean"
 };
 const propTypes$E = __spreadValues({
   numPages: propTypes$1I.exports.number,
   onPageChange: fun(),
   page: propTypes$1I.exports.number,
   disabled: propTypes$1I.exports.bool,
-  unknownPageCount: propTypes$1I.exports.bool
+  unknownPageCount: propTypes$1I.exports.bool,
+  nextPageBtnDisabled: propTypes$1I.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -31189,7 +31191,8 @@ function SpsPageSelector(props2) {
     className,
     "data-testid": testId,
     disabled = false,
-    unknownPageCount = false
+    unknownPageCount = false,
+    nextPageBtnDisabled = false
   } = _a, rest = __objRest(_a, [
     "numPages",
     "onPageChange",
@@ -31198,7 +31201,8 @@ function SpsPageSelector(props2) {
     "className",
     "data-testid",
     "disabled",
-    "unknownPageCount"
+    "unknownPageCount",
+    "nextPageBtnDisabled"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [inputPage, setInputPage] = React.useState(pageProp);
@@ -31262,11 +31266,11 @@ function SpsPageSelector(props2) {
     className: "sps-icon sps-icon-chevron-left",
     "aria-hidden": "true"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: clsx("sps-button", "sps-button--icon", (page === numPages || disabled) && "sps-button--disabled")
+    className: clsx("sps-button", "sps-button--icon", (page === numPages || disabled || nextPageBtnDisabled) && "sps-button--disabled")
   }, /* @__PURE__ */ React.createElement("button", {
     type: "button",
     onClick: () => updatePage(page + 1),
-    disabled: page === numPages || disabled,
+    disabled: page === numPages || disabled || nextPageBtnDisabled,
     title: t2("design-system:pagination.nextPage")
   }, /* @__PURE__ */ React.createElement("i", {
     className: "sps-icon sps-icon-chevron-right",
@@ -31285,7 +31289,9 @@ const propsDoc$D = {
   totalResults: "number",
   onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
   disabled: "boolean",
-  unknownPageCount: "boolean"
+  unknownPageCount: "boolean",
+  nextPageBtnDisabled: "boolean",
+  resultsOnPage: "number"
 };
 const propTypes$D = __spreadValues({
   onPageChange: fun().isRequired,
@@ -31294,7 +31300,9 @@ const propTypes$D = __spreadValues({
   pageSizeOptions: propTypes$1I.exports.arrayOf(propTypes$1I.exports.number),
   totalResults: propTypes$1I.exports.number,
   disabled: propTypes$1I.exports.bool,
-  unknownPageCount: propTypes$1I.exports.bool
+  unknownPageCount: propTypes$1I.exports.bool,
+  nextPageBtnDisabled: propTypes$1I.exports.bool,
+  resultsOnPage: propTypes$1I.exports.number
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -31307,7 +31315,9 @@ function SpsPagination(props2) {
     totalResults,
     unsafelyReplaceClassName,
     disabled = false,
-    unknownPageCount = false
+    unknownPageCount = false,
+    nextPageBtnDisabled = false,
+    resultsOnPage
   } = _a, rest = __objRest(_a, [
     "className",
     "onPageChange",
@@ -31318,7 +31328,9 @@ function SpsPagination(props2) {
     "totalResults",
     "unsafelyReplaceClassName",
     "disabled",
-    "unknownPageCount"
+    "unknownPageCount",
+    "nextPageBtnDisabled",
+    "resultsOnPage"
   ]);
   const [state, patchState] = usePatchReducer({
     page: pageProp,
@@ -31332,7 +31344,7 @@ function SpsPagination(props2) {
   function indices(page = state.page, pageSize = state.pageSize) {
     const numPgs = numPages(pageSize);
     const resultsVisibleIfThereArePages = page === numPgs ? totalResults % pageSize || pageSize : pageSize;
-    const resultsVisible = numPgs === 0 ? 0 : resultsVisibleIfThereArePages;
+    const resultsVisible = resultsOnPage || (numPgs === 0 ? 0 : resultsVisibleIfThereArePages);
     const start = (page - 1) * pageSize;
     return numPgs === 0 ? [0, 0] : [start + 1, start + resultsVisible];
   }
@@ -31369,7 +31381,7 @@ function SpsPagination(props2) {
       numPages: numPages(),
       indices: indices()
     });
-  }, [totalResults]);
+  }, [totalResults, resultsOnPage]);
   function totalResultsString() {
     return typeof totalResults === "number" ? totalResults : "many";
   }
@@ -31405,7 +31417,8 @@ function SpsPagination(props2) {
     page: state.page,
     onPageChange: handlePageChange,
     disabled,
-    unknownPageCount
+    unknownPageCount,
+    nextPageBtnDisabled
   }));
 }
 Object.assign(SpsPagination, {
@@ -31422,13 +31435,13 @@ const SpsPaginationExamples = {
     label: "Standard Pagination Bar",
     description: ({ Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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."), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
       className: "sps-text-semibold"
-    }, "Results-per-page Select"), " ", "(left): allows the user to adjust the number of records being displayed per page.*")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
+    }, "Results-per-page Select"), " (left): allows the user to adjust the number of records being displayed per page.*")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
       className: "sps-text-semibold"
     }, "Viewing details"), " (middle): describes which results are being displayed on the current page.")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("span", {
       className: "sps-text-semibold"
     }, "Page Navigator"), " (right): allows the user to navigate between pages of results"))), /* @__PURE__ */ React.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."), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.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", " ", /* @__PURE__ */ React.createElement(Link, {
+    }, "To see an example of the Standard Pagination Bar in context with a Table, view the Table Lists section on the ", /* @__PURE__ */ React.createElement(Link, {
       to: "/style-and-layout/page-types"
     }, "Page Types"), " page.")),
     examples: {
@@ -31461,10 +31474,10 @@ const SpsPaginationExamples = {
                 `
       },
       situational: {
-        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Unknown Page Count"), /* @__PURE__ */ React.createElement("p", null, "In cases where the exact page count of results is not able to be determined, a variation of the Pagination component with limited features can be utilized.")),
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Unknown Page Count"), /* @__PURE__ */ React.createElement("p", null, "In cases where the exact page count of results is not able to be determined, a variation of the Pagination component can be utilized."), /* @__PURE__ */ React.createElement("p", null, "unknownPageCount prop will hide total count from view, resultsOnPage prop will allow to keep track of results count for every page and nextPageBtnDisabled prop will allow to manually disable next page button")),
         react: code`
                     function Component() {
-                        const [page, setPage] = React.useState(2);
+                        const [page, setPage] = React.useState(1);
                         const [pageSize, setPageSize] = React.useState(25);
 
                         function handlePageChange(newPage, newPageSize) {
@@ -31476,11 +31489,12 @@ const SpsPaginationExamples = {
                         return (
                           <React.Fragment>
                             <SpsPagination id="basic"
-                              totalResults={123}
                               page={page}
                               pageSize={pageSize}
                               onPageChange={handlePageChange}
                               unknownPageCount
+                              resultsOnPage={page === 3 ? 5 : pageSize}
+                              nextPageBtnDisabled={page === 3}
                             />
                             <span className="mr-2">page: {page}</span>
                             <span>pageSize: {pageSize}</span>
@@ -31509,7 +31523,7 @@ const SpsPaginationExamples = {
   },
   pageSelector: {
     label: "Page Navigator",
-    description: ({ Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When navigating through a series of paginated results inside of a container such as a sidebar, a miniature version of the pagination bar can be used. This version utilizes only the page navigation component. Use Mini Pagination inside of a Card Header that also includes a title describing the content contained in the card below."), /* @__PURE__ */ React.createElement("p", null, "To see an example of the Page Navigator in context within a Card Header, view the General Content section on the", " ", /* @__PURE__ */ React.createElement(Link, {
+    description: ({ Link }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When navigating through a series of paginated results inside of a container such as a sidebar, a miniature version of the pagination bar can be used. This version utilizes only the page navigation component. Use Mini Pagination inside of a Card Header that also includes a title describing the content contained in the card below."), /* @__PURE__ */ React.createElement("p", null, "To see an example of the Page Navigator in context within a Card Header, view the General Content section on the ", /* @__PURE__ */ React.createElement(Link, {
       to: "/style-and-layout/page-types"
     }, "Page Types"), " page.")),
     examples: {

package/lib/pagination/SpsPageSelector.d.ts

@@ -9,6 +9,7 @@ declare const propTypes: {
     page: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
     unknownPageCount: PropTypes.Requireable<boolean>;
+    nextPageBtnDisabled: PropTypes.Requireable<boolean>;
 };
 export declare type SpsPageSelectorProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
 export declare function SpsPageSelector(props: SpsPageSelectorProps): JSX.Element;

package/lib/pagination/SpsPagination.d.ts

@@ -11,6 +11,8 @@ declare const propTypes: {
     totalResults: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
     unknownPageCount: PropTypes.Requireable<boolean>;
+    nextPageBtnDisabled: PropTypes.Requireable<boolean>;
+    resultsOnPage: PropTypes.Requireable<number>;
 };
 export declare type SpsPaginationProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
 export declare function SpsPagination(props: SpsPaginationProps): JSX.Element;

package/lib/pagination/SpsPagination.examples.d.ts

@@ -1,2 +1,2 @@
-import { DSReactExamples } from '@spscommerce/ds-shared';
+import type { DSReactExamples } from "@spscommerce/ds-shared";
 export declare const SpsPaginationExamples: DSReactExamples;

package/package.json

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