@spscommerce/ds-react 8.4.3 → 8.4.5

package/lib/incrementor/SpsIncrementor.d.ts

@@ -3,6 +3,7 @@ import type { SpsGlobalPropTypes } from "../prop-types";
 export declare type SpsIncrementorProps = React.PropsWithChildren<SpsGlobalPropTypes & {
     autoComplete?: string;
     disabled?: boolean;
+    defaultValue?: number;
     min?: number;
     max?: number;
     step?: number;

package/lib/index.cjs.js

@@ -2813,7 +2813,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                             </SpsForm>
                         )
                     }
-                `}}}},vN={disabled:"boolean",min:"number",max:"number",step:"number",onValueChange:"(newValue: number) => void"};function $i(e){const{autoComplete:t,disabled:n,min:r=Number.MIN_SAFE_INTEGER,max:a=Number.MAX_SAFE_INTEGER,step:o=1,onValueChange:l,unsafelyReplaceClassName:c,className:p,"data-testid":f,...m}=e,[u,h]=s.useState(Math.max(r,0)),[g,v]=s.useState(!1);s.useEffect(()=>{l&&typeof l=="function"&&l(u),v(u<r||u>a)},[u]);const w=()=>u<=r?!1:(u>a?h(a):h(x=>x-o),!0),T=()=>u>=a?!1:(u<r?h(r):h(x=>x+o),!0),E=x=>{x.target.value!==""&&h(parseInt(x.target.value,10))},N=c||H("sps-incrementor sps-input-group sps-input-group__append",p);return s.createElement("div",{className:N,...m,"data-testid":f},s.createElement("div",{className:"sps-button sps-button--icon"},s.createElement("button",{type:"button","data-testid":`${f}__minus`,onClick:w,disabled:n,"aria-label":`Subtract ${o}`},s.createElement("i",{className:"sps-icon sps-icon-minus","aria-hidden":"true"}))),s.createElement("div",{className:"sps-text-input"},s.createElement("input",{type:"text",className:H("sps-form-control",g&&"sps-input--error"),value:u,onChange:E,disabled:n,"data-testid":`${f}__input`,autoComplete:t})),s.createElement("div",{className:"sps-button sps-button--icon"},s.createElement("button",{type:"button","data-testid":`${f}__plus`,onClick:T,disabled:n,"aria-label":`Add ${o}`},s.createElement("i",{className:"sps-icon sps-icon-plus-sign","aria-hidden":"true"}))))}Object.assign($i,{props:vN,displayName:"SpsIncrementor"});const pm={stepExample:{label:"Incrementor",description:"info about incrementor",examples:{stacked:{react:y.code`
+                `}}}},vN={disabled:"boolean",defaultValue:"number",min:"number",max:"number",step:"number",onValueChange:"(newValue: number) => void"};function $i(e){const{autoComplete:t,disabled:n,defaultValue:r=0,min:a=Number.MIN_SAFE_INTEGER,max:o=Number.MAX_SAFE_INTEGER,step:l=1,onValueChange:c,unsafelyReplaceClassName:p,className:f,"data-testid":m,...u}=e,[h,g]=s.useState(Math.max(a,r)),[v,w]=s.useState(!1);s.useEffect(()=>{c&&typeof c=="function"&&c(h),w(h<a||h>o)},[h]);const T=()=>h<=a?!1:(h>o?g(o):g(I=>Math.max(I-l,a)),!0),E=()=>h>=o?!1:(h<a?g(a):g(I=>I+l),!0),N=I=>{I.target.value!==""&&g(parseInt(I.target.value,10))},x=p||H("sps-incrementor sps-input-group sps-input-group__append",f);return s.createElement("div",{className:x,...u,"data-testid":m},s.createElement("div",{className:"sps-button sps-button--icon"},s.createElement("button",{type:"button","data-testid":`${m}__minus`,onClick:T,disabled:n,"aria-label":`Subtract ${l}`},s.createElement("i",{className:"sps-icon sps-icon-minus","aria-hidden":"true"}))),s.createElement("div",{className:"sps-text-input"},s.createElement("input",{type:"text",className:H("sps-form-control",v&&"sps-input--error"),value:h,onChange:N,disabled:n,"data-testid":`${m}__input`,autoComplete:t})),s.createElement("div",{className:"sps-button sps-button--icon"},s.createElement("button",{type:"button","data-testid":`${m}__plus`,onClick:E,disabled:n,"aria-label":`Add ${l}`},s.createElement("i",{className:"sps-icon sps-icon-plus-sign","aria-hidden":"true"}))))}Object.assign($i,{props:vN,displayName:"SpsIncrementor"});const pm={stepExample:{label:"Incrementor",description:"info about incrementor",examples:{stacked:{react:y.code`
                     import { SpsIncrementor } from "@spscommerce/ds-react";
                     function Component () {
                         const [value, setValue] = React.useState("");
@@ -2823,6 +2823,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                         return (
                             <React.Fragment>
                                 <SpsIncrementor
+                                    defaultValue={1}
                                     min={0}
                                     max={10}
                                     step={2}

package/lib/index.es.js

@@ -17997,6 +17997,7 @@ const ZD = {
   }
 }, XD = {
   disabled: "boolean",
+  defaultValue: "number",
   min: "number",
   max: "number",
   step: "number",
@@ -18006,50 +18007,51 @@ function Tu(e) {
   const {
     autoComplete: t,
     disabled: n,
-    min: r = Number.MIN_SAFE_INTEGER,
-    max: a = Number.MAX_SAFE_INTEGER,
-    step: o = 1,
-    onValueChange: l,
-    unsafelyReplaceClassName: c,
-    className: p,
-    "data-testid": f,
-    ...m
-  } = e, [u, h] = s.useState(Math.max(r, 0)), [g, v] = s.useState(!1);
+    defaultValue: r = 0,
+    min: a = Number.MIN_SAFE_INTEGER,
+    max: o = Number.MAX_SAFE_INTEGER,
+    step: l = 1,
+    onValueChange: c,
+    unsafelyReplaceClassName: p,
+    className: f,
+    "data-testid": m,
+    ...u
+  } = e, [h, g] = s.useState(Math.max(a, r)), [v, w] = s.useState(!1);
   s.useEffect(() => {
-    l && typeof l == "function" && l(u), v(u < r || u > a);
-  }, [u]);
-  const w = () => u <= r ? !1 : (u > a ? h(a) : h((x) => x - o), !0), E = () => u >= a ? !1 : (u < r ? h(r) : h((x) => x + o), !0), T = (x) => {
-    x.target.value !== "" && h(parseInt(x.target.value, 10));
-  }, N = c || K("sps-incrementor sps-input-group sps-input-group__append", p);
-  return /* @__PURE__ */ s.createElement("div", { className: N, ...m, "data-testid": f }, /* @__PURE__ */ s.createElement("div", { className: "sps-button sps-button--icon" }, /* @__PURE__ */ s.createElement(
+    c && typeof c == "function" && c(h), w(h < a || h > o);
+  }, [h]);
+  const E = () => h <= a ? !1 : (h > o ? g(o) : g((I) => Math.max(I - l, a)), !0), T = () => h >= o ? !1 : (h < a ? g(a) : g((I) => I + l), !0), N = (I) => {
+    I.target.value !== "" && g(parseInt(I.target.value, 10));
+  }, x = p || K("sps-incrementor sps-input-group sps-input-group__append", f);
+  return /* @__PURE__ */ s.createElement("div", { className: x, ...u, "data-testid": m }, /* @__PURE__ */ s.createElement("div", { className: "sps-button sps-button--icon" }, /* @__PURE__ */ s.createElement(
     "button",
     {
       type: "button",
-      "data-testid": `${f}__minus`,
-      onClick: w,
+      "data-testid": `${m}__minus`,
+      onClick: E,
       disabled: n,
-      "aria-label": `Subtract ${o}`
+      "aria-label": `Subtract ${l}`
     },
     /* @__PURE__ */ s.createElement("i", { className: "sps-icon sps-icon-minus", "aria-hidden": "true" })
   )), /* @__PURE__ */ s.createElement("div", { className: "sps-text-input" }, /* @__PURE__ */ s.createElement(
     "input",
     {
       type: "text",
-      className: K("sps-form-control", g && "sps-input--error"),
-      value: u,
-      onChange: T,
+      className: K("sps-form-control", v && "sps-input--error"),
+      value: h,
+      onChange: N,
       disabled: n,
-      "data-testid": `${f}__input`,
+      "data-testid": `${m}__input`,
       autoComplete: t
     }
   )), /* @__PURE__ */ s.createElement("div", { className: "sps-button sps-button--icon" }, /* @__PURE__ */ s.createElement(
     "button",
     {
       type: "button",
-      "data-testid": `${f}__plus`,
-      onClick: E,
+      "data-testid": `${m}__plus`,
+      onClick: T,
       disabled: n,
-      "aria-label": `Add ${o}`
+      "aria-label": `Add ${l}`
     },
     /* @__PURE__ */ s.createElement("i", { className: "sps-icon sps-icon-plus-sign", "aria-hidden": "true" })
   )));
@@ -18074,6 +18076,7 @@ const QD = {
                         return (
                             <React.Fragment>
                                 <SpsIncrementor
+                                    defaultValue={1}
                                     min={0}
                                     max={10}
                                     step={2}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "8.4.3",
+  "version": "8.4.5",
   "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": "8.4.3",
-    "@sps-woodland/tabs": "8.4.3",
-    "@spscommerce/ds-colors": "8.4.3",
-    "@spscommerce/ds-shared": "8.4.3",
-    "@spscommerce/positioning": "8.4.3"
+    "@sps-woodland/illustrations": "8.4.5",
+    "@sps-woodland/tabs": "8.4.5",
+    "@spscommerce/ds-colors": "8.4.5",
+    "@spscommerce/ds-shared": "8.4.5",
+    "@spscommerce/positioning": "8.4.5"
   },
   "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": "8.4.3",
-    "@sps-woodland/tabs": "8.4.3",
-    "@spscommerce/ds-colors": "8.4.3",
-    "@spscommerce/ds-shared": "8.4.3",
-    "@spscommerce/positioning": "8.4.3",
-    "test": "8.4.3"
+    "@sps-woodland/illustrations": "8.4.5",
+    "@sps-woodland/tabs": "8.4.5",
+    "@spscommerce/ds-colors": "8.4.5",
+    "@spscommerce/ds-shared": "8.4.5",
+    "@spscommerce/positioning": "8.4.5",
+    "test": "8.4.5"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",