@spscommerce/ds-react 5.33.9 → 5.33.12

package/lib/index.es.js

@@ -23060,7 +23060,7 @@ function SpsFieldset({
   legend,
   unsafelyReplaceClassName,
   optional = false,
-  enabled,
+  enabled = false,
   onToggled,
   tooltip,
   "data-testid": testId
@@ -23070,14 +23070,9 @@ function SpsFieldset({
   const infoCircleElement = React.useRef(null);
   const [showTip, setShowTip] = React.useState(TooltipVisibility.HIDDEN);
   const [wasFocused, setWasFocused] = React.useState(false);
-  const [isChecked, setisChecked] = React.useState(false);
-  React.useEffect(() => {
-    setisChecked(enabled);
-  }, [enabled]);
-  React.useEffect(() => {
-    if (typeof onToggled === "function") {
-      onToggled(isChecked);
-    }
+  const [isChecked, setIsChecked] = React.useState(enabled);
+  useDidUpdateEffect(() => {
+    onToggled == null ? void 0 : onToggled(isChecked);
   }, [isChecked]);
   React.useEffect(() => {
     if (formControlSet || formMeta) {
@@ -23109,7 +23104,7 @@ function SpsFieldset({
     checked: isChecked,
     className: "d-inline-flex",
     onChange: () => {
-      setisChecked(!isChecked);
+      setIsChecked(!isChecked);
     },
     "data-testid": `${testId}__checkbox`
   }), legend, tooltip && /* @__PURE__ */ React.createElement("span", {
@@ -31076,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, {
@@ -31092,7 +31089,8 @@ function SpsPageSelector(props2) {
     unsafelyReplaceClassName,
     className,
     "data-testid": testId,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "numPages",
     "onPageChange",
@@ -31100,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);
@@ -31111,7 +31110,7 @@ function SpsPageSelector(props2) {
   }, [pageProp]);
   function updatePage(newPage) {
     const constrainedPage = constrain(newPage, [1, numPages]);
-    if (constrainedPage !== inputPage) {
+    if (newPage !== page) {
       setPage(constrainedPage);
       setInputPage(constrainedPage);
       if (onPageChange && typeof onPageChange === "function") {
@@ -31119,17 +31118,15 @@ function SpsPageSelector(props2) {
       }
     }
   }
-  const debouncedPageUpdate = debounce(updatePage, 500);
   function onTextInputInput(event) {
-    setInputPage(event.target.value);
-    void debouncedPageUpdate(parseInt(event.target.value, 10));
+    setInputPage(Number(event.target.value) || "");
   }
   const classes = clsx(unsafelyReplaceClassName || "sps-page-selector", className);
   const id2 = useElementId(null);
   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", {
@@ -31137,7 +31134,9 @@ function SpsPageSelector(props2) {
   }, inputPage), /* @__PURE__ */ React.createElement("label", {
     htmlFor: id2.current,
     className: "sr-only"
-  }, t2("design-system:pagination.page")), /* @__PURE__ */ React.createElement("input", {
+  }, t2("design-system:pagination.page")), /* @__PURE__ */ React.createElement(SpsForm, {
+    onSubmit: () => updatePage(Number(inputPage))
+  }, /* @__PURE__ */ React.createElement("input", {
     id: id2.current,
     type: "text",
     value: inputPage,
@@ -31145,11 +31144,12 @@ function SpsPageSelector(props2) {
     onChange: () => {
     },
     className: "sps-form-control sps-pagination__input",
-    disabled
-  })), /* @__PURE__ */ React.createElement("span", {
+    disabled,
+    onBlur: () => updatePage(Number(inputPage))
+  }))), /* @__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", {
@@ -31185,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,
@@ -31193,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, {
@@ -31205,7 +31207,8 @@ function SpsPagination(props2) {
     "data-testid": testId,
     totalResults,
     unsafelyReplaceClassName,
-    disabled = false
+    disabled = false,
+    unknownPageCount = false
   } = _a, rest = __objRest(_a, [
     "className",
     "onPageChange",
@@ -31215,7 +31218,8 @@ function SpsPagination(props2) {
     "data-testid",
     "totalResults",
     "unsafelyReplaceClassName",
-    "disabled"
+    "disabled",
+    "unknownPageCount"
   ]);
   const [state, patchState] = usePatchReducer({
     page: pageProp,
@@ -31293,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, {
@@ -31354,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.9",
+  "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.9",
-    "@spscommerce/ds-illustrations": "5.33.9",
-    "@spscommerce/ds-shared": "5.33.9",
-    "@spscommerce/positioning": "5.33.9",
-    "@spscommerce/utils": "5.33.9",
+    "@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.9",
-    "@spscommerce/ds-illustrations": "5.33.9",
-    "@spscommerce/ds-shared": "5.33.9",
-    "@spscommerce/positioning": "5.33.9",
-    "@spscommerce/utils": "5.33.9",
+    "@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",