@spscommerce/ds-react 5.33.8 → 5.33.11

package/lib/index.es.js

@@ -2415,7 +2415,7 @@ const SpsOptionList = React.forwardRef((props2, ref2) => {
     ref: optionsRef,
     "data-testid": `${testId}-options`,
     style: optionsInlineStyles
-  }, !loading && !searchState.pending && zeroState && (searchState.value || !searchState.isAsync) && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
+  }, !loading && !searchState.pending && zeroState && optionList.length === 0 && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__zero-state"
   }, zeroState), (loading || searchState.pending) && /* @__PURE__ */ React.createElement("div", {
     className: "sps-option-list__loading"
@@ -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", {
@@ -31111,7 +31106,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,10 +31114,8 @@ 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);
@@ -31137,7 +31130,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,8 +31140,9 @@ 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", {

package/package.json

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