@spscommerce/ds-react 7.17.2 → 7.17.3

package/lib/index.cjs.js

@@ -591,6 +591,13 @@
             
             return (
               <>
+              <SpsSplitButton
+                  className="mr-1 mb-1"
+                  kind={ButtonKind.KEY}
+                  label="Loading at startup"
+                  spinning={true}
+                  spinningTitle="Loading ..."
+                />
                 <SpsSplitButton
                   onClick={() => handleConfirmationRequest("General confirmation")}
                   className="mr-1 mb-1"
@@ -8724,7 +8731,7 @@ var r=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                       </div>
                     );
                 }
-              `}}}},Sx={disabled:"boolean",href:"string",label:"string",icon:"SpsIcon",kind:"StdButtonKind",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",spinning:"boolean",spinningTitle:"string"};function al(e){const{children:t,className:n,"data-testid":r,disabled:a,href:o,label:l,options:c,icon:p,kind:f=$.StdButtonKind.DEFAULT,spinning:m,spinningTitle:u,unsafelyReplaceClassName:h,...S}=e,T=s.useRef(null),[E,w]=s.useState({width:0}),[C,I]=s.useState(!1);s.useLayoutEffect(()=>{T.current&&w({width:T.current.offsetWidth})},[]);const k=()=>{I(!0)},b=()=>{I(!1)},M=K(h||"sps-split-button",`sps-split-button--${f}`,C&&"sps-split-button--open",n);return s.createElement(s.Fragment,null,m?s.createElement(He,{className:n,"data-testid":r,style:{width:E.width},kind:f,icon:p,href:o,spinning:!0,spinningTitle:u},l):s.createElement("div",{ref:T,className:M,"data-testid":r,...S},s.createElement(He,{kind:f,icon:p,href:o,disabled:a},l),s.createElement(Fn,{kind:f,options:c,disabled:a,onOpen:k,onClose:b})))}Object.assign(al,{props:Sx,displayName:"SpsSplitButton"});const vf={kinds:{label:"Regular Split Buttons",description:y.code`<p>info about split buttons</p>`,examples:{basic:{description:y.code`<p>Basic</p>`,imports:y.code`
+              `}}}},Sx={disabled:"boolean",href:"string",label:"string",icon:"SpsIcon",kind:"StdButtonKind",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>",spinning:"boolean",spinningTitle:"string"};function al(e){const{children:t,className:n,"data-testid":r,disabled:a,href:o,label:l,options:c,icon:p,kind:f=$.StdButtonKind.DEFAULT,spinning:m,spinningTitle:u,unsafelyReplaceClassName:h,...S}=e,T=s.useRef(null),[E,w]=s.useState({width:0}),[C,I]=s.useState(!1),[k,b]=s.useState(!1);s.useLayoutEffect(()=>{T.current&&w({width:T.current.offsetWidth})},[]),s.useEffect(()=>{b(Boolean(m))},[m]);const M=()=>{I(!0)},L=()=>{I(!1)},N=K(h||"sps-split-button",`sps-split-button--${f}`,C&&"sps-split-button--open",n);return s.createElement(s.Fragment,null,k?s.createElement(He,{className:n,"data-testid":r,style:{width:E.width},kind:f,icon:p,href:o,spinning:!0,spinningTitle:u},l):s.createElement("div",{ref:T,className:N,"data-testid":r,...S},s.createElement(He,{kind:f,icon:p,href:o,disabled:a},l),s.createElement(Fn,{kind:f,options:c,disabled:a,onOpen:M,onClose:L})))}Object.assign(al,{props:Sx,displayName:"SpsSplitButton"});const vf={kinds:{label:"Regular Split Buttons",description:y.code`<p>info about split buttons</p>`,examples:{basic:{description:y.code`<p>Basic</p>`,imports:y.code`
                     import { SpsSplitButton } from "@spscommerce/ds-react";
         `,jsx:y.code`
                     <React.Fragment>

package/lib/index.es.js

@@ -2916,6 +2916,13 @@ const Cv = {
             
             return (
               <>
+              <SpsSplitButton
+                  className="mr-1 mb-1"
+                  kind={ButtonKind.KEY}
+                  label="Loading at startup"
+                  spinning={true}
+                  spinningTitle="Loading ..."
+                />
                 <SpsSplitButton
                   onClick={() => handleConfirmationRequest("General confirmation")}
                   className="mr-1 mb-1"
@@ -27699,23 +27706,25 @@ function um(e) {
     spinningTitle: u,
     unsafelyReplaceClassName: h,
     ...g
-  } = e, y = s.useRef(null), [T, w] = s.useState({ width: 0 }), [C, I] = s.useState(!1);
+  } = e, y = s.useRef(null), [T, w] = s.useState({ width: 0 }), [C, I] = s.useState(!1), [k, b] = s.useState(!1);
   s.useLayoutEffect(() => {
     y.current && w({
       width: y.current.offsetWidth
     });
-  }, []);
-  const k = () => {
+  }, []), s.useEffect(() => {
+    b(Boolean(m));
+  }, [m]);
+  const M = () => {
     I(!0);
-  }, b = () => {
+  }, L = () => {
     I(!1);
-  }, M = V(
+  }, N = V(
     h || "sps-split-button",
     `sps-split-button--${f}`,
     C && "sps-split-button--open",
     n
   );
-  return /* @__PURE__ */ s.createElement(s.Fragment, null, m ? /* @__PURE__ */ s.createElement(Ye, {
+  return /* @__PURE__ */ s.createElement(s.Fragment, null, k ? /* @__PURE__ */ s.createElement(Ye, {
     className: n,
     "data-testid": r,
     style: { width: T.width },
@@ -27726,7 +27735,7 @@ function um(e) {
     spinningTitle: u
   }, l) : /* @__PURE__ */ s.createElement("div", {
     ref: y,
-    className: M,
+    className: N,
     "data-testid": r,
     ...g
   }, /* @__PURE__ */ s.createElement(Ye, {
@@ -27738,8 +27747,8 @@ function um(e) {
     kind: f,
     options: c,
     disabled: a,
-    onOpen: k,
-    onClose: b
+    onOpen: M,
+    onClose: L
   })));
 }
 Object.assign(um, {

package/package.json

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