@sps-woodland/modal 8.46.2 → 8.46.3

package/lib/index.js

@@ -1758,7 +1758,7 @@ var pn = (e, t, o) => {
   for (var [u, f] of e.compoundVariants)
     pn(u, n, e.defaultVariants) && (o += " " + f);
   return o;
-}, bn = kt({ defaultClassName: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto20", variantClassNames: { kind: { informational: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto21", delete: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto22", failure: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto23", success: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto24", warning: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto25", successWithFailures: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto26", form: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto27" }, size: { sm: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto28", md: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto29", lg: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2a", xl: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2b" }, fullHeight: { true: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2c", false: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2d" } }, defaultVariants: {}, compoundVariants: [] }), gn = kt({ defaultClassName: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2e", variantClassNames: { kind: { form: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2f", delete: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2g", failure: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2h", informational: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2i", success: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2j", warning: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2k", successWithFailures: "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2l" } }, defaultVariants: {}, compoundVariants: [] }), vn = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2m", hn = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2n", $n = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2o", Tt = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2p", wn = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2q", En = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2r", _n = "pkg_sps-woodland_modal__version_8_46_2__hash_3moto2s";
+}, bn = kt({ defaultClassName: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto20", variantClassNames: { kind: { informational: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto21", delete: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto22", failure: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto23", success: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto24", warning: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto25", successWithFailures: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto26", form: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto27" }, size: { sm: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto28", md: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto29", lg: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2a", xl: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2b" }, fullHeight: { true: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2c", false: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2d" } }, defaultVariants: {}, compoundVariants: [] }), gn = kt({ defaultClassName: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2e", variantClassNames: { kind: { form: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2f", delete: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2g", failure: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2h", informational: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2i", success: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2j", warning: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2k", successWithFailures: "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2l" } }, defaultVariants: {}, compoundVariants: [] }), vn = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2m", hn = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2n", $n = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2o", Tt = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2p", wn = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2q", En = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2r", _n = "pkg_sps-woodland_modal__version_8_46_3__hash_3moto2s";
 function Pt({
   children: e,
   className: t = "",

package/lib/index.umd.cjs

@@ -3,7 +3,7 @@
   * {
     overscroll-behavior: contain;
   }
-}`.trim(),document.head.prepend(r);let i=u=>{if(!(u.touches.length===2||o)){if(!t||t===document.documentElement||t===document.body){u.preventDefault();return}t.scrollHeight===t.clientHeight&&t.scrollWidth===t.clientWidth&&u.preventDefault()}},a=u=>{let m=y(u),d=u.relatedTarget;if(d&&ve(d))d.focus({preventScroll:!0}),ut(d,ve(m));else if(!d){var p;let b=(p=m.parentElement)===null||p===void 0?void 0:p.closest("[tabindex]");b?.focus({preventScroll:!0})}},l=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(u){let m=x(),d=m!=null&&ve(m);l.call(this,{...u,preventScroll:!0}),(!u||!u.preventScroll)&&ut(this,d)};let s=ce(Se(document,"touchstart",n,{passive:!1,capture:!0}),Se(document,"touchmove",i,{passive:!1,capture:!0}),Se(document,"blur",a,!0));return()=>{e(),s(),r.remove(),HTMLElement.prototype.focus=l}}function de(e,t,o){let n=e.style[t];return e.style[t]=o,()=>{e.style[t]=n}}function Se(e,t,o,n){return e.addEventListener(t,o,n),()=>{e.removeEventListener(t,o,n)}}function ut(e,t){t||!ee?ct(e):ee.addEventListener("resize",()=>ct(e),{once:!0})}function ct(e){let t=document.scrollingElement||document.documentElement,o=e;for(;o&&o!==t;){let n=Je(o);if(n!==document.documentElement&&n!==document.body&&n!==o){let r=n.getBoundingClientRect(),i=o.getBoundingClientRect();if(i.top<r.top||i.bottom>r.top+o.clientHeight){let a=r.bottom;ee&&(a=Math.min(a,ee.offsetTop+ee.height));let l=i.top-r.top-((a-r.top)/2-i.height/2);n.scrollTo({top:Math.max(0,Math.min(n.scrollHeight-n.clientHeight,n.scrollTop+l)),behavior:"smooth"})}}o=n.parentElement}}const zo=c.createContext({});function qo(){var e;return(e=c.useContext(zo))!==null&&e!==void 0?e:{}}const Ko=typeof HTMLElement<"u"&&"inert"in HTMLElement.prototype;let te=new WeakMap,O=[];function jo(e,t){let o=U(e?.[0]),n=t instanceof o.Element?{root:t}:t;var r;let i=(r=n?.root)!==null&&r!==void 0?r:document.body,a=n?.shouldUseInert&&Ko,l=new Set(e),s=new Set,u=g=>a&&g instanceof o.HTMLElement?g.inert:g.getAttribute("aria-hidden")==="true",m=(g,$)=>{a&&g instanceof o.HTMLElement?g.inert=$:$?g.setAttribute("aria-hidden","true"):(g.removeAttribute("aria-hidden"),g instanceof o.HTMLElement&&(g.inert=!1))},d=new Set;if(I())for(let g of e){let $=g;for(;$&&$!==i;){let w=$.getRootNode();"shadowRoot"in w&&d.add(w.shadowRoot),$=w.parentNode}}let p=g=>{for(let M of g.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))l.add(M);let $=M=>{if(s.has(M)||l.has(M)||M.parentElement&&s.has(M.parentElement)&&M.parentElement.getAttribute("role")!=="row")return NodeFilter.FILTER_REJECT;for(let Fe of l)if(C(M,Fe))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},w=We(k(g),g,NodeFilter.SHOW_ELEMENT,{acceptNode:$}),V=$(g);if(V===NodeFilter.FILTER_ACCEPT&&b(g),V!==NodeFilter.FILTER_REJECT){let M=w.nextNode();for(;M!=null;)b(M),M=w.nextNode()}},b=g=>{var $;let w=($=te.get(g))!==null&&$!==void 0?$:0;u(g)&&w===0||(w===0&&m(g,!0),s.add(g),te.set(g,w+1))};O.length&&O[O.length-1].disconnect(),p(i);let h=new MutationObserver(g=>{for(let $ of g)if($.type==="childList"){if($.target.isConnected&&![...l,...s].some(w=>C(w,$.target)))for(let w of $.addedNodes)(w instanceof HTMLElement||w instanceof SVGElement)&&(w.dataset.liveAnnouncer==="true"||w.dataset.reactAriaTopLayer==="true")?l.add(w):w instanceof Element&&p(w);if(I()){for(let w of d)if(!w.isConnected){h.disconnect();break}}}});h.observe(i,{childList:!0,subtree:!0});let v=new Set;if(I())for(let g of d){let $=new MutationObserver(w=>{for(let V of w)if(V.type==="childList"){if(V.target.isConnected&&![...l,...s].some(M=>C(M,V.target)))for(let M of V.addedNodes)(M instanceof HTMLElement||M instanceof SVGElement)&&(M.dataset.liveAnnouncer==="true"||M.dataset.reactAriaTopLayer==="true")?l.add(M):M instanceof Element&&p(M);if(I()){for(let M of d)if(!M.isConnected){h.disconnect();break}}}});$.observe(g,{childList:!0,subtree:!0}),v.add($)}let L={visibleNodes:l,hiddenNodes:s,observe(){h.observe(i,{childList:!0,subtree:!0})},disconnect(){h.disconnect()}};return O.push(L),()=>{if(h.disconnect(),I())for(let g of v)g.disconnect();for(let g of s){let $=te.get(g);$!=null&&($===1?(m(g,!1),te.delete(g)):te.set(g,$-1))}L===O[O.length-1]?(O.pop(),O.length&&O[O.length-1].observe()):O.splice(O.indexOf(L),1)}}const ft=c.createContext(null);function Ro(e){let t=Ie(),{portalContainer:o=t?null:document.body,isExiting:n}=e,[r,i]=c.useState(!1),a=c.useMemo(()=>({contain:r,setContain:i}),[r,i]),{getContainer:l}=qo();if(!e.portalContainer&&l&&(o=l()),!o)return null;let s=e.children;return e.disableFocusManagement||(s=c.createElement(Po,{restoreFocus:!0,contain:(e.shouldContainFocus||r)&&!n},s)),s=c.createElement(ft.Provider,{value:a},c.createElement(yo,null,s)),_t.createPortal(s,o)}function mt(){let e=c.useContext(ft),t=e?.setContain;N(()=>{t?.(!0)},[t])}function Uo(e,t,o){let{overlayProps:n,underlayProps:r}=Io({...e,isOpen:t.isOpen,onClose:t.close},o);return Wo({isDisabled:!t.isOpen}),mt(),c.useEffect(()=>{if(t.isOpen&&o.current)return jo([o.current],{shouldUseInert:!0})},[t.isOpen,o]),{modalProps:qt(n),underlayProps:r}}function Go(e,t){let{role:o="dialog"}=e,n=Dt();n=e["aria-label"]?void 0:n;let r=c.useRef(!1);return c.useEffect(()=>{if(t.current&&!t.current.contains(document.activeElement)){Me(t.current);let i=setTimeout(()=>{document.activeElement===t.current&&(r.current=!0,t.current&&(t.current.blur(),Me(t.current)),r.current=!1)},500);return()=>{clearTimeout(i)}}},[t]),mt(),{dialogProps:{...Jt(e,{labelable:!0}),role:o,tabIndex:-1,"aria-labelledby":e["aria-labelledby"]||n,onBlur:i=>{r.current&&i.stopPropagation()}},titleProps:{id:n}}}function Jo(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function pt(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function bt(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?pt(Object(o),!0).forEach(function(n){Jo(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):pt(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var Xo=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},gt=e=>t=>{var o=e.defaultClassName,n=bt(bt({},e.defaultVariants),t);for(var r in n){var i,a=(i=n[r])!==null&&i!==void 0?i:e.defaultVariants[r];if(a!=null){var l=a;typeof l=="boolean"&&(l=l===!0?"true":"false");var s=e.variantClassNames[r][l];s&&(o+=" "+s)}}for(var[u,m]of e.compoundVariants)Xo(u,n,e.defaultVariants)&&(o+=" "+m);return o},Qo=gt({defaultClassName:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto20",variantClassNames:{kind:{informational:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto21",delete:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto22",failure:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto23",success:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto24",warning:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto25",successWithFailures:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto26",form:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto27"},size:{sm:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto28",md:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto29",lg:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2a",xl:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2b"},fullHeight:{true:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2c",false:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2d"}},defaultVariants:{},compoundVariants:[]}),Zo=gt({defaultClassName:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2e",variantClassNames:{kind:{form:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2f",delete:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2g",failure:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2h",informational:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2i",success:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2j",warning:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2k",successWithFailures:"pkg_sps-woodland_modal__version_8_46_2__hash_3moto2l"}},defaultVariants:{},compoundVariants:[]}),Yo="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2m",en="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2n",tn="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2o",vt="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2p",on="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2q",nn="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2r",rn="pkg_sps-woodland_modal__version_8_46_2__hash_3moto2s";function Le({children:e,className:t="",...o}){return f.createElement("div",{className:P.cl(vt,t),...o},e)}P.Metadata.set(Le,{name:"ModalFooter"});function ht({dismissableValue:e,handleClose:t}){return e?f.createElement(Oe.Button,{"aria-label":"Close",onClick:t,kind:"icon",icon:"x",className:on}):null}const xe=Object.freeze({form:"pencil",delete:"trash",failure:"status-error",informational:"info-circle",success:"status-ok",successWithFailures:"status-warning",warning:"status-warning"});function an({children:e,className:t,"data-testid":o,kind:n="informational",onBlur:r,onFocus:i,overlayProps:a,size:l="sm",state:s,title:u,dismissible:m,dismissable:d=!0,onClose:p,fullHeight:b=!1,...h}){const v=m??d,L=f.useRef(null),{modalProps:g,underlayProps:$}=Uo({isKeyboardDismissDisabled:!v,...h},s,L),{dialogProps:w,titleProps:V}=Go(h,L),M=P.combineEventHandlers(g.onFocus,w.onFocus,i),Fe=P.combineEventHandlers(g.onBlur,w.onBlur,r),{t:un}=Et.useWoodlandLanguage(),cn=P.useChildTestIdAttrBuilder({"data-testid":o}),[Be,fn]=P.selectChildren(e,[{type:Le}]),$t=f.useCallback(()=>{p&&typeof p=="function"&&p(),s.close()},[p,s.close]),mn=P.modChildren(fn,wt=>wt.type===ht?[{className:P.cl(wt.props.classname,nn)}]:[]);return f.createElement(Ro,null,f.createElement("div",{className:rn,"data-react-aria-top-layer":"true",...$,...h},f.createElement("div",{...g,...w,...a,onFocus:M,onBlur:Fe,...cn("dialog"),ref:L,className:P.cl(Qo({kind:n,size:l,fullHeight:b}),t)},f.createElement("div",{...V,className:Zo({kind:n})},n&&f.createElement(P.Icon,{icon:xe[n]||xe.informational,className:en}),f.createElement("div",{className:Yo},P.contentOf(u,s.close)),f.createElement(ht,{dismissableValue:v,handleClose:$t})),f.createElement("div",{className:tn},P.contentOf(mn,s.close)),Be&&Be.length>0?f.createElement(f.Fragment,null,P.contentOf(Be,s.close)):f.createElement("div",{className:vt},f.createElement(Oe.Button,{kind:"key",onClick:$t},un("modal.defaultButtonLabel",{defaultValue:"Okay"}))))))}function Ce(e){return e.state.isOpen?f.createElement(an,{...e},e.children):f.createElement(f.Fragment,null)}P.Metadata.set(Ce,{name:"Modal",props:{dismissable:{type:"boolean",default:"true"},fullHeight:{type:"boolean",default:"false"},kind:{type:"ModalKind",default:"informational"},onBlur:{type:"() => void"},onClose:{type:"() => void"},onFocus:{type:"() => void"},size:{type:"ModalSize",default:"sm"},title:{type:"string"}}});function ln(e){let[t,o]=vo(e.isOpen,e.defaultOpen||!1,e.onOpenChange);const n=c.useCallback(()=>{o(!0)},[o]),r=c.useCallback(()=>{o(!1)},[o]),i=c.useCallback(()=>{o(!t)},[o,t]);return{isOpen:t,setOpen:o,open:n,close:r,toggle:i}}function sn(e={}){const t=ln(e),o=c.useRef(null),{triggerProps:n,overlayProps:r}=Ao({},t,o),{onPress:i,...a}=n;return{triggerProps:{...a,onClick:i?l=>i(l):void 0,ref:o},modalState:t,modalProps:{overlayProps:r,state:t}}}const dn={Modals:{description:()=>f.createElement("p",null,"Modals are overlays on a page that focus a user’s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),components:[Ce],examples:{general:{label:"Usage",description:({NavigateTo:e})=>f.createElement(f.Fragment,null,f.createElement("h5",null,"Use a Modal:"),f.createElement("ul",null,f.createElement("li",null,"When the user needs to confirm a basic decision, such as deleting a record."),f.createElement("li",null,"When important information needs to be displayed to the user before continuing."),f.createElement("li",null,"When a simple selection, such as a single form input, is required before proceeding.")),f.createElement("h5",null,"Avoid a Modal:"),f.createElement("ul",null,f.createElement("li",null,"When a complex form is required. Use a ",f.createElement(e,{to:"focused-task"},"Focused Task View")," instead."),f.createElement("li",null,"When sharing non-critical or tertiary information. Use a ",f.createElement(e,{to:"growlers"},"Growler")," instead.")))},implementation:{label:"Close Button",description:()=>f.createElement(f.Fragment,null,f.createElement("h5",null,"Close Button and Modal dismissiability"),f.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."),f.createElement("p",null,"The close button is included by default and omitted when the prop ",f.createElement("code",null,"dismissable")," is set to ",f.createElement("strong",null,"false"),"."),f.createElement("p",null,"Setting the ",f.createElement("code",null,"dismissable")," prop to false also prevents dismissing the modal by clicking outside of the modal or by using the"," ",f.createElement("strong",null,"escape")," key.")),examples:{basic:{react:E.code`
+}`.trim(),document.head.prepend(r);let i=u=>{if(!(u.touches.length===2||o)){if(!t||t===document.documentElement||t===document.body){u.preventDefault();return}t.scrollHeight===t.clientHeight&&t.scrollWidth===t.clientWidth&&u.preventDefault()}},a=u=>{let m=y(u),d=u.relatedTarget;if(d&&ve(d))d.focus({preventScroll:!0}),ut(d,ve(m));else if(!d){var p;let b=(p=m.parentElement)===null||p===void 0?void 0:p.closest("[tabindex]");b?.focus({preventScroll:!0})}},l=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(u){let m=x(),d=m!=null&&ve(m);l.call(this,{...u,preventScroll:!0}),(!u||!u.preventScroll)&&ut(this,d)};let s=ce(Se(document,"touchstart",n,{passive:!1,capture:!0}),Se(document,"touchmove",i,{passive:!1,capture:!0}),Se(document,"blur",a,!0));return()=>{e(),s(),r.remove(),HTMLElement.prototype.focus=l}}function de(e,t,o){let n=e.style[t];return e.style[t]=o,()=>{e.style[t]=n}}function Se(e,t,o,n){return e.addEventListener(t,o,n),()=>{e.removeEventListener(t,o,n)}}function ut(e,t){t||!ee?ct(e):ee.addEventListener("resize",()=>ct(e),{once:!0})}function ct(e){let t=document.scrollingElement||document.documentElement,o=e;for(;o&&o!==t;){let n=Je(o);if(n!==document.documentElement&&n!==document.body&&n!==o){let r=n.getBoundingClientRect(),i=o.getBoundingClientRect();if(i.top<r.top||i.bottom>r.top+o.clientHeight){let a=r.bottom;ee&&(a=Math.min(a,ee.offsetTop+ee.height));let l=i.top-r.top-((a-r.top)/2-i.height/2);n.scrollTo({top:Math.max(0,Math.min(n.scrollHeight-n.clientHeight,n.scrollTop+l)),behavior:"smooth"})}}o=n.parentElement}}const zo=c.createContext({});function qo(){var e;return(e=c.useContext(zo))!==null&&e!==void 0?e:{}}const Ko=typeof HTMLElement<"u"&&"inert"in HTMLElement.prototype;let te=new WeakMap,O=[];function jo(e,t){let o=U(e?.[0]),n=t instanceof o.Element?{root:t}:t;var r;let i=(r=n?.root)!==null&&r!==void 0?r:document.body,a=n?.shouldUseInert&&Ko,l=new Set(e),s=new Set,u=g=>a&&g instanceof o.HTMLElement?g.inert:g.getAttribute("aria-hidden")==="true",m=(g,$)=>{a&&g instanceof o.HTMLElement?g.inert=$:$?g.setAttribute("aria-hidden","true"):(g.removeAttribute("aria-hidden"),g instanceof o.HTMLElement&&(g.inert=!1))},d=new Set;if(I())for(let g of e){let $=g;for(;$&&$!==i;){let w=$.getRootNode();"shadowRoot"in w&&d.add(w.shadowRoot),$=w.parentNode}}let p=g=>{for(let M of g.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))l.add(M);let $=M=>{if(s.has(M)||l.has(M)||M.parentElement&&s.has(M.parentElement)&&M.parentElement.getAttribute("role")!=="row")return NodeFilter.FILTER_REJECT;for(let Fe of l)if(C(M,Fe))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},w=We(k(g),g,NodeFilter.SHOW_ELEMENT,{acceptNode:$}),V=$(g);if(V===NodeFilter.FILTER_ACCEPT&&b(g),V!==NodeFilter.FILTER_REJECT){let M=w.nextNode();for(;M!=null;)b(M),M=w.nextNode()}},b=g=>{var $;let w=($=te.get(g))!==null&&$!==void 0?$:0;u(g)&&w===0||(w===0&&m(g,!0),s.add(g),te.set(g,w+1))};O.length&&O[O.length-1].disconnect(),p(i);let h=new MutationObserver(g=>{for(let $ of g)if($.type==="childList"){if($.target.isConnected&&![...l,...s].some(w=>C(w,$.target)))for(let w of $.addedNodes)(w instanceof HTMLElement||w instanceof SVGElement)&&(w.dataset.liveAnnouncer==="true"||w.dataset.reactAriaTopLayer==="true")?l.add(w):w instanceof Element&&p(w);if(I()){for(let w of d)if(!w.isConnected){h.disconnect();break}}}});h.observe(i,{childList:!0,subtree:!0});let v=new Set;if(I())for(let g of d){let $=new MutationObserver(w=>{for(let V of w)if(V.type==="childList"){if(V.target.isConnected&&![...l,...s].some(M=>C(M,V.target)))for(let M of V.addedNodes)(M instanceof HTMLElement||M instanceof SVGElement)&&(M.dataset.liveAnnouncer==="true"||M.dataset.reactAriaTopLayer==="true")?l.add(M):M instanceof Element&&p(M);if(I()){for(let M of d)if(!M.isConnected){h.disconnect();break}}}});$.observe(g,{childList:!0,subtree:!0}),v.add($)}let L={visibleNodes:l,hiddenNodes:s,observe(){h.observe(i,{childList:!0,subtree:!0})},disconnect(){h.disconnect()}};return O.push(L),()=>{if(h.disconnect(),I())for(let g of v)g.disconnect();for(let g of s){let $=te.get(g);$!=null&&($===1?(m(g,!1),te.delete(g)):te.set(g,$-1))}L===O[O.length-1]?(O.pop(),O.length&&O[O.length-1].observe()):O.splice(O.indexOf(L),1)}}const ft=c.createContext(null);function Ro(e){let t=Ie(),{portalContainer:o=t?null:document.body,isExiting:n}=e,[r,i]=c.useState(!1),a=c.useMemo(()=>({contain:r,setContain:i}),[r,i]),{getContainer:l}=qo();if(!e.portalContainer&&l&&(o=l()),!o)return null;let s=e.children;return e.disableFocusManagement||(s=c.createElement(Po,{restoreFocus:!0,contain:(e.shouldContainFocus||r)&&!n},s)),s=c.createElement(ft.Provider,{value:a},c.createElement(yo,null,s)),_t.createPortal(s,o)}function mt(){let e=c.useContext(ft),t=e?.setContain;N(()=>{t?.(!0)},[t])}function Uo(e,t,o){let{overlayProps:n,underlayProps:r}=Io({...e,isOpen:t.isOpen,onClose:t.close},o);return Wo({isDisabled:!t.isOpen}),mt(),c.useEffect(()=>{if(t.isOpen&&o.current)return jo([o.current],{shouldUseInert:!0})},[t.isOpen,o]),{modalProps:qt(n),underlayProps:r}}function Go(e,t){let{role:o="dialog"}=e,n=Dt();n=e["aria-label"]?void 0:n;let r=c.useRef(!1);return c.useEffect(()=>{if(t.current&&!t.current.contains(document.activeElement)){Me(t.current);let i=setTimeout(()=>{document.activeElement===t.current&&(r.current=!0,t.current&&(t.current.blur(),Me(t.current)),r.current=!1)},500);return()=>{clearTimeout(i)}}},[t]),mt(),{dialogProps:{...Jt(e,{labelable:!0}),role:o,tabIndex:-1,"aria-labelledby":e["aria-labelledby"]||n,onBlur:i=>{r.current&&i.stopPropagation()}},titleProps:{id:n}}}function Jo(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function pt(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),o.push.apply(o,n)}return o}function bt(e){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?pt(Object(o),!0).forEach(function(n){Jo(e,n,o[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):pt(Object(o)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))})}return e}var Xo=(e,t,o)=>{for(var n of Object.keys(e)){var r;if(e[n]!==((r=t[n])!==null&&r!==void 0?r:o[n]))return!1}return!0},gt=e=>t=>{var o=e.defaultClassName,n=bt(bt({},e.defaultVariants),t);for(var r in n){var i,a=(i=n[r])!==null&&i!==void 0?i:e.defaultVariants[r];if(a!=null){var l=a;typeof l=="boolean"&&(l=l===!0?"true":"false");var s=e.variantClassNames[r][l];s&&(o+=" "+s)}}for(var[u,m]of e.compoundVariants)Xo(u,n,e.defaultVariants)&&(o+=" "+m);return o},Qo=gt({defaultClassName:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto20",variantClassNames:{kind:{informational:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto21",delete:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto22",failure:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto23",success:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto24",warning:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto25",successWithFailures:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto26",form:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto27"},size:{sm:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto28",md:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto29",lg:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2a",xl:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2b"},fullHeight:{true:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2c",false:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2d"}},defaultVariants:{},compoundVariants:[]}),Zo=gt({defaultClassName:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2e",variantClassNames:{kind:{form:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2f",delete:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2g",failure:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2h",informational:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2i",success:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2j",warning:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2k",successWithFailures:"pkg_sps-woodland_modal__version_8_46_3__hash_3moto2l"}},defaultVariants:{},compoundVariants:[]}),Yo="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2m",en="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2n",tn="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2o",vt="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2p",on="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2q",nn="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2r",rn="pkg_sps-woodland_modal__version_8_46_3__hash_3moto2s";function Le({children:e,className:t="",...o}){return f.createElement("div",{className:P.cl(vt,t),...o},e)}P.Metadata.set(Le,{name:"ModalFooter"});function ht({dismissableValue:e,handleClose:t}){return e?f.createElement(Oe.Button,{"aria-label":"Close",onClick:t,kind:"icon",icon:"x",className:on}):null}const xe=Object.freeze({form:"pencil",delete:"trash",failure:"status-error",informational:"info-circle",success:"status-ok",successWithFailures:"status-warning",warning:"status-warning"});function an({children:e,className:t,"data-testid":o,kind:n="informational",onBlur:r,onFocus:i,overlayProps:a,size:l="sm",state:s,title:u,dismissible:m,dismissable:d=!0,onClose:p,fullHeight:b=!1,...h}){const v=m??d,L=f.useRef(null),{modalProps:g,underlayProps:$}=Uo({isKeyboardDismissDisabled:!v,...h},s,L),{dialogProps:w,titleProps:V}=Go(h,L),M=P.combineEventHandlers(g.onFocus,w.onFocus,i),Fe=P.combineEventHandlers(g.onBlur,w.onBlur,r),{t:un}=Et.useWoodlandLanguage(),cn=P.useChildTestIdAttrBuilder({"data-testid":o}),[Be,fn]=P.selectChildren(e,[{type:Le}]),$t=f.useCallback(()=>{p&&typeof p=="function"&&p(),s.close()},[p,s.close]),mn=P.modChildren(fn,wt=>wt.type===ht?[{className:P.cl(wt.props.classname,nn)}]:[]);return f.createElement(Ro,null,f.createElement("div",{className:rn,"data-react-aria-top-layer":"true",...$,...h},f.createElement("div",{...g,...w,...a,onFocus:M,onBlur:Fe,...cn("dialog"),ref:L,className:P.cl(Qo({kind:n,size:l,fullHeight:b}),t)},f.createElement("div",{...V,className:Zo({kind:n})},n&&f.createElement(P.Icon,{icon:xe[n]||xe.informational,className:en}),f.createElement("div",{className:Yo},P.contentOf(u,s.close)),f.createElement(ht,{dismissableValue:v,handleClose:$t})),f.createElement("div",{className:tn},P.contentOf(mn,s.close)),Be&&Be.length>0?f.createElement(f.Fragment,null,P.contentOf(Be,s.close)):f.createElement("div",{className:vt},f.createElement(Oe.Button,{kind:"key",onClick:$t},un("modal.defaultButtonLabel",{defaultValue:"Okay"}))))))}function Ce(e){return e.state.isOpen?f.createElement(an,{...e},e.children):f.createElement(f.Fragment,null)}P.Metadata.set(Ce,{name:"Modal",props:{dismissable:{type:"boolean",default:"true"},fullHeight:{type:"boolean",default:"false"},kind:{type:"ModalKind",default:"informational"},onBlur:{type:"() => void"},onClose:{type:"() => void"},onFocus:{type:"() => void"},size:{type:"ModalSize",default:"sm"},title:{type:"string"}}});function ln(e){let[t,o]=vo(e.isOpen,e.defaultOpen||!1,e.onOpenChange);const n=c.useCallback(()=>{o(!0)},[o]),r=c.useCallback(()=>{o(!1)},[o]),i=c.useCallback(()=>{o(!t)},[o,t]);return{isOpen:t,setOpen:o,open:n,close:r,toggle:i}}function sn(e={}){const t=ln(e),o=c.useRef(null),{triggerProps:n,overlayProps:r}=Ao({},t,o),{onPress:i,...a}=n;return{triggerProps:{...a,onClick:i?l=>i(l):void 0,ref:o},modalState:t,modalProps:{overlayProps:r,state:t}}}const dn={Modals:{description:()=>f.createElement("p",null,"Modals are overlays on a page that focus a user’s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),components:[Ce],examples:{general:{label:"Usage",description:({NavigateTo:e})=>f.createElement(f.Fragment,null,f.createElement("h5",null,"Use a Modal:"),f.createElement("ul",null,f.createElement("li",null,"When the user needs to confirm a basic decision, such as deleting a record."),f.createElement("li",null,"When important information needs to be displayed to the user before continuing."),f.createElement("li",null,"When a simple selection, such as a single form input, is required before proceeding.")),f.createElement("h5",null,"Avoid a Modal:"),f.createElement("ul",null,f.createElement("li",null,"When a complex form is required. Use a ",f.createElement(e,{to:"focused-task"},"Focused Task View")," instead."),f.createElement("li",null,"When sharing non-critical or tertiary information. Use a ",f.createElement(e,{to:"growlers"},"Growler")," instead.")))},implementation:{label:"Close Button",description:()=>f.createElement(f.Fragment,null,f.createElement("h5",null,"Close Button and Modal dismissiability"),f.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."),f.createElement("p",null,"The close button is included by default and omitted when the prop ",f.createElement("code",null,"dismissable")," is set to ",f.createElement("strong",null,"false"),"."),f.createElement("p",null,"Setting the ",f.createElement("code",null,"dismissable")," prop to false also prevents dismissing the modal by clicking outside of the modal or by using the"," ",f.createElement("strong",null,"escape")," key.")),examples:{basic:{react:E.code`
           import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
           import { sprinkles } from "@sps-woodland/tokens";
           import { Button } from "@sps-woodland/buttons";

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_modal__version_8_46_2__hash_3moto20{background-color:#fff;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-direction:column;overflow:hidden;max-height:100%}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto21{border-color:#007db8}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto22,.pkg_sps-woodland_modal__version_8_46_2__hash_3moto23{border-color:#de002e}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto24{border-color:#0b8940}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto25,.pkg_sps-woodland_modal__version_8_46_2__hash_3moto26{border-color:#e7760b}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto27{border-color:#4b5356}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto28{width:23.75rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto29{width:36.25rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2a{width:48.75rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2b{width:73.75rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2c{height:100%}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2e{align-items:center;color:#fff;display:flex;padding:1rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2f{background-color:#4b5356}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2g,.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2h{background-color:#de002e}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2i{background-color:#007db8}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2j{background-color:#0b8940}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2k,.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2l{background-color:#e7760b}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2m{flex-grow:1;font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2n{font-weight:600;line-height:.875rem;font-size:.875rem;margin-right:.5rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2o{overflow-y:auto;padding:1rem;flex:1}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2p{align-items:center;background-color:#f3f4f4;display:flex;justify-content:flex-end;padding:.5rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2q{color:#fff;border-width:0}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2r{padding:0 .25rem}.pkg_sps-woodland_modal__version_8_46_2__hash_3moto2s{position:fixed;z-index:1000;inset:0;background:#f3f4f4cc;display:flex;align-items:start;justify-content:center;padding:4rem 1rem 1rem}.z-stratum-dropdown{z-index:1100}
+.pkg_sps-woodland_modal__version_8_46_3__hash_3moto20{background-color:#fff;border-style:solid;border-width:.0625rem;border-radius:.25rem;display:flex;flex-direction:column;overflow:hidden;max-height:100%}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto21{border-color:#007db8}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto22,.pkg_sps-woodland_modal__version_8_46_3__hash_3moto23{border-color:#de002e}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto24{border-color:#0b8940}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto25,.pkg_sps-woodland_modal__version_8_46_3__hash_3moto26{border-color:#e7760b}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto27{border-color:#4b5356}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto28{width:23.75rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto29{width:36.25rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2a{width:48.75rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2b{width:73.75rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2c{height:100%}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2e{align-items:center;color:#fff;display:flex;padding:1rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2f{background-color:#4b5356}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2g,.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2h{background-color:#de002e}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2i{background-color:#007db8}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2j{background-color:#0b8940}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2k,.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2l{background-color:#e7760b}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2m{flex-grow:1;font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2n{font-weight:600;line-height:.875rem;font-size:.875rem;margin-right:.5rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2o{overflow-y:auto;padding:1rem;flex:1}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2p{align-items:center;background-color:#f3f4f4;display:flex;justify-content:flex-end;padding:.5rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2q{color:#fff;border-width:0}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2r{padding:0 .25rem}.pkg_sps-woodland_modal__version_8_46_3__hash_3moto2s{position:fixed;z-index:1000;inset:0;background:#f3f4f4cc;display:flex;align-items:start;justify-content:center;padding:4rem 1rem 1rem}.z-stratum-dropdown{z-index:1100}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/modal",
   "description": "SPS Woodland Design System modal component",
-  "version": "8.46.2",
+  "version": "8.46.3",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/modal",
@@ -29,10 +29,10 @@
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@sps-woodland/buttons": "8.46.2",
-    "@sps-woodland/core": "8.46.2",
-    "@sps-woodland/tokens": "8.46.2",
-    "@spscommerce/i18n": "8.46.2"
+    "@sps-woodland/buttons": "8.46.3",
+    "@sps-woodland/core": "8.46.3",
+    "@sps-woodland/tokens": "8.46.3",
+    "@spscommerce/i18n": "8.46.3"
   },
   "devDependencies": {
     "@react-spectrum/provider": "3.11.0",
@@ -43,10 +43,10 @@
     "@vanilla-extract/sprinkles": "1.5.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/buttons": "8.46.2",
-    "@sps-woodland/core": "8.46.2",
-    "@sps-woodland/tokens": "8.46.2",
-    "@spscommerce/i18n": "8.46.2"
+    "@sps-woodland/buttons": "8.46.3",
+    "@sps-woodland/core": "8.46.3",
+    "@sps-woodland/tokens": "8.46.3",
+    "@spscommerce/i18n": "8.46.3"
   },
   "dependencies": {
     "react-aria": "3.21.0",