@webority/ui-react 0.68.1 → 0.68.3

package/dist/components/AppModal.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{useEffect as r,useRef as i,useState as a}from"react";import{Modal as o}from"react-bootstrap";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`danger`,`success`,`warning`],u=[`center`,`top`],d=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,f={sm:380,md:440,lg:640,xl:880},p=`wui-modal-fullscreen`,m=!1;function h(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||m||(m=!0,console.warn("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function g({open:m,eyebrow:g,title:_,subtitle:v,headerIcon:y,tone:b=`default`,dismissible:x=!0,onClose:S,footer:C,size:w=`md`,placement:T=`center`,hideHeader:E=!1,staticBackdrop:D=!1,confirmDiscard:O,dirty:k=!1,ariaLabel:A,className:j=``,children:M,...N}){t(`AppModal`,N),e(`AppModal`,`tone`,b,l),e(`AppModal`,`placement`,T,u),e(`AppModal`,`size`,typeof w==`string`?w:null,[...Object.keys(f),`fullscreen`]);let{style:P,...F}=N;E&&!A&&typeof _!=`string`&&h();let I=i(null),L=i(null),[R,z]=a(!1);r(()=>{m||z(!1)},[m]),r(()=>{R&&L.current?.focus()},[R]),r(()=>{let e=I.current?.closest(`.modal`);e&&(O?e.setAttribute(`confirm-discard`,O):e.removeAttribute(`confirm-discard`))},[m,O]),r(()=>{if(!m)return;let e=I.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(d));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`))||t()[0]||e).focus?.();let n=e.closest(`.modal`);return()=>{n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[m]);let B=()=>{if(O&&k){z(!0);return}S?.()},V=()=>{z(!1),S?.()},H=()=>{z(!1),(I.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},U=w===`fullscreen`,W=typeof w==`number`?w:f[w]??f.md,G=[`wui-modal`,b==="default"?``:`tone-${b}`,j].filter(Boolean).join(` `);return c(o,{...F,show:m,onHide:B,backdrop:!D||`static`,keyboard:!D,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:T!==`top`,className:U?`wui-modal-shell ${p}`:`wui-modal-shell`,style:U?P:{"--wui-modal-max-width":`${W}px`,...P},dialogClassName:`wui-rb-dialog`,contentClassName:G,backdropClassName:`wui-modal-dim`,"aria-label":A||(typeof _==`string`?_:void 0),children:[!E&&c(`div`,{className:`wui-modal-header`,children:[c(`div`,{className:`wui-modal-heading`,children:[y&&s(`span`,{className:`wui-modal-headicon`,children:s(n,{name:y,size:18})}),c(`div`,{className:`wui-modal-headtext`,children:[g&&s(`div`,{className:`wui-modal-eyebrow`,children:g}),s(`div`,{className:`wui-modal-title`,children:_}),v&&s(`div`,{className:`wui-modal-subtitle`,children:v})]})]}),x&&s(`button`,{type:`button`,className:`wui-modal-close`,onClick:B,"aria-label":`Close`,children:s(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:s(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),s(`div`,{className:`wui-modal-body`,ref:I,children:M}),(C||R)&&c(`div`,{className:R?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[R&&c(`div`,{className:`wui-drawer-discard`,role:`alert`,children:[s(`span`,{className:`wui-drawer-discard-text`,children:O}),s(`button`,{type:`button`,className:`btn btn-danger btn-sm`,"data-wui-discard-confirm":``,ref:L,onClick:V,children:`Discard`}),s(`button`,{type:`button`,className:`btn btn-secondary btn-sm`,"data-wui-discard-keep":``,onClick:H,children:`Keep editing`})]}),C]})]})}export{g as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{useEffect as r,useRef as i,useState as a}from"react";import{Modal as o}from"react-bootstrap";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`default`,`danger`,`success`,`warning`],u=[`center`,`top`],d=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,f={sm:380,md:440,lg:640,xl:880},p=`wui-modal-fullscreen`,m=!1;function h(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||m||(m=!0,console.warn("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function g(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.querySelectorAll(d));if(!n.length){e.preventDefault(),t.focus();return}let r=n[0],i=n[n.length-1],a=document.activeElement;e.shiftKey&&(a===r||a===t)?(e.preventDefault(),i.focus()):!e.shiftKey&&a===i&&(e.preventDefault(),r.focus())}function _(){let e=[];for(let t of document.body.children)t.hasAttribute(`inert`)||t.matches(`.modal, .modal-backdrop`)||(t.setAttribute(`inert`,``),e.push(t));return e}function v({open:m,eyebrow:v,title:y,subtitle:b,headerIcon:x,tone:S=`default`,dismissible:C=!0,onClose:w,footer:T,size:E=`md`,placement:D=`center`,hideHeader:O=!1,staticBackdrop:k=!1,confirmDiscard:A,dirty:j=!1,ariaLabel:M,className:N=``,children:P,...F}){t(`AppModal`,F),e(`AppModal`,`tone`,S,l),e(`AppModal`,`placement`,D,u),e(`AppModal`,`size`,typeof E==`string`?E:null,[...Object.keys(f),`fullscreen`]);let{style:I,...L}=F;O&&!M&&typeof y!=`string`&&h();let R=i(null),z=i(null),[B,V]=a(!1);r(()=>{m||V(!1)},[m]),r(()=>{B&&z.current?.focus()},[B]),r(()=>{let e=R.current?.closest(`.modal`);e&&(A?e.setAttribute(`confirm-discard`,A):e.removeAttribute(`confirm-discard`))},[m,A]),r(()=>{if(!m)return;let e=R.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(d));(e.querySelector(`[data-autofocus]`)||t().find(e=>!e.classList.contains(`wui-modal-close`))||t()[0]||e).focus?.();let n=e.closest(`.modal`),r=_(),i=e=>g(e,n);return n?.addEventListener(`keydown`,i),()=>{n?.removeEventListener(`keydown`,i);for(let e of r)e.removeAttribute(`inert`);n&&setTimeout(()=>{n.isConnected&&!n.classList.contains(`show`)&&n.dispatchEvent(new Event(`transitionend`,{bubbles:!0}))},500)}},[m]);let H=()=>{if(A&&j){V(!0);return}w?.()},U=()=>{V(!1),w?.()},W=()=>{V(!1),(R.current?.querySelector(`input:not([type="hidden"]):not([disabled]),select:not([disabled]),textarea:not([disabled])`))?.focus()},G=E===`fullscreen`,K=typeof E==`number`?E:f[E]??f.md,q=[`wui-modal`,S==="default"?``:`tone-${S}`,N].filter(Boolean).join(` `);return c(o,{...L,show:m,onHide:H,backdrop:!k||`static`,keyboard:!k,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:D!==`top`,className:G?`wui-modal-shell ${p}`:`wui-modal-shell`,style:G?I:{"--wui-modal-max-width":`${K}px`,...I},dialogClassName:`wui-rb-dialog`,contentClassName:q,backdropClassName:`wui-modal-dim`,"aria-label":M||(typeof y==`string`?y:void 0),children:[!O&&c(`div`,{className:`wui-modal-header`,children:[c(`div`,{className:`wui-modal-heading`,children:[x&&s(`span`,{className:`wui-modal-headicon`,children:s(n,{name:x,size:18})}),c(`div`,{className:`wui-modal-headtext`,children:[v&&s(`div`,{className:`wui-modal-eyebrow`,children:v}),s(`div`,{className:`wui-modal-title`,children:y}),b&&s(`div`,{className:`wui-modal-subtitle`,children:b})]})]}),C&&s(`button`,{type:`button`,className:`wui-modal-close`,onClick:H,"aria-label":`Close`,children:s(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:s(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),s(`div`,{className:`wui-modal-body`,ref:R,children:P}),(T||B)&&c(`div`,{className:B?`wui-modal-footer wui-drawer-discarding`:`wui-modal-footer`,children:[B&&c(`div`,{className:`wui-drawer-discard`,role:`alert`,children:[s(`span`,{className:`wui-drawer-discard-text`,children:A}),s(`button`,{type:`button`,className:`btn btn-danger btn-sm`,"data-wui-discard-confirm":``,ref:z,onClick:U,children:`Discard`}),s(`button`,{type:`button`,className:`btn btn-secondary btn-sm`,"data-wui-discard-keep":``,onClick:W,children:`Keep editing`})]}),T]})]})}export{v as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.68.1",
+  "version": "0.68.3",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.68.1",
-    "@webority/ui-elements": "0.68.1"
+    "@webority/theme": "0.68.3",
+    "@webority/ui-elements": "0.68.3"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",