@spscommerce/ds-react 7.4.9 → 7.4.10

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."/>
-                `}}}},TN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function sa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(sa,{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,E]=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}),E(!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 C=s.useCallback(k=>{if(k&&k.key==="Escape"&&i&&i(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],O=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),O.focus()):!k.shiftKey&&k.target===O&&(k.preventDefault(),I.focus())}},[i]),[[D],N]=yt(e,[{type:sa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:C,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:TN,displayName:"SpsModal"});const EN={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),{t:m}=s.useContext(Re),h=s.useRef(null),[g,T]=s.useState(!1);s.useEffect(()=>{const D=`${window.innerWidth-document.body.clientWidth}px`;return document.body.style.paddingRight=D,document.querySelectorAll(".z-stratum-bar").forEach(N=>{N.tempPaddingRightHolder=N.style.paddingRight,N.style.paddingRight=D}),T(!0),()=>{document.body.style.paddingRight="initial",document.body.style.overflow="auto",document.querySelectorAll(".z-stratum-bar").forEach(N=>{N.style.paddingRight=N.tempPaddingRightHolder||"",delete N.tempPaddingRightHolder})}},[]),s.useEffect(()=>{document.body.style.overflow=n?"hidden":"auto"},[n]),s.useEffect(()=>{l&&l.current?l.current.focus():h.current&&h.current.focus()},[l,g]);const E=s.useCallback(D=>{if(a&&D&&D.key==="Escape"&&i&&i(),D&&D.key==="Tab"&&h.current){const N=h.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())}},[i]),[C]=yt(e);return g?s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:f,onKeyDown:E,tabIndex:-1,ref:h},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||m("design-system:slideInPanel.defaultTitle")),i&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:i},s.createElement("button",{"aria-label":m("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:h,fixed:!0}},C)))):s.createElement(s.Fragment,null)}Object.assign(Pi,{props:EN,displayName:"SpsSlideInPanel"});const Cm={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`
+                `}}}},TN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function sa({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(sa,{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,E]=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}),E(!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 C=s.useCallback(k=>{if(k&&k.key==="Escape"&&i&&i(),k&&k.key==="Tab"&&g.current){const b=g.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=b[0],O=b[b.length-1];b.length===0?k.preventDefault():k.shiftKey&&k.target===I?(k.preventDefault(),O.focus()):!k.shiftKey&&k.target===O&&(k.preventDefault(),I.focus())}},[i]),[[D],N]=yt(e,[{type:sa}]);return T?s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:m,onKeyDown:C,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:TN,displayName:"SpsModal"});const EN={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 E=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"])'),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())}},[i]),[C]=yt(e);return s.createElement("div",{id:u.current,role:"dialog","aria-labelledby":`${u.current}-title`,className:f,onKeyDown:E,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}},C))))}Object.assign(Pi,{props:EN,displayName:"SpsSlideInPanel"});const Cm={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

@@ -22039,25 +22039,23 @@ function Du({
   title: c,
   ...p
 }) {
-  const u = ln(r), f = V("sps-slide-in-panel", "z-stratum-dialog", n ? "open" : "", t), { t: m } = s.useContext(Ae), h = s.useRef(null), [g, y] = s.useState(!1);
+  const u = ln(r), f = V("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(Ae), y = s.useRef(null);
   s.useEffect(() => {
-    const D = `${window.innerWidth - document.body.clientWidth}px`;
-    return document.body.style.paddingRight = D, document.querySelectorAll(".z-stratum-bar").forEach((N) => {
-      N.tempPaddingRightHolder = N.style.paddingRight, N.style.paddingRight = D;
-    }), y(!0), () => {
-      document.body.style.paddingRight = "initial", document.body.style.overflow = "auto", document.querySelectorAll(".z-stratum-bar").forEach((N) => {
-        N.style.paddingRight = N.tempPaddingRightHolder || "", delete N.tempPaddingRightHolder;
-      });
+    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;
     };
-  }, []), s.useEffect(() => {
-    document.body.style.overflow = n ? "hidden" : "auto";
   }, [n]), s.useEffect(() => {
-    l && l.current ? l.current.focus() : h.current && h.current.focus();
-  }, [l, g]);
+    l && l.current ? l.current.focus() : y.current && y.current.focus();
+  }, [l]);
   const T = s.useCallback(
     (D) => {
-      if (a && D && D.key === "Escape" && i && i(), D && D.key === "Tab" && h.current) {
-        const N = h.current.querySelectorAll(
+      if (a && D && D.key === "Escape" && i && i(), D && D.key === "Tab" && y.current) {
+        const N = y.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());
@@ -22065,14 +22063,14 @@ function Du({
     },
     [i]
   ), [C] = Ot(e);
-  return g ? /* @__PURE__ */ s.createElement("div", {
+  return /* @__PURE__ */ s.createElement("div", {
     id: u.current,
     role: "dialog",
     "aria-labelledby": `${u.current}-title`,
     className: f,
     onKeyDown: T,
     tabIndex: -1,
-    ref: h
+    ref: y
   }, /* @__PURE__ */ s.createElement("div", {
     ...p,
     className: `sps-slide-in-panel__dialog ${n ? "open" : ""}`
@@ -22081,11 +22079,11 @@ function Du({
   }, /* @__PURE__ */ s.createElement("div", {
     className: "sps-slide-in-panel__title",
     id: `${u.current}-title`
-  }, c || m("design-system:slideInPanel.defaultTitle")), i && /* @__PURE__ */ s.createElement("div", {
+  }, c || g("design-system:slideInPanel.defaultTitle")), i && /* @__PURE__ */ s.createElement("div", {
     className: "sps-button sps-button--icon",
     onClick: i
   }, /* @__PURE__ */ s.createElement("button", {
-    "aria-label": m("design-system:slideInPanel.close"),
+    "aria-label": g("design-system:slideInPanel.close"),
     type: "button"
   }, /* @__PURE__ */ s.createElement("i", {
     className: "sps-icon sps-icon-x"
@@ -22093,10 +22091,10 @@ function Du({
     className: "sps-slide-in-panel__body"
   }, /* @__PURE__ */ s.createElement(_t.Provider, {
     value: {
-      parentElementRef: h,
+      parentElementRef: y,
       fixed: !0
     }
-  }, C)))) : /* @__PURE__ */ s.createElement(s.Fragment, null);
+  }, C))));
 }
 Object.assign(Du, {
   props: fN,

package/package.json

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