@webority/ui-react 0.61.0 → 0.61.2

package/dist/components/AppDropZone.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import{DEFAULT_MAX_SIZE_MB as n,acceptLabel as r,validateFile as i}from"@webority/ui-elements/helpers";import{useId as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({label:l,id:u,onChange:d,multiple:f=!1,accept:p=``,maxSizeMb:m=n,error:h,hint:g,disabled:_=!1,className:v=``,fieldClassName:y=``,style:b,...x}){e(`AppDropZone`,x);let[S,C]=o(!1),[w,T]=o(``),E=a(),D=u||E,O=h||w,k=O?`${D}-error`:void 0,A=g&&!O?`${D}-hint`:void 0,j=k||A,M=p?r(p):`Any file type`,N=e=>{let t=Array.from(e||[]);if(!t.length)return;if(!f){let e=i(t[0],{accept:p,maxSizeMb:m});T(e||``),e||d(t[0]);return}let n=``,r=[];for(let e of t){let t=i(e,{accept:p,maxSizeMb:m});if(t){n||=t;continue}r.push(e)}T(n),r.length&&d(r)};return c(`div`,{className:`field${y?` ${y}`:``}`,children:[l?s(`label`,{className:`label`,htmlFor:D,children:l}):null,c(`div`,{className:`file-input file-input-tall${S?` dragging`:``}${O?` error`:``}${v?` ${v}`:``}`,style:b,"aria-disabled":_||void 0,onDragOver:e=>{e.preventDefault(),!_&&!S&&C(!0)},onDragLeave:e=>{e.preventDefault(),C(!1)},onDrop:e=>{e.preventDefault(),C(!1),_||N(e.dataTransfer.files)},children:[c(`label`,{htmlFor:D,className:`file-input-zone-label`,children:[s(`span`,{className:`file-input-icon`,children:s(t,{name:`upload`,size:24})}),c(`span`,{className:`file-input-title`,children:[s(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),s(`span`,{className:`file-input-text`,children:m>0?`${M} · up to ${m} MB`:M})]}),s(`input`,{id:D,type:`file`,"aria-describedby":j,accept:p,multiple:f||void 0,disabled:_||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:e=>N(e.target.files),...x})]}),O?s(`div`,{className:`field-error`,id:k,children:O}):g?s(`div`,{className:`field-hint`,id:A,children:g}):null]})}export{l as default};
+import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import{DEFAULT_MAX_SIZE_MB as n,acceptLabel as r,validateFile as i}from"@webority/ui-elements/helpers";import{useId as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({label:l,id:u,onChange:d,multiple:f=!1,accept:p=``,maxSizeMb:m=n,error:h,hint:g,disabled:_=!1,className:v=``,fieldClassName:y=``,style:b,...x}){e(`AppDropZone`,x);let[S,C]=o(!1),[w,T]=o(``),E=a(),D=u||E,O=h||w,k=O?`${D}-error`:void 0,A=g&&!O?`${D}-hint`:void 0,j=k||A,M=p?r(p):`Any file type`,N=e=>{let t=Array.from(e||[]);if(!t.length)return;if(!f){let e=i(t[0],{accept:p,maxSizeMb:m});T(e||``),e||d(t[0]);return}let n=``,r=[];for(let e of t){let t=i(e,{accept:p,maxSizeMb:m});if(t){n||=t;continue}r.push(e)}T(n),r.length&&d(r)};return c(`div`,{className:`field${y?` ${y}`:``}`,children:[l?s(`label`,{className:`label`,htmlFor:D,children:l}):null,c(`div`,{className:`file-input file-input-tall${S?` dragging`:``}${O?` error`:``}${v?` ${v}`:``}`,style:b,"aria-disabled":_||void 0,onDragOver:e=>{e.preventDefault(),!_&&!S&&C(!0)},onDragLeave:e=>{e.preventDefault(),C(!1)},onDrop:e=>{e.preventDefault(),C(!1),_||N(e.dataTransfer.files)},children:[c(`label`,{htmlFor:D,className:`file-input-zone-label`,children:[s(`span`,{className:`file-input-icon`,children:s(t,{name:`upload`,size:24})}),c(`span`,{className:`file-input-title`,children:[s(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),s(`span`,{className:`file-input-text`,children:m>0?`${M}, up to ${m} MB`:M})]}),s(`input`,{id:D,type:`file`,"aria-describedby":j,accept:p,multiple:f||void 0,disabled:_||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:e=>N(e.target.files),...x})]}),O?s(`div`,{className:`field-error`,id:k,children:O}):g?s(`div`,{className:`field-hint`,id:A,children:g}):null]})}export{l as default};

package/dist/components/AppFilePicker.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import t from"./withTooltip.js";import n from"./AppIcon.js";import r from"./AppRequiredMark.js";import{keyOf as i}from"../lib/fileItem.js";import a from"../lib/FileItemRow.js";import{DEFAULT_MAX_SIZE_MB as o,acceptLabel as s,isImageFile as c,isImageOnlyAccept as ee,isPdfFile as l,validateFile as u}from"@webority/ui-elements/helpers";import{useEffect as d,useId as te,useRef as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";function g({label:g,value:_,name:ne,id:re,onPick:v,multiple:y=!1,maxFiles:b,accept:x=`.jpg,.jpeg,.png`,maxSizeMb:S=o,required:ie,error:ae,hint:C,loading:w=!1,className:T=``,fieldClassName:E=``,style:D,...O}){e(`AppFilePicker`,O);let[oe,k]=p(null),[se,A]=p(null),[j,M]=p(!1),[N,P]=p(``),F=f(null),ce=te(),I=re||ce;d(()=>{if(!y&&_ instanceof File&&c(_)){let e=URL.createObjectURL(_);return k(e),()=>URL.revokeObjectURL(e)}k(null)},[_,y]);let L=!y&&_&&!c(_)&&l(_)?_ instanceof File?_:_.url:null;d(()=>{if(!L){A(null);return}let e=!0,t=null;return import(`@webority/ui-elements/file-viewer`).then(e=>e.renderPdfFirstPage(typeof L==`string`?{url:L}:L)).then(n=>{e&&(t=URL.createObjectURL(n),A(t))}).catch(e=>console.warn(`[AppFilePicker] the PDF preview failed:`,e?.message)),()=>{e=!1,A(null),t&&URL.revokeObjectURL(t)}},[L]);let R=y?Array.isArray(_)?_:_?[_]:[]:[],z=ae||N,B=z?`${I}-error`:void 0,V=C&&!z?`${I}-hint`:void 0,H=B||V,U=ee(x),W=!y&&!!_,G=W&&(_ instanceof File?c(_):U||c(_)),le=_?.name,K=G?_?.url||oe:se,q=G?`image`:`file`,ue=g?`Change ${g}`:`Change ${q}`,J=g?`Remove ${g}`:`Remove ${q}`,Y=g?`${g} preview`:`Selected ${q} preview`,X=e=>{let t=u(e,{accept:x,maxSizeMb:S});return t?(P(t),!1):(P(``),v(e),!0)},Z=e=>{let t=Array.from(e||[]);if(!t.length)return;let n=Array.isArray(_)?_:_?[_]:[],r=new Set(n.map(i)),a=``,o=[];for(let e of t){let t=u(e,{accept:x,maxSizeMb:S});if(t){a||=t;continue}r.has(i(e))||(r.add(i(e)),o.push(e))}let s=n.concat(o);b&&s.length>b&&(s=s.slice(0,b),a||=`Up to ${b} files.`),P(a),v(s)},de=e=>{if(y){Z(e.target.files);return}let t=e.target.files?.[0]||null;t&&(X(t)||(e.target.value=``))},fe=e=>{if(e.preventDefault(),M(!1),w)return;if(y){Z(e.dataTransfer.files);return}let t=e.dataTransfer.files?.[0];t&&X(t)},pe=e=>{P(``),v(R.filter((t,n)=>n!==e))},me=()=>F.current?.click(),Q=w?m(`span`,{className:`wui-file-busy`,children:m(`span`,{className:`spinner-border spinner-border-sm`,role:`status`,"aria-label":`Loading`})}):null,$=m(`input`,{id:I,name:ne,ref:F,type:`file`,"aria-describedby":H,accept:x,multiple:y||void 0,disabled:w||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:de,...O});return h(`div`,{className:`field${E?` ${E}`:``}`,children:[h(`label`,{className:`label`,htmlFor:I,children:[g,ie&&m(r,{})]}),W?h(`div`,{className:`file-preview${z?` error`:``}${T?` ${T}`:``}`,style:D,"aria-busy":w||void 0,children:[h(`button`,{type:`button`,className:`file-preview-open`,"aria-label":ue,onClick:me,disabled:w,children:[K?m(`img`,{src:K,alt:Y,className:`file-preview-img`}):h(`span`,{className:`file-preview-file`,children:[m(n,{name:`file-text`,size:28}),m(`span`,{className:`file-preview-file-name`,children:le})]}),m(`span`,{className:`file-preview-overlay`,children:h(`span`,{className:`file-preview-cta`,children:[m(n,{name:G?`image`:`file-text`,size:16}),` `,G?`Change image`:`Change file`]})})]}),t(m(`button`,{type:`button`,className:`file-preview-remove`,"aria-label":J,onClick:()=>v(null),disabled:w,children:m(n,{name:`x`,size:16})}),J),$,Q]}):h(`div`,{className:`file-input file-input-tall${j?` dragging`:``}${z?` error`:``}${y&&R.length>0?` has-files`:``}${T?` ${T}`:``}`,style:D,"aria-busy":w||void 0,onDragOver:e=>{e.preventDefault(),!w&&!j&&M(!0)},onDragLeave:e=>{e.preventDefault(),M(!1)},onDrop:fe,children:[h(`label`,{htmlFor:I,className:`file-input-zone-label`,children:[m(`span`,{className:`file-input-icon`,children:m(n,{name:`upload`,size:24})}),h(`span`,{className:`file-input-title`,children:[m(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),m(`span`,{className:`file-input-text`,children:S>0?`${s(x)} · up to ${S} MB`:s(x)})]}),$,Q,y&&R.length>0&&m(`div`,{className:`attach-list`,children:R.map((e,t)=>m(a,{item:e,isImage:e instanceof File?c(e):U||c(e),noun:`file`,onRemove:()=>pe(t)},i(e)))})]}),z?m(`div`,{className:`field-error`,id:B,children:z}):C?m(`div`,{className:`field-hint`,id:V,children:C}):null]})}export{g as default};
+import e from"./warnUnknownProps.js";import t from"./withTooltip.js";import n from"./AppIcon.js";import r from"./AppRequiredMark.js";import{keyOf as i}from"../lib/fileItem.js";import a from"../lib/FileItemRow.js";import{DEFAULT_MAX_SIZE_MB as o,acceptLabel as s,isImageFile as c,isImageOnlyAccept as ee,isPdfFile as l,validateFile as u}from"@webority/ui-elements/helpers";import{useEffect as d,useId as te,useRef as f,useState as p}from"react";import{jsx as m,jsxs as h}from"react/jsx-runtime";function g({label:g,value:_,name:ne,id:re,onPick:v,multiple:y=!1,maxFiles:b,accept:x=`.jpg,.jpeg,.png`,maxSizeMb:S=o,required:ie,error:ae,hint:C,loading:w=!1,className:T=``,fieldClassName:E=``,style:D,...O}){e(`AppFilePicker`,O);let[oe,k]=p(null),[se,A]=p(null),[j,M]=p(!1),[N,P]=p(``),F=f(null),ce=te(),I=re||ce;d(()=>{if(!y&&_ instanceof File&&c(_)){let e=URL.createObjectURL(_);return k(e),()=>URL.revokeObjectURL(e)}k(null)},[_,y]);let L=!y&&_&&!c(_)&&l(_)?_ instanceof File?_:_.url:null;d(()=>{if(!L){A(null);return}let e=!0,t=null;return import(`@webority/ui-elements/file-viewer`).then(e=>e.renderPdfFirstPage(typeof L==`string`?{url:L}:L)).then(n=>{e&&(t=URL.createObjectURL(n),A(t))}).catch(e=>console.warn(`[AppFilePicker] the PDF preview failed:`,e?.message)),()=>{e=!1,A(null),t&&URL.revokeObjectURL(t)}},[L]);let R=y?Array.isArray(_)?_:_?[_]:[]:[],z=ae||N,B=z?`${I}-error`:void 0,V=C&&!z?`${I}-hint`:void 0,H=B||V,U=ee(x),W=!y&&!!_,G=W&&(_ instanceof File?c(_):U||c(_)),le=_?.name,K=G?_?.url||oe:se,q=G?`image`:`file`,ue=g?`Change ${g}`:`Change ${q}`,J=g?`Remove ${g}`:`Remove ${q}`,Y=g?`${g} preview`:`Selected ${q} preview`,X=e=>{let t=u(e,{accept:x,maxSizeMb:S});return t?(P(t),!1):(P(``),v(e),!0)},Z=e=>{let t=Array.from(e||[]);if(!t.length)return;let n=Array.isArray(_)?_:_?[_]:[],r=new Set(n.map(i)),a=``,o=[];for(let e of t){let t=u(e,{accept:x,maxSizeMb:S});if(t){a||=t;continue}r.has(i(e))||(r.add(i(e)),o.push(e))}let s=n.concat(o);b&&s.length>b&&(s=s.slice(0,b),a||=`Up to ${b} files.`),P(a),v(s)},de=e=>{if(y){Z(e.target.files);return}let t=e.target.files?.[0]||null;t&&(X(t)||(e.target.value=``))},fe=e=>{if(e.preventDefault(),M(!1),w)return;if(y){Z(e.dataTransfer.files);return}let t=e.dataTransfer.files?.[0];t&&X(t)},pe=e=>{P(``),v(R.filter((t,n)=>n!==e))},me=()=>F.current?.click(),Q=w?m(`span`,{className:`wui-file-busy`,children:m(`span`,{className:`spinner-border spinner-border-sm`,role:`status`,"aria-label":`Loading`})}):null,$=m(`input`,{id:I,name:ne,ref:F,type:`file`,"aria-describedby":H,accept:x,multiple:y||void 0,disabled:w||void 0,className:`visually-hidden`,onClick:e=>{e.currentTarget.value=``},onChange:de,...O});return h(`div`,{className:`field${E?` ${E}`:``}`,children:[h(`label`,{className:`label`,htmlFor:I,children:[g,ie&&m(r,{})]}),W?h(`div`,{className:`file-preview${z?` error`:``}${T?` ${T}`:``}`,style:D,"aria-busy":w||void 0,children:[h(`button`,{type:`button`,className:`file-preview-open`,"aria-label":ue,onClick:me,disabled:w,children:[K?m(`img`,{src:K,alt:Y,className:`file-preview-img`}):h(`span`,{className:`file-preview-file`,children:[m(n,{name:`file-text`,size:28}),m(`span`,{className:`file-preview-file-name`,children:le})]}),m(`span`,{className:`file-preview-overlay`,children:h(`span`,{className:`file-preview-cta`,children:[m(n,{name:G?`image`:`file-text`,size:16}),` `,G?`Change image`:`Change file`]})})]}),t(m(`button`,{type:`button`,className:`file-preview-remove`,"aria-label":J,onClick:()=>v(null),disabled:w,children:m(n,{name:`x`,size:16})}),J),$,Q]}):h(`div`,{className:`file-input file-input-tall${j?` dragging`:``}${z?` error`:``}${y&&R.length>0?` has-files`:``}${T?` ${T}`:``}`,style:D,"aria-busy":w||void 0,onDragOver:e=>{e.preventDefault(),!w&&!j&&M(!0)},onDragLeave:e=>{e.preventDefault(),M(!1)},onDrop:fe,children:[h(`label`,{htmlFor:I,className:`file-input-zone-label`,children:[m(`span`,{className:`file-input-icon`,children:m(n,{name:`upload`,size:24})}),h(`span`,{className:`file-input-title`,children:[m(`span`,{className:`browse`,children:`Click to upload`}),` or drag & drop`]}),m(`span`,{className:`file-input-text`,children:S>0?`${s(x)}, up to ${S} MB`:s(x)})]}),$,Q,y&&R.length>0&&m(`div`,{className:`attach-list`,children:R.map((e,t)=>m(a,{item:e,isImage:e instanceof File?c(e):U||c(e),noun:`file`,onRemove:()=>pe(t)},i(e)))})]}),z?m(`div`,{className:`field-error`,id:B,children:z}):C?m(`div`,{className:`field-hint`,id:V,children:C}):null]})}export{g as default};

package/dist/lib/fileItem.js

@@ -1 +1 @@
-import{useEffect as e,useState as t}from"react";function n(e){return e instanceof File?`${e.name}:${e.size}`:e?.url||e?.name||`item`}function r(e){return e instanceof File?e.name:e?.name}function i(e){return e instanceof File?`${(e.size/1024).toFixed(0)} KB`:null}function a(n,r){let[i,a]=t(null);return e(()=>{if(!r){a(null);return}if(n instanceof File){let e=URL.createObjectURL(n);return a(e),()=>URL.revokeObjectURL(e)}a(n?.url||null)},[n,r]),i}export{n as keyOf,r as nameOf,i as sizeLabelOf,a as useItemUrl};
+import{useEffect as e,useState as t}from"react";function n(e){return e instanceof File?`${e.name}:${e.size}`:e?.url||e?.name||`item`}function r(e){return e instanceof File?e.name:e?.name}var i=[`KB`,`MB`,`GB`];function a(e){if(!(e instanceof File))return null;if(e.size<1024)return`${e.size} B`;let t=e.size/1024,n=0;for(;t>=1024&&n<i.length-1;)t/=1024,n+=1;return`${new Intl.NumberFormat(void 0,{minimumFractionDigits:1,maximumFractionDigits:1}).format(t)} ${i[n]}`}function o(n,r){let[i,a]=t(null);return e(()=>{if(!r){a(null);return}if(n instanceof File){let e=URL.createObjectURL(n);return a(e),()=>URL.revokeObjectURL(e)}a(n?.url||null)},[n,r]),i}export{n as keyOf,r as nameOf,a as sizeLabelOf,o as useItemUrl};

package/dist/types/lib/fileItem.d.ts

@@ -6,7 +6,10 @@
 /** Stable-ish key for an item: name+size for a File, url/name for an existing value. */
 export declare function keyOf(item: any): any;
 export declare function nameOf(item: any): any;
-/** `123 KB` for a freshly-picked File; null for an existing attachment (size unknown). */
+/**
+ * `193 B`, `2.0 KB`, `1.5 MB` for a freshly-picked File; null for an existing attachment (size
+ * unknown). Whole bytes below 1 KB, so a small file never reads "0 KB".
+ */
 export declare function sizeLabelOf(item: any): string;
 /**
  * A freshly-picked File has no URL of its own; mint one (for images) and revoke it on

package/package.json

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