@spscommerce/ds-react 8.19.5 → 8.19.7

package/lib/index.cjs.js

@@ -4843,7 +4843,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                 import { FeedbackBlockKind } from "@spscommerce/ds-shared";
         `,jsx:v.code`
                     <SpsMicroBlock kind={FeedbackBlockKind.TIP} message="Pro Tip: Don't be a loser."/>
-                `}}}},UN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function wo({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(wo,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Xi({children:e,className:t,id:n,kind:r=H.ModalKind.GENERAL,size:o=H.ModalSize.SMALL,onClose:a,focusElementOnOpen:l,title:c,fullHeight:p=!1,...m}){const f=Dn(n),u=W("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${o}`,t),{t:h}=s.useContext(Ke),S=s.useRef(null),y=s.useRef(document.body.style.paddingRight||""),E=s.useRef(document.body.style.overflow||"");E.current==="hidden"&&(E.current="",y.current=""),s.useLayoutEffect(()=>{let I=!1;if(document.body.style.overflow!=="hidden"){const x=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=x,document.body.style.overflow="hidden",I=!0}return()=>{I&&(document.body.style.overflow=E.current,document.body.style.paddingRight=y.current)}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():S.current&&S.current.focus()},[l]);const T=s.useCallback(I=>{if(I&&I.key==="Escape"&&a&&a(),I&&I.key==="Tab"&&S.current){const x=S.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=x[0],F=x[x.length-1];x.length===0?I.preventDefault():I.shiftKey&&I.target===k?(I.preventDefault(),F.focus()):!I.shiftKey&&I.target===F&&(I.preventDefault(),k.focus())}},[a]),[[w],N]=Lt(e,[{type:wo}]);return s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:u,onKeyDown:T,tabIndex:-1,ref:S},s.createElement("div",{...m,className:W("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.${r}`)),a&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:a},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(Ot.Provider,{value:{parentElementRef:S,fixed:!0}},N)),w||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ue,{kind:r===H.ModalKind.SERIOUS_WARNING?H.ButtonKind.DELETE:H.ButtonKind.KEY,onClick:a},h("design-system:modal.defaultButtonLabel")))))}Object.assign(Xi,{props:UN,displayName:"SpsModal"});const zN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Qi({children:e,className:t,id:n,show:r,closeOnEscapePressed:o=!0,onClose:a,focusElementOnOpen:l,title:c,...p}){const m=Dn(n),f=W("sps-slide-in-panel","z-stratum-dialog",r?"open":"",t),u=s.useRef(document.body.style.overflow||""),h=s.useRef(document.body.style.paddingRight||""),{t:S}=s.useContext(Ke),y=s.useRef(null);s.useEffect(()=>{if(r){const w=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=w,document.body.style.overflow="hidden"}else document.body.style.overflow=u.current,document.body.style.paddingRight=h.current;return()=>{document.body.style.overflow=u.current,document.body.style.paddingRight=h.current}},[r]),s.useEffect(()=>{l&&l.current?l.current.focus():y.current&&y.current.focus()},[l]);const E=s.useCallback(w=>{if(o&&w&&w.key==="Escape"&&a&&a(),w&&w.key==="Tab"&&y.current){const N=y.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=N[0],x=N[N.length-1];N.length===0?w.preventDefault():w.shiftKey&&w.target===I?(w.preventDefault(),x.focus()):!w.shiftKey&&w.target===x&&(w.preventDefault(),I.focus())}},[a]);s.useEffect(()=>(window.addEventListener("keydown",E),()=>{window.removeEventListener("keydown",E)}),[E]);const[T]=Lt(e);return s.createElement("div",{id:m.current,role:"dialog","aria-labelledby":`${m.current}-title`,className:f,tabIndex:-1,ref:y},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:`${m.current}-title`},c||S("design-system:slideInPanel.defaultTitle")),a&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:a},s.createElement("button",{"aria-label":S("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(Ot.Provider,{value:{parentElementRef:y,fixed:!0}},T))))}Object.assign(Qi,{props:zN,displayName:"SpsSlideInPanel"});const Hm={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:v.code`
+                `}}}},UN={kind:"ModalKind",size:"ModalSize",title:"string",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>",fullHeight:"boolean"};function wo({children:e}){return s.createElement("div",{className:"sps-modal__footer"},e)}Object.assign(wo,{props:{},propTypes:{},displayName:"SpsModalFooter"});function Xi({children:e,className:t,id:n,kind:r=H.ModalKind.GENERAL,size:o=H.ModalSize.SMALL,onClose:a,focusElementOnOpen:l,title:c,fullHeight:p=!1,...m}){const f=Dn(n),u=W("sps-modal","z-stratum-dialog",`sps-modal--${r}`,`sps-modal--${o}`,t),{t:h}=s.useContext(Ke),S=s.useRef(null),y=s.useRef(document.body.style.paddingRight||""),E=s.useRef(document.body.style.overflow||"");E.current==="hidden"&&(E.current="",y.current=""),s.useLayoutEffect(()=>{let I=!1;if(document.body.style.overflow!=="hidden"){const x=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=x,document.body.style.overflow="hidden",I=!0}return()=>{I&&(document.body.style.overflow=E.current,document.body.style.paddingRight=y.current)}},[]),s.useEffect(()=>{l&&l.current?l.current.focus():S.current&&S.current.focus()},[l]);const T=s.useCallback(I=>{if(I&&I.key==="Escape"&&a&&a(),I&&I.key==="Tab"&&S.current){const x=S.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),k=x[0],F=x[x.length-1];x.length===0?I.preventDefault():I.shiftKey&&I.target===k?(I.preventDefault(),F.focus()):!I.shiftKey&&I.target===F&&(I.preventDefault(),k.focus())}},[a]),[[w],N]=Lt(e,[{type:wo}]);return s.createElement("div",{id:f.current,role:"dialog","aria-modal":!0,"aria-labelledby":`${f.current}-title`,className:u,onKeyDown:T,tabIndex:-1,ref:S},s.createElement("div",{...m,className:W("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.${r}`)),a&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:a},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(Ot.Provider,{value:{parentElementRef:S,fixed:!0}},N)),w||s.createElement("div",{className:"sps-modal__footer"},s.createElement(Ue,{kind:r===H.ModalKind.SERIOUS_WARNING?H.ButtonKind.DELETE:H.ButtonKind.KEY,onClick:a},h("design-system:modal.defaultButtonLabel")))))}Object.assign(Xi,{props:UN,displayName:"SpsModal"});const zN={title:"string",show:"boolean",closeOnEscapePressed:"boolean",onClose:"() => void",focusElementOnOpen:"React.MutableRefObject<HTMLElement>"};function Qi({children:e,className:t,id:n,show:r,closeOnEscapePressed:o=!0,onClose:a,focusElementOnOpen:l,title:c,...p}){const m=Dn(n),f=W("sps-slide-in-panel","z-stratum-dialog",r?"open":"",t),{t:u}=s.useContext(Ke),h=s.useRef(null),S=s.useRef(document.body.style.paddingRight||""),y=s.useRef(document.body.style.overflow||"");y.current==="hidden"&&(y.current="",S.current=""),s.useLayoutEffect(()=>{let w=!1;if(r&&document.body.style.overflow!=="hidden"){const N=`${window.innerWidth-document.body.clientWidth}px`;document.body.style.paddingRight=N,document.body.style.overflow="hidden",w=!0}return()=>{w&&(document.body.style.overflow=y.current,document.body.style.paddingRight=S.current)}},[r]),s.useEffect(()=>{l&&l.current?l.current.focus():h.current&&h.current.focus()},[l]);const E=s.useCallback(w=>{if(o&&w&&w.key==="Escape"&&a&&a(),w&&w.key==="Tab"&&h.current){const N=h.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),I=N[0],x=N[N.length-1];N.length===0?w.preventDefault():w.shiftKey&&w.target===I?(w.preventDefault(),x.focus()):!w.shiftKey&&w.target===x&&(w.preventDefault(),I.focus())}},[a]);s.useEffect(()=>(window.addEventListener("keydown",E),()=>{window.removeEventListener("keydown",E)}),[E]);const[T]=Lt(e);return s.createElement("div",{id:m.current,role:"dialog","aria-labelledby":`${m.current}-title`,className:f,tabIndex:-1,ref:h},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:`${m.current}-title`},c||u("design-system:slideInPanel.defaultTitle")),a&&s.createElement("div",{className:"sps-button sps-button--icon",onClick:a},s.createElement("button",{"aria-label":u("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(Ot.Provider,{value:{parentElementRef:h,fixed:!0}},T))))}Object.assign(Qi,{props:zN,displayName:"SpsSlideInPanel"});const Hm={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:v.code`
                     import { SpsButton, SpsSlideInPanel } from "@spscommerce/ds-react";
                     import { ButtonKind } from "@spscommerce/ds-shared";
                     function Component() {