@spscommerce/ds-react 5.2.0 → 5.2.1

package/lib/index.cjs.js

@@ -4773,7 +4773,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                     <SpsMicroBlock kind={FeedbackBlockKind.ERROR} message="Uh oh, big problems."/>
                 `}}},tipBlock:{label:"Tip Micro Block",examples:{tipBlock:{jsx:D.code`
                     <SpsMicroBlock kind={FeedbackBlockKind.TIP} message="Pro Tip: Don't be a loser."/>
-                `}}}},yI={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"},TI=W(I({},J),{kind:ge(O.ModalKind),size:ge(O.ModalSize),title:C.exports.string,onClose:ae(),focusElementOnOpen:Gt()});function Nr({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(Nr,{props:{},propTypes:{},displayName:"SpsModalV2Footer"});function el(p){var f=p,{children:e,className:t,id:n,kind:a=O.ModalKind.GENERAL,size:o=O.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c}=f,u=Z(f,["children","className","id","kind","size","onClose","focusElementOnOpen","title"]);const m=aa(n),b=B("sps-modal","z-stratum-dialog",`sps-modal--${a}`,`sps-modal--${o}`,t),{t:v}=s.useContext(We),T=s.useRef(),[k,g]=s.useState(!1);s.useEffect(()=>{const N=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=N,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(M=>{M.style.paddingRight=N}),g(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(M=>{M.style.paddingRight="initial"})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():T.current&&T.current.focus()},[l,k]);const w=s.useCallback(N=>{if(N&&N.key==="Escape"&&i&&i(),N&&N.key==="Tab"){const M=T.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),L=M[0],_=M[M.length-1];M.length===0?N.preventDefault():N.shiftKey&&N.target===L?(N.preventDefault(),_.focus()):!N.shiftKey&&N.target===_&&(N.preventDefault(),L.focus())}},[i]),[[E],y]=Ft(e,[{type:Nr}]);return k?s.createElement("div",{id:m.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${m.current}-title`,className:b,onKeyDown:w,tabIndex:-1,ref:T},s.createElement("div",W(I({},u),{className:"sps-modal__dialog"}),s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${m.current}-title`},c||v(`design-system:modal.defaultTitle.${a}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":v("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(Mt.Provider,{value:{parentElementRef:T,fixed:!0}},y)),E||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ye,{kind:a===O.ModalKind.SERIOUS_WARNING?O.ButtonKind.DELETE:O.ButtonKind.KEY,onClick:i},v("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(el,{props:yI,propTypes:TI,displayName:"SpsModalV2"});const bf={generalUsage:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",{className:"mt-2"},"Use a Modal:"),s.createElement("ul",null,s.createElement("li",null,"When the user needs to confirm a basic decision, such as deleting a record."),s.createElement("li",null,"When important information needs to be displayed to the user before continuing."),s.createElement("li",null,"When a simple selection, such as a single form input, is required before proceeding.")),s.createElement("h5",null,"Avoid a Modal:"),s.createElement("ul",null,s.createElement("li",null,"When a complex form is required. Use a"," ",s.createElement(e,{to:"Focused Task"},"Focused Task View")," instead."),s.createElement("li",null,"When sharing non-critical or tertiary information. Use a"," ",s.createElement(e,{to:"Growlers"},"Growler")," instead."))),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Close Button"),s.createElement("p",null,"Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding.")),react:D.code`
+                `}}}},yI={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"},TI=W(I({},J),{kind:ge(O.ModalKind),size:ge(O.ModalSize),title:C.exports.string,onClose:ae(),focusElementOnOpen:Gt()});function Nr({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(Nr,{props:{},propTypes:{},displayName:"SpsModalV2Footer"});function el(p){var f=p,{children:e,className:t,id:n,kind:a=O.ModalKind.GENERAL,size:o=O.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c}=f,u=Z(f,["children","className","id","kind","size","onClose","focusElementOnOpen","title"]);const m=aa(n),b=B("sps-modal","z-stratum-dialog",`sps-modal--${a}`,`sps-modal--${o}`,t),{t:v}=s.useContext(We),T=s.useRef(),[k,g]=s.useState(!1);s.useEffect(()=>{const N=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=N,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(M=>{M.tempPaddingRightHolder=M.style.paddingRight,M.style.paddingRight=N}),g(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(M=>{M.style.paddingRight=M.tempPaddingRightHolder||"",delete M.tempPaddingRightHolder})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():T.current&&T.current.focus()},[l,k]);const w=s.useCallback(N=>{if(N&&N.key==="Escape"&&i&&i(),N&&N.key==="Tab"){const M=T.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),L=M[0],_=M[M.length-1];M.length===0?N.preventDefault():N.shiftKey&&N.target===L?(N.preventDefault(),_.focus()):!N.shiftKey&&N.target===_&&(N.preventDefault(),L.focus())}},[i]),[[E],y]=Ft(e,[{type:Nr}]);return k?s.createElement("div",{id:m.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${m.current}-title`,className:b,onKeyDown:w,tabIndex:-1,ref:T},s.createElement("div",W(I({},u),{className:"sps-modal__dialog"}),s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${m.current}-title`},c||v(`design-system:modal.defaultTitle.${a}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":v("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(Mt.Provider,{value:{parentElementRef:T,fixed:!0}},y)),E||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ye,{kind:a===O.ModalKind.SERIOUS_WARNING?O.ButtonKind.DELETE:O.ButtonKind.KEY,onClick:i},v("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(el,{props:yI,propTypes:TI,displayName:"SpsModalV2"});const bf={generalUsage:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",{className:"mt-2"},"Use a Modal:"),s.createElement("ul",null,s.createElement("li",null,"When the user needs to confirm a basic decision, such as deleting a record."),s.createElement("li",null,"When important information needs to be displayed to the user before continuing."),s.createElement("li",null,"When a simple selection, such as a single form input, is required before proceeding.")),s.createElement("h5",null,"Avoid a Modal:"),s.createElement("ul",null,s.createElement("li",null,"When a complex form is required. Use a"," ",s.createElement(e,{to:"Focused Task"},"Focused Task View")," instead."),s.createElement("li",null,"When sharing non-critical or tertiary information. Use a"," ",s.createElement(e,{to:"Growlers"},"Growler")," instead."))),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Close Button"),s.createElement("p",null,"Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding.")),react:D.code`
                     function Component() {
                         const [showModal, setShowModal] = React.useState(false);
 

package/lib/index.es.js

@@ -28270,6 +28270,7 @@ function SpsModalV2(_u) {
     document.body.style.paddingRight = scrollbarWidth;
     document.body.style.overflow = "hidden";
     document.querySelectorAll(".z-stratum-bar").forEach((element) => {
+      element.tempPaddingRightHolder = element.style.paddingRight;
       element.style.paddingRight = scrollbarWidth;
     });
     setBodyIsReady(true);
@@ -28277,7 +28278,8 @@ function SpsModalV2(_u) {
       document.body.style.paddingRight = "initial";
       document.body.style.overflow = "auto";
       document.querySelectorAll(".z-stratum-bar").forEach((element) => {
-        element.style.paddingRight = "initial";
+        element.style.paddingRight = element.tempPaddingRightHolder || "";
+        delete element.tempPaddingRightHolder;
       });
     };
   }, []);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.2.0",
-    "@spscommerce/ds-shared": "5.2.0",
-    "@spscommerce/positioning": "5.2.0",
-    "@spscommerce/utils": "5.2.0",
+    "@spscommerce/ds-colors": "5.2.1",
+    "@spscommerce/ds-shared": "5.2.1",
+    "@spscommerce/positioning": "5.2.1",
+    "@spscommerce/utils": "5.2.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.2.0",
-    "@spscommerce/ds-shared": "5.2.0",
-    "@spscommerce/positioning": "5.2.0",
-    "@spscommerce/utils": "5.2.0",
+    "@spscommerce/ds-colors": "5.2.1",
+    "@spscommerce/ds-shared": "5.2.1",
+    "@spscommerce/positioning": "5.2.1",
+    "@spscommerce/utils": "5.2.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",