@spscommerce/ds-react 7.4.13 → 7.4.14

package/lib/index.cjs.js

@@ -5788,7 +5788,7 @@ var n=r.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
                 import { FeedbackBlockKind } from "@spscommerce/ds-shared";
         `,jsx:y.code`
                     <SpsMicroBlock kind={FeedbackBlockKind.TIP} message="Pro Tip: Don't be a loser."/>
-                `}}}},EN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function aa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(aa,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ri({children:e,className:t,id:r,kind:n=V.ModalKind.GENERAL,size:a=V.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const f=Dr(r),m=$("sps-modal","z-stratum-dialog",`sps-modal--${n}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),[T,C]=s.useState(!1);s.useEffect(()=>{const I=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=I,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.tempPaddingRightHolder=b.style.paddingRight,b.style.paddingRight=I}),C(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.style.paddingRight=b.tempPaddingRightHolder||"",delete b.tempPaddingRightHolder})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l,T]);const E=s.useCallback(I=>{if(I&&I.key==="Escape"&&i&&i(),I&&I.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),x=b[0],O=b[b.length-1];b.length===0?I.preventDefault():I.shiftKey&&I.target===x?(I.preventDefault(),O.focus()):!I.shiftKey&&I.target===O&&(I.preventDefault(),x.focus())}},[i]),[[D],N]=yt(e,[{type:aa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:E,tabIndex:-1,ref:g},s.createElement("div",{...u,className:$("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${f.current}-title`},c||h(`design-system:modal.defaultTitle.${n}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":h("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(vt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ve,{kind:n===V.ModalKind.SERIOUS_WARNING?V.ButtonKind.DELETE:V.ButtonKind.KEY,onClick:i},h("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(Ri,{props:EN,displayName:"SpsModal"});const wN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Pi({children:e,className:t,id:r,show:n,closeOnEscapePressed:a=!0,onClose:i,focusElementOnOpen:l,title:c,...p}){const u=Dr(r),f=$("sps-slide-in-panel","z-stratum-dialog",n?"open":"",t),m=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),T=s.useRef(null);s.useEffect(()=>{if(n){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=m.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=m.current,document.body.style.paddingRight=h.current}},[n]),s.useEffect(()=>{l&&l.current?l.current.focus():T.current&&T.current.focus()},[l]);const C=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&i&&i(),D&&D.key==="Tab"&&T.current){const N=T.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===I?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),I.focus())}},[i]),[E]=yt(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:f,onKeyDown:C,tabIndex:-1,ref:T},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${n?"open":""}`},s.createElement("div",{className:"sps-slide-in-panel__titlebar"},s.createElement("div",{className:"sps-slide-in-panel__title",id:`${u.current}-title`},c||g("design-system:slideInPanel.defaultTitle")),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":g("design-system:slideInPanel.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-slide-in-panel__body"},s.createElement(vt.Provider,{value:{parentElementRef:T,fixed:!0}},E))))}Object.assign(Pi,{props:wN,displayName:"SpsSlideInPanel"});const Nm={generalUsage:{label:"General Usage",description:()=>s.createElement(s.Fragment,null),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Click on the button below to show the slide-in panel.")),react:y.code`
+                `}}}},EN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function aa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(aa,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ri({children:e,className:t,id:r,kind:n=V.ModalKind.GENERAL,size:a=V.ModalSize.SMALL,onClose:i,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const f=Dr(r),m=$("sps-modal","z-stratum-dialog",`sps-modal--${n}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),[T,C]=s.useState(!1);s.useEffect(()=>{const I=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=I,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.tempPaddingRightHolder=b.style.paddingRight,b.style.paddingRight=I}),C(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.style.paddingRight=b.tempPaddingRightHolder||"",delete b.tempPaddingRightHolder})}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l,T]);const E=s.useCallback(I=>{if(I&&I.key==="Escape"&&i&&i(),I&&I.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),x=b[0],O=b[b.length-1];b.length===0?I.preventDefault():I.shiftKey&&I.target===x?(I.preventDefault(),O.focus()):!I.shiftKey&&I.target===O&&(I.preventDefault(),x.focus())}},[i]),[[D],N]=yt(e,[{type:aa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:E,tabIndex:-1,ref:g},s.createElement("div",{...u,className:$("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${f.current}-title`},c||h(`design-system:modal.defaultTitle.${n}`)),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":h("design-system:modal.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-modal__body"},s.createElement(vt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ve,{kind:n===V.ModalKind.SERIOUS_WARNING?V.ButtonKind.DELETE:V.ButtonKind.KEY,onClick:i},h("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(Ri,{props:EN,displayName:"SpsModal"});const wN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Pi({children:e,className:t,id:r,show:n,closeOnEscapePressed:a=!0,onClose:i,focusElementOnOpen:l,title:c,...p}){const u=Dr(r),f=$("sps-slide-in-panel","z-stratum-dialog",n?"open":"",t),m=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),T=s.useRef(null);s.useEffect(()=>{if(n){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=m.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=m.current,document.body.style.paddingRight=h.current}},[n]),s.useEffect(()=>{l&&l.current?l.current.focus():T.current&&T.current.focus()},[l]);const C=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&i&&i(),D&&D.key==="Tab"&&T.current){const N=T.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===I?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),I.focus())}},[i]);s.useEffect(()=>(window.addEventListener("keydown",C),()=>{window.removeEventListener("keydown",C)}),[C]);const[E]=yt(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:f,tabIndex:-1,ref:T},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${n?"open":""}`},s.createElement("div",{className:"sps-slide-in-panel__titlebar"},s.createElement("div",{className:"sps-slide-in-panel__title",id:`${u.current}-title`},c||g("design-system:slideInPanel.defaultTitle")),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":g("design-system:slideInPanel.close"),type:"button"},s.createElement("i",{className:"sps-icon sps-icon-x"})))),s.createElement("div",{className:"sps-slide-in-panel__body"},s.createElement(vt.Provider,{value:{parentElementRef:T,fixed:!0}},E))))}Object.assign(Pi,{props:wN,displayName:"SpsSlideInPanel"});const Nm={generalUsage:{label:"General Usage",description:()=>s.createElement(s.Fragment,null),examples:{noCloseButton:{description:()=>s.createElement(s.Fragment,null,s.createElement("p",null,"Click on the button below to show the slide-in panel.")),react:y.code`
                     import { SpsButton, SpsSlideInPanel } from "@spscommerce/ds-react";
                     import { ButtonKind } from "@spscommerce/ds-shared";
                     function Component() {

package/lib/index.es.js

@@ -22087,13 +22087,16 @@ function Nu({
       }
     },
     [i]
-  ), [T] = Ot(e);
+  );
+  s.useEffect(() => (window.addEventListener("keydown", C), () => {
+    window.removeEventListener("keydown", C);
+  }), [C]);
+  const [T] = Ot(e);
   return /* @__PURE__ */ s.createElement("div", {
     id: u.current,
     role: "dialog",
     "aria-labelledby": `${u.current}-title`,
     className: f,
-    onKeyDown: C,
     tabIndex: -1,
     ref: y
   }, /* @__PURE__ */ s.createElement("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "7.4.13",
+  "version": "7.4.14",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -40,11 +40,11 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.6.0",
-    "@sps-woodland/illustrations": "7.4.13",
-    "@sps-woodland/tabs": "7.4.13",
-    "@spscommerce/ds-colors": "7.4.13",
-    "@spscommerce/ds-shared": "7.4.13",
-    "@spscommerce/positioning": "7.4.13",
+    "@sps-woodland/illustrations": "7.4.14",
+    "@sps-woodland/tabs": "7.4.14",
+    "@spscommerce/ds-colors": "7.4.14",
+    "@spscommerce/ds-shared": "7.4.14",
+    "@spscommerce/positioning": "7.4.14",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -58,11 +58,11 @@
     "@react-types/select": "^3.6.1",
     "@react-types/shared": "^3.8.0",
     "@react-types/tabs": "^3.0.1",
-    "@sps-woodland/illustrations": "7.4.13",
-    "@sps-woodland/tabs": "7.4.13",
-    "@spscommerce/ds-colors": "7.4.13",
-    "@spscommerce/ds-shared": "7.4.13",
-    "@spscommerce/positioning": "7.4.13",
+    "@sps-woodland/illustrations": "7.4.14",
+    "@sps-woodland/tabs": "7.4.14",
+    "@spscommerce/ds-colors": "7.4.14",
+    "@spscommerce/ds-shared": "7.4.14",
+    "@spscommerce/positioning": "7.4.14",
     "@spscommerce/utils": "^6.12.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^10.0.0",
@@ -76,7 +76,7 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "test": "7.4.13"
+    "test": "7.4.14"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",