@webority/ui-react 0.68.0 → 0.68.1

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}from"react";import{Modal as a}from"react-bootstrap";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`default`,`danger`,`success`,`warning`],l=[`center`,`top`],u=`a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])`,d={sm:380,md:440,lg:640,xl:880},f=`wui-modal-fullscreen`,p=!1;function m(){let e=!0;try{e=process.env.NODE_ENV!==`production`}catch{e=!0}!e||p||(p=!0,console.warn("[@webority/ui-react] <AppModal hideHeader> has no accessible name — pass `ariaLabel` (or a string `title`)."))}function h({open:p,eyebrow:h,title:g,subtitle:_,headerIcon:v,tone:y=`default`,dismissible:b=!0,onClose:x,footer:S,size:C=`md`,placement:w=`center`,hideHeader:T=!1,staticBackdrop:E=!1,ariaLabel:D,className:O=``,children:k,...A}){t(`AppModal`,A),e(`AppModal`,`tone`,y,c),e(`AppModal`,`placement`,w,l),e(`AppModal`,`size`,typeof C==`string`?C:null,[...Object.keys(d),`fullscreen`]);let{style:j,...M}=A;T&&!D&&typeof g!=`string`&&m();let N=i(null);r(()=>{if(!p)return;let e=N.current?.closest(`.modal-content`);if(!e)return;let t=()=>Array.from(e.querySelectorAll(u));(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)}},[p]);let P=C===`fullscreen`,F=typeof C==`number`?C:d[C]??d.md,I=[`wui-modal`,y==="default"?``:`tone-${y}`,O].filter(Boolean).join(` `);return s(a,{...M,show:p,onHide:x,backdrop:!E||`static`,keyboard:!E,autoFocus:!1,enforceFocus:!0,restoreFocus:!0,centered:w!==`top`,className:P?`wui-modal-shell ${f}`:`wui-modal-shell`,style:P?j:{"--wui-modal-max-width":`${F}px`,...j},dialogClassName:`wui-rb-dialog`,contentClassName:I,backdropClassName:`wui-modal-dim`,"aria-label":D||(typeof g==`string`?g:void 0),children:[!T&&s(`div`,{className:`wui-modal-header`,children:[s(`div`,{className:`wui-modal-heading`,children:[v&&o(`span`,{className:`wui-modal-headicon`,children:o(n,{name:v,size:18})}),s(`div`,{className:`wui-modal-headtext`,children:[h&&o(`div`,{className:`wui-modal-eyebrow`,children:h}),o(`div`,{className:`wui-modal-title`,children:g}),_&&o(`div`,{className:`wui-modal-subtitle`,children:_})]})]}),b&&o(`button`,{type:`button`,className:`wui-modal-close`,onClick:x,"aria-label":`Close`,children:o(`svg`,{width:`18`,height:`18`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:o(`path`,{d:`M18 6 6 18M6 6l12 12`})})})]}),o(`div`,{className:`wui-modal-body`,ref:N,children:k}),S&&o(`div`,{className:`wui-modal-footer`,children:S})]})}export{h 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({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};

package/dist/components/AppNumberInput.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{forwardRef as a,useEffect as o,useId as s,useState as c}from"react";import{Form as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`sm`,`md`,`lg`],p=a(function({label:a,required:p=!1,error:m,hint:h,help:g,helpLabel:_=`More information`,value:v,onChange:y,min:b,max:x,step:S=1,precision:C=0,unit:w,size:T=`md`,id:E,name:D,className:O=``,fieldClassName:k=``,disabled:A=!1,...j},M){t(`AppNumberInput`,j),e(`AppNumberInput`,`size`,T,f);let N=s(),P=E||N,F=e=>{if(C===0)return Math.round(e);let t=10**C;return Math.round(e*t)/t},I=e=>{let t=e;return typeof b==`number`&&(t=Math.max(t,b)),typeof x==`number`&&(t=Math.min(t,x)),t},L=e=>{if(e===``||e===null)return null;let t=parseFloat(e);return Number.isNaN(t)?null:t},[R,z]=c(v??``);o(()=>{z(v??``)},[v]);let B=e=>{let t=(L(R)??I(0))+e*S,n=I(F(t));z(String(n)),y?.(n)},V=L(R),H=A||V!==null&&typeof b==`number`&&V<=b,U=A||V!==null&&typeof x==`number`&&V>=x,W=m&&P?`${P}-error`:void 0,G=h&&P?`${P}-hint`:void 0,K=W||G,q=[`input`,T===`sm`?`input-sm`:``,T===`lg`?`input-lg`:``,m?`error`:``,`num-input`,O].filter(Boolean).join(` `),J=e=>{let t=e.target.value;z(t);let n=L(t);n!==null&&y?.(n)},Y=e=>{let t=L(e.target.value);if(t===null)z(``),y?.(``);else{let e=I(F(t));z(String(e)),y?.(e)}j.onBlur?.(e)},X=e=>{e.key===`ArrowUp`?(e.preventDefault(),B(1)):e.key===`ArrowDown`&&(e.preventDefault(),B(-1)),j.onKeyDown?.(e)},Z=u(l.Control,{...j,id:P,name:D,type:`text`,inputMode:C>0?`decimal`:`numeric`,className:q,disabled:A,required:p,"aria-invalid":m?`true`:`false`,"aria-describedby":K,value:R,ref:M,onChange:J,onBlur:Y,onKeyDown:X}),Q=d(`div`,{className:[`num-wrap`,T===`sm`?`num-wrap-sm`:``,T===`lg`?`num-wrap-lg`:``].filter(Boolean).join(` `),children:[u(`button`,{type:`button`,className:`num-btn`,"aria-label":`Decrease`,tabIndex:-1,disabled:H,onClick:()=>B(-1),children:u(n,{name:`minus`,size:16})}),Z,w&&u(`span`,{className:`affix`,children:w}),u(`button`,{type:`button`,className:`num-btn`,"aria-label":`Increase`,tabIndex:-1,disabled:U,onClick:()=>B(1),children:u(n,{name:`plus`,size:16})})]});return d(l.Group,{className:`field${k?` ${k}`:``}`,children:[a&&d(l.Label,{className:`label`,htmlFor:P,children:[a,p&&u(i,{}),g&&u(r,{label:_,children:g})]}),Q,m?u(`div`,{className:`field-error`,id:W,children:m}):h?u(`div`,{className:`field-hint`,id:G,children:h}):null]})});export{p as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{forwardRef as a,useEffect as o,useId as s,useState as c}from"react";import{Form as l}from"react-bootstrap";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`sm`,`md`,`lg`],p=a(function({label:a,required:p=!1,error:m,hint:h,help:g,helpLabel:_=`More information`,value:v,onChange:y,min:b,max:x,step:S=1,precision:C=0,unit:w,size:T=`md`,id:E,name:D,className:O=``,fieldClassName:k=``,disabled:A=!1,...j},M){t(`AppNumberInput`,j),e(`AppNumberInput`,`size`,T,f);let N=s(),P=E||N,F=e=>{if(C===0)return Math.round(e);let t=10**C;return Math.round(e*t)/t},I=e=>{let t=e;return typeof b==`number`&&(t=Math.max(t,b)),typeof x==`number`&&(t=Math.min(t,x)),t},L=e=>{if(e===``||e===null)return null;let t=parseFloat(e);return Number.isNaN(t)?null:t},[R,z]=c(v??``);o(()=>{z(v??``)},[v]);let B=e=>{let t=(L(R)??I(0))+e*S,n=I(F(t));z(String(n)),y?.(n)},V=L(R),H=A||V!==null&&typeof b==`number`&&V<=b,U=A||V!==null&&typeof x==`number`&&V>=x,W=m&&P?`${P}-error`:void 0,G=h&&P?`${P}-hint`:void 0,K=W||G,q=[`input`,T===`sm`?`input-sm`:``,T===`lg`?`input-lg`:``,m?`error`:``,`num-input`,O].filter(Boolean).join(` `),J=RegExp(`^${typeof b==`number`&&b>=0?``:`-?`}\\d*${C>0?`(\\.\\d*)?`:``}$`),Y=e=>{let t=e.target.value;if(!J.test(t))return;z(t);let n=L(t);n!==null&&y?.(n)},X=e=>{let t=L(e.target.value);if(t===null)z(``),y?.(``);else{let e=I(F(t));z(String(e)),y?.(e)}j.onBlur?.(e)},Z=e=>{e.key===`ArrowUp`?(e.preventDefault(),B(1)):e.key===`ArrowDown`&&(e.preventDefault(),B(-1)),j.onKeyDown?.(e)},Q=u(l.Control,{...j,id:P,name:D,type:`text`,inputMode:C>0?`decimal`:`numeric`,className:q,disabled:A,required:p,"aria-invalid":m?`true`:`false`,"aria-describedby":K,value:R,ref:M,onChange:Y,onBlur:X,onKeyDown:Z}),$=d(`div`,{className:[`num-wrap`,T===`sm`?`num-wrap-sm`:``,T===`lg`?`num-wrap-lg`:``].filter(Boolean).join(` `),children:[u(`button`,{type:`button`,className:`num-btn`,"aria-label":`Decrease`,tabIndex:-1,disabled:H,onClick:()=>B(-1),children:u(n,{name:`minus`,size:16})}),Q,w&&u(`span`,{className:`affix`,children:w}),u(`button`,{type:`button`,className:`num-btn`,"aria-label":`Increase`,tabIndex:-1,disabled:U,onClick:()=>B(1),children:u(n,{name:`plus`,size:16})})]});return d(l.Group,{className:`field${k?` ${k}`:``}`,children:[a&&d(l.Label,{className:`label`,htmlFor:P,children:[a,p&&u(i,{}),g&&u(r,{label:_,children:g})]}),$,m?u(`div`,{className:`field-error`,id:W,children:m}):h?u(`div`,{className:`field-hint`,id:G,children:h}):null]})});export{p as default};

package/dist/types/components/AppModal.d.ts

@@ -23,10 +23,12 @@
  *   (a node title, or a hideHeader dialog) — without one the dialog is unnamed to AT.
  * @param {boolean} [props.staticBackdrop=false] When true, the backdrop click and Escape
  *   key no longer close the dialog — only an explicit close action can.
+ * @param {string} [props.confirmDiscard] Ask before closing while dirty: this text, with Discard and Keep editing in the footer.
+ * @param {boolean} [props.dirty=false] True while a field differs from its loaded value; the caller owns it.
  * @param {string} [props.className] Extra classes on the modal card.
  * @param {import('react').ReactNode} props.children
  */
-export default function AppModal({ open, eyebrow, title, subtitle, headerIcon, tone, dismissible, onClose, footer, size, placement, hideHeader, staticBackdrop, ariaLabel, className, children, ...rest }: {
+export default function AppModal({ open, eyebrow, title, subtitle, headerIcon, tone, dismissible, onClose, footer, size, placement, hideHeader, staticBackdrop, confirmDiscard, dirty, ariaLabel, className, children, ...rest }: {
     open: boolean;
     eyebrow?: import('react').ReactNode;
     title?: import('react').ReactNode;
@@ -41,6 +43,8 @@ export default function AppModal({ open, eyebrow, title, subtitle, headerIcon, t
     hideHeader?: boolean;
     ariaLabel?: string;
     staticBackdrop?: boolean;
+    confirmDiscard?: string;
+    dirty?: boolean;
     className?: string;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.68.0",
+  "version": "0.68.1",
   "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/ui-elements": "0.68.0",
-    "@webority/theme": "0.68.0"
+    "@webority/theme": "0.68.1",
+    "@webority/ui-elements": "0.68.1"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",