@spscommerce/ds-react 7.7.3 → 7.7.4

package/lib/index.cjs.js

@@ -5788,7 +5788,7 @@ var r=n.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."/>
-                `}}}},AN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function ca({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(ca,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ki({children:e,className:t,id:n,kind:r=$.ModalKind.GENERAL,size:a=$.ModalSize.SMALL,onClose:o,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const m=Nn(n),f=H("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),[E,w]=s.useState(!1);s.useEffect(()=>{const k=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=k,document.body.style.overflow="hidden",document.querySelectorAll(".z-stratum-bar").forEach(b=>{b.tempPaddingRightHolder=b.style.paddingRight,b.style.paddingRight=k}),w(!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,E]);const T=s.useCallback(k=>{if(k&&k.key==="Escape"&&o&&o(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],L=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),L.focus()):!k.shiftKey&&k.target===L&&(k.preventDefault(),I.focus())}},[o]),[[D],N]=Et(e,[{type:ca}]);return E?s.createElement("div",{id:m.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${m.current}-title`,className:f,onKeyDown:T,tabIndex:-1,ref:g},s.createElement("div",{...u,className:H("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${m.current}-title`},c||h(`design-system:modal.defaultTitle.${r}`)),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},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(yt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement($e,{kind:r===$.ModalKind.SERIOUS_WARNING?$.ButtonKind.DELETE:$.ButtonKind.KEY,onClick:o},h("design-system:modal.defaultButtonLabel"))))):s.createElement(s.Fragment,null)}Object.assign(Ki,{props:AN,displayName:"SpsModal"});const $N={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Hi({children:e,className:t,id:n,show:r,closeOnEscapePressed:a=!0,onClose:o,focusElementOnOpen:l,title:c,...p}){const u=Nn(n),m=H("sps-slide-in-panel","z-stratum-dialog",r?"open":"",t),f=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),E=s.useRef(null);s.useEffect(()=>{if(r){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=f.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=f.current,document.body.style.paddingRight=h.current}},[r]),s.useEffect(()=>{l&&l.current?l.current.focus():E.current&&E.current.focus()},[l]);const w=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&o&&o(),D&&D.key==="Tab"&&E.current){const N=E.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===k?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),k.focus())}},[o]);s.useEffect(()=>(window.addEventListener("keydown",w),()=>{window.removeEventListener("keydown",w)}),[w]);const[T]=Et(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:m,tabIndex:-1,ref:E},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${r?"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")),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},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(yt.Provider,{value:{parentElementRef:E,fixed:!0}},T))))}Object.assign(Hi,{props:$N,displayName:"SpsSlideInPanel"});const Gm={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`
+                `}}}},AN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function ca({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(ca,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Ki({children:e,className:t,id:n,kind:r=$.ModalKind.GENERAL,size:a=$.ModalSize.SMALL,onClose:o,focusElementOnOpen:l,title:c,fullHeight:p=!1,...u}){const m=Nn(n),f=H("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${a}`,t),{t:h}=s.useContext(Re),g=s.useRef(null),E=s.useRef(document.body.style.overflow||""),w=s.useRef(document.body.style.paddingRight||"");s.useLayoutEffect(()=>{let k=!1;if(document.body.style.overflow!=="hidden"){const b=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=b,document.body.style.overflow="hidden",k=!0}return()=>{k&&(document.body.style.overflow=E.current,document.body.style.paddingRight=w.current)}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():g.current&&g.current.focus()},[l]);const T=s.useCallback(k=>{if(k&&k.key==="Escape"&&o&&o(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],L=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),L.focus()):!k.shiftKey&&k.target===L&&(k.preventDefault(),I.focus())}},[o]),[[D],N]=Et(e,[{type:ca}]);return s.createElement("div",{id:m.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${m.current}-title`,className:f,onKeyDown:T,tabIndex:-1,ref:g},s.createElement("div",{...u,className:H("sps-modal__dialog",{"sps-modal__dialog-full-height":p})},s.createElement("div",{className:"sps-modal__titlebar"},s.createElement("div",{className:"sps-modal__title",id:`${m.current}-title`},c||h(`design-system:modal.defaultTitle.${r}`)),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},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(yt.Provider,{value:{parentElementRef:g,fixed:!0}},N)),D||s.createElement("div",{className:"sps-modal__footer"},s.createElement($e,{kind:r===$.ModalKind.SERIOUS_WARNING?$.ButtonKind.DELETE:$.ButtonKind.KEY,onClick:o},h("design-system:modal.defaultButtonLabel")))))}Object.assign(Ki,{props:AN,displayName:"SpsModal"});const $N={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Hi({children:e,className:t,id:n,show:r,closeOnEscapePressed:a=!0,onClose:o,focusElementOnOpen:l,title:c,...p}){const u=Nn(n),m=H("sps-slide-in-panel","z-stratum-dialog",r?"open":"",t),f=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:g}=s.useContext(Re),E=s.useRef(null);s.useEffect(()=>{if(r){const D=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=D,document.body.style.overflow="hidden"}else document.body.style.overflow=f.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=f.current,document.body.style.paddingRight=h.current}},[r]),s.useEffect(()=>{l&&l.current?l.current.focus():E.current&&E.current.focus()},[l]);const w=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&o&&o(),D&&D.key==="Tab"&&E.current){const N=E.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=N[0],b=N[N.length-1];N.length===0?D.preventDefault():D.shiftKey&&D.target===k?(D.preventDefault(),b.focus()):!D.shiftKey&&D.target===b&&(D.preventDefault(),k.focus())}},[o]);s.useEffect(()=>(window.addEventListener("keydown",w),()=>{window.removeEventListener("keydown",w)}),[w]);const[T]=Et(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:m,tabIndex:-1,ref:E},s.createElement("div",{...p,className:`sps-slide-in-panel__dialog ${r?"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")),o&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:o},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(yt.Provider,{value:{parentElementRef:E,fixed:!0}},T))))}Object.assign(Hi,{props:$N,displayName:"SpsSlideInPanel"});const Gm={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

@@ -22110,19 +22110,19 @@ function Wu({
     `sps-modal--${n}`,
     `sps-modal--${a}`,
     t
-  ), { t: h } = s.useContext(Ae), S = s.useRef(null), [y, w] = s.useState(!1);
-  s.useEffect(() => {
-    const k = `${window.innerWidth - document.body.clientWidth}px`;
-    return document.body.style.paddingRight = k, document.body.style.overflow = "hidden", document.querySelectorAll(".z-stratum-bar").forEach((b) => {
-      b.tempPaddingRightHolder = b.style.paddingRight, b.style.paddingRight = k;
-    }), w(!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;
-      });
+  ), { t: h } = s.useContext(Ae), S = s.useRef(null), y = s.useRef(document.body.style.overflow || ""), w = s.useRef(document.body.style.paddingRight || "");
+  s.useLayoutEffect(() => {
+    let k = !1;
+    if (document.body.style.overflow !== "hidden") {
+      const b = `${window.innerWidth - document.body.clientWidth}px`;
+      document.body.style.paddingRight = b, document.body.style.overflow = "hidden", k = !0;
+    }
+    return () => {
+      k && (document.body.style.overflow = y.current, document.body.style.paddingRight = w.current);
     };
   }, []), s.useEffect(() => {
     l && l.current ? l.current.focus() : S.current && S.current.focus();
-  }, [l, y]);
+  }, [l]);
   const T = s.useCallback(
     (k) => {
       if (k && k.key === "Escape" && o && o(), k && k.key === "Tab" && S.current) {
@@ -22137,7 +22137,7 @@ function Wu({
     [D],
     N
   ] = Lt(e, [{ type: xi }]);
-  return y ? /* @__PURE__ */ s.createElement("div", {
+  return /* @__PURE__ */ s.createElement("div", {
     id: m.current,
     role: "dialog",
     "aria-modal": !0,
@@ -22174,7 +22174,7 @@ function Wu({
   }, /* @__PURE__ */ s.createElement(He, {
     kind: n === Rl.SERIOUS_WARNING ? Ge.DELETE : Ge.KEY,
     onClick: o
-  }, h("design-system:modal.defaultButtonLabel"))))) : /* @__PURE__ */ s.createElement(s.Fragment, null);
+  }, h("design-system:modal.defaultButtonLabel")))));
 }
 Object.assign(Wu, {
   props: MN,

package/package.json

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