@spscommerce/ds-react 5.33.11 → 5.33.12

package/lib/index.es.js

@@ -31071,13 +31071,15 @@ const propsDoc$L = {
   page: "number",
   numPages: "number",
   onPageChange: "(number) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$N = __spreadValues({
   numPages: propTypes$1O.exports.number,
   onPageChange: fun(),
   page: propTypes$1O.exports.number,
-  disabled: propTypes$1O.exports.bool
+  disabled: propTypes$1O.exports.bool,
+  unknownPageCount: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPageSelector(props2) {
   const _a = props2, {
@@ -31087,7 +31089,8 @@ function SpsPageSelector(props2) {
     unsafelyReplaceClassName,
     className,
     "data-testid": testId,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "numPages",
     "onPageChange",
@@ -31095,7 +31098,8 @@ function SpsPageSelector(props2) {
     "unsafelyReplaceClassName",
     "className",
     "data-testid",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const { t: t2 } = React.useContext(I18nContext);
   const [inputPage, setInputPage] = React.useState(pageProp);
@@ -31122,7 +31126,7 @@ function SpsPageSelector(props2) {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: classes,
     "data-testid": testId
-  }, rest), /* @__PURE__ */ React.createElement("div", {
+  }, rest), !unknownPageCount && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__input-wrapper",
     "data-testid": `${testId}__input`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -31145,7 +31149,7 @@ function SpsPageSelector(props2) {
   }))), /* @__PURE__ */ React.createElement("span", {
     className: "sps-page-selector__total-pages",
     "data-testid": `${testId}_page-count`
-  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages })), /* @__PURE__ */ React.createElement("div", {
+  }, Number.isNaN(numPages) ? t2("design-system:pagination.ofMany") : t2("design-system:pagination.ofPageCount", { pageCount: numPages }))), /* @__PURE__ */ React.createElement("div", {
     className: "sps-icon-button-panel",
     "data-testid": `${testId}__buttons`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -31181,7 +31185,8 @@ const propsDoc$K = {
   pageSizeOptions: "Array<number>",
   totalResults: "number",
   onPageChange: "(page: number, pageSize: number, indices: [number, number]) => void",
-  disabled: "boolean"
+  disabled: "boolean",
+  unknownPageCount: "boolean"
 };
 const propTypes$M = __spreadValues({
   onPageChange: fun().isRequired,
@@ -31189,7 +31194,8 @@ const propTypes$M = __spreadValues({
   pageSize: propTypes$1O.exports.number,
   pageSizeOptions: propTypes$1O.exports.arrayOf(propTypes$1O.exports.number),
   totalResults: propTypes$1O.exports.number,
-  disabled: propTypes$1O.exports.bool
+  disabled: propTypes$1O.exports.bool,
+  unknownPageCount: propTypes$1O.exports.bool
 }, spsGlobalPropTypes);
 function SpsPagination(props2) {
   const _a = props2, {
@@ -31201,7 +31207,8 @@ function SpsPagination(props2) {
     "data-testid": testId,
     totalResults,
     unsafelyReplaceClassName,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "className",
     "onPageChange",
@@ -31211,7 +31218,8 @@ function SpsPagination(props2) {
     "data-testid",
     "totalResults",
     "unsafelyReplaceClassName",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const [state, patchState] = usePatchReducer({
     page: pageProp,
@@ -31289,13 +31297,16 @@ function SpsPagination(props2) {
     value: state.pageSize,
     className: "ml-1 mr-1",
     disabled
-  }), "Per Page"), /* @__PURE__ */ React.createElement("div", {
+  }), "Per Page"), unknownPageCount ? /* @__PURE__ */ React.createElement("div", {
+    className: "sps-pagination__details"
+  }, `Viewing ${state.indices[0]} - ${state.indices[1]}`) : /* @__PURE__ */ React.createElement("div", {
     className: "sps-pagination__details"
   }, `Viewing ${state.indices[0]} - ${state.indices[1]} of ${totalResultsString()}`), /* @__PURE__ */ React.createElement(SpsPageSelector, {
     numPages: state.numPages,
     page: state.page,
     onPageChange: handlePageChange,
-    disabled
+    disabled,
+    unknownPageCount
   }));
 }
 Object.assign(SpsPagination, {
@@ -31350,6 +31361,35 @@ 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.")),
+        react: code`
+                    function Component() {
+                        const [page, setPage] = React.useState(2);
+                        const [pageSize, setPageSize] = React.useState(25);
+
+                        function handlePageChange(newPage, newPageSize) {
+                          console.log("change", newPage, newPageSize);
+                          setPage(newPage);
+                          setPageSize(newPageSize);
+                        }
+
+                        return (
+                          <React.Fragment>
+                            <SpsPagination id="basic"
+                              totalResults={123}
+                              page={page}
+                              pageSize={pageSize}
+                              onPageChange={handlePageChange}
+                              unknownPageCount
+                            />
+                            <span className="mr-2">page: {page}</span>
+                            <span>pageSize: {pageSize}</span>
+                          </React.Fragment>
+                        );
+                    }
+                `
+      },
       disabled: {
         description: "Disabled state",
         react: code`

package/lib/pagination/SpsPageSelector.d.ts

@@ -8,6 +8,7 @@ declare const propTypes: {
     onPageChange: PropTypes.Requireable<(number: any) => void>;
     page: PropTypes.Requireable<number>;
     disabled: PropTypes.Requireable<boolean>;
+    unknownPageCount: 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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.33.11",
+  "version": "5.33.12",
   "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.33.11",
-    "@spscommerce/ds-illustrations": "5.33.11",
-    "@spscommerce/ds-shared": "5.33.11",
-    "@spscommerce/positioning": "5.33.11",
-    "@spscommerce/utils": "5.33.11",
+    "@spscommerce/ds-colors": "5.33.12",
+    "@spscommerce/ds-illustrations": "5.33.12",
+    "@spscommerce/ds-shared": "5.33.12",
+    "@spscommerce/positioning": "5.33.12",
+    "@spscommerce/utils": "5.33.12",
     "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.33.11",
-    "@spscommerce/ds-illustrations": "5.33.11",
-    "@spscommerce/ds-shared": "5.33.11",
-    "@spscommerce/positioning": "5.33.11",
-    "@spscommerce/utils": "5.33.11",
+    "@spscommerce/ds-colors": "5.33.12",
+    "@spscommerce/ds-illustrations": "5.33.12",
+    "@spscommerce/ds-shared": "5.33.12",
+    "@spscommerce/positioning": "5.33.12",
+    "@spscommerce/utils": "5.33.12",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",