@spscommerce/ds-react 6.4.0 → 6.4.1

package/lib/index.cjs.js

@@ -2993,7 +2993,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                   </>
                 )
               }
-              `}}}},Gk={imgSrc:"string",kind:"GrowlerKind",onClose:"() => void",persist:"boolean",title:"string"},jk=$(I({},U),{imgSrc:w.exports.string,kind:fe(O.GrowlerKind),onClose:ae(),persist:w.exports.bool,title:w.exports.string});function br(e){const A=e,{children:t,className:n,imgSrc:a,kind:o=O.GrowlerKind.INFO,onClose:i,persist:l,title:c,unsafelyReplaceClassName:u}=A,p=z(A,["children","className","imgSrc","kind","onClose","persist","title","unsafelyReplaceClassName"]),f=s.useRef(i);s.useEffect(()=>{f.current=i},[i]);const{t:m}=s.useContext(Ae),[g,S]=s.useState(!0),[E,D]=s.useState(!1);function T(){return[window.setTimeout(()=>D(!0),O.GROWLER_VISIBLE_DURATION_MS),window.setTimeout(()=>{S(!1),f.current&&f.current()},O.GROWLER_VISIBLE_DURATION_MS+O.GROWLER_FADEOUT_DURATION_MS)]}const y=s.useRef([]);function x(){l||(y.current=T())}function v(){for(const P of y.current)window.clearTimeout(P);y.current=[]}function k(){v(),S(!0),D(!1)}function _(){k(),D(!1),S(!1),i&&i()}const R=o===O.GrowlerKind.PROGRESS?"sps-spinner":F("sps-icon",`sps-icon-${O.GrowlerIcon.get(o)}`),M=F(u||"sps-growler",g&&"show",E&&"fade",`sps-growler--${o}`,n);return s.useEffect(()=>(x(),()=>{v()}),[]),Un("sps-growler-display-area",["sps-growler-area","z-stratum-dialog"])(s.createElement("div",I({role:"alert",className:M,onMouseEnter:k,onMouseLeave:x},p),s.createElement("div",{className:"sps-growler__icon-box"},a&&s.createElement("img",{src:a,alt:""}),!a&&s.createElement("i",{className:R,"aria-hidden":"true"})),s.createElement("div",{className:"sps-growler__message-box"},s.createElement("div",{className:"sps-growler__message-box-text"},c&&s.createElement("span",{className:"sps-growler__message-box-title d-block"},c),s.createElement("div",{className:"sps-growler__message-box-subtitle"},t)),s.createElement("button",{type:"button",className:"sps-growler__close-button","aria-hidden":"true",onClick:_},s.createElement("i",{className:"sps-icon sps-icon-x",title:m("design-system:growler.dismiss")})))))}Object.assign(br,{props:Gk,propTypes:jk,displayName:"SpsGrowler"});const Vm={writingGuidelines:{label:"Writing Guidelines",customSection:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the following guidelines to write an effective Growler message."),s.createElement("ul",null,s.createElement("li",null,"Write all messages in sentence case.",s.createElement("ul",null,s.createElement("li",null,"Capitalize the first word of the message."),s.createElement("li",null,"Add punctuation, such as a period, at the end of the message."))),s.createElement("li",null,"Keep messages as succinct as possible while also providing sufficient information to the customer."),s.createElement("li",null,"If you can clearly convey your message in a single statement, use only the Primary Message."),s.createElement("li",null,"If the message requires additional details, such as further information or instructions, use both the Primary and Secondary Messages.")),s.createElement("p",null,"For more examples of effective feedback message writing, refer to"," ",s.createElement("a",{href:"https://atlassian.design/content/messaging-guidelines",target:"_blank",rel:"noreferrer"},"Atlassian's Messaging Guidelines"),"."))},error:{label:"Error",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Acceptable message: Document ABC123 has not been sent. Check the form and try sending it again."),s.createElement("p",null,`Unacceptable message: Can't send your document."`)),examples:{primary:{description:"Primary Message Only",react:C.code`
+              `}}}},Gk={imgSrc:"string",kind:"GrowlerKind",onClose:"() => void",persist:"boolean",title:"string"},jk=$(I({},U),{imgSrc:w.exports.string,kind:fe(O.GrowlerKind),onClose:ae(),persist:w.exports.bool,title:w.exports.string});function br(e){const A=e,{children:t,className:n,imgSrc:a,kind:o=O.GrowlerKind.INFO,onClose:i,persist:l,title:c,unsafelyReplaceClassName:u}=A,p=z(A,["children","className","imgSrc","kind","onClose","persist","title","unsafelyReplaceClassName"]),f=s.useRef(i);s.useEffect(()=>{f.current=i},[i]);const{t:m}=s.useContext(Ae),[g,S]=s.useState(!0),[E,D]=s.useState(!1);function T(){return[window.setTimeout(()=>D(!0),O.GROWLER_VISIBLE_DURATION_MS),window.setTimeout(()=>{S(!1),f.current&&f.current()},O.GROWLER_VISIBLE_DURATION_MS+O.GROWLER_FADEOUT_DURATION_MS)]}const y=s.useRef([]);function x(){l||(y.current=T())}function v(){for(const P of y.current)window.clearTimeout(P);y.current=[]}function k(){v(),S(!0),D(!1)}function _(){k(),D(!1),S(!1),i&&i()}const R=o===O.GrowlerKind.PROGRESS?"sps-spinner":F("sps-icon",`sps-icon-${O.GrowlerIcon.get(o)}`),M=F(u||"sps-growler",g&&"show",E&&"fade",`sps-growler--${o}`,n);return s.useEffect(()=>(x(),()=>{v()}),[]),Un("sps-growler-display-area",["sps-growler-area","z-stratum-growlers"])(s.createElement("div",I({role:"alert",className:M,onMouseEnter:k,onMouseLeave:x},p),s.createElement("div",{className:"sps-growler__icon-box"},a&&s.createElement("img",{src:a,alt:""}),!a&&s.createElement("i",{className:R,"aria-hidden":"true"})),s.createElement("div",{className:"sps-growler__message-box"},s.createElement("div",{className:"sps-growler__message-box-text"},c&&s.createElement("span",{className:"sps-growler__message-box-title d-block"},c),s.createElement("div",{className:"sps-growler__message-box-subtitle"},t)),s.createElement("button",{type:"button",className:"sps-growler__close-button","aria-hidden":"true",onClick:_},s.createElement("i",{className:"sps-icon sps-icon-x",title:m("design-system:growler.dismiss")})))))}Object.assign(br,{props:Gk,propTypes:jk,displayName:"SpsGrowler"});const Vm={writingGuidelines:{label:"Writing Guidelines",customSection:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Use the following guidelines to write an effective Growler message."),s.createElement("ul",null,s.createElement("li",null,"Write all messages in sentence case.",s.createElement("ul",null,s.createElement("li",null,"Capitalize the first word of the message."),s.createElement("li",null,"Add punctuation, such as a period, at the end of the message."))),s.createElement("li",null,"Keep messages as succinct as possible while also providing sufficient information to the customer."),s.createElement("li",null,"If you can clearly convey your message in a single statement, use only the Primary Message."),s.createElement("li",null,"If the message requires additional details, such as further information or instructions, use both the Primary and Secondary Messages.")),s.createElement("p",null,"For more examples of effective feedback message writing, refer to"," ",s.createElement("a",{href:"https://atlassian.design/content/messaging-guidelines",target:"_blank",rel:"noreferrer"},"Atlassian's Messaging Guidelines"),"."))},error:{label:"Error",description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Acceptable message: Document ABC123 has not been sent. Check the form and try sending it again."),s.createElement("p",null,`Unacceptable message: Can't send your document."`)),examples:{primary:{description:"Primary Message Only",react:C.code`
                     import { SpsButton, SpsGrowler } from "@spscommerce/ds-react";
                     import { ButtonKind, GrowlerKind } from "@spscommerce/ds-shared";
 

package/lib/index.es.js

@@ -24197,7 +24197,7 @@ function SpsGrowler(props2) {
       clearTimers();
     };
   }, []);
-  const portal = usePortal("sps-growler-display-area", ["sps-growler-area", "z-stratum-dialog"]);
+  const portal = usePortal("sps-growler-display-area", ["sps-growler-area", "z-stratum-growlers"]);
   return portal(/* @__PURE__ */ React.createElement("div", __spreadValues({
     role: "alert",
     className: classes,

package/package.json

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