@webority/ui-react 0.83.0 → 0.83.1

package/dist/components/AppFileAttachment.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"../lib/FieldMessage.js";import{keyOf as r,nameOf as i,sizeLabelOf as a,useItemUrl as o}from"../lib/fileItem.js";import s from"../lib/FileItemRow.js";import{DEFAULT_IMAGE_ACCEPT as c,DEFAULT_MAX_SIZE_MB as l,acceptLabel as u,isImageFile as d,isImageOnlyAccept as f,validateFile as p}from"@webority/ui-elements/helpers";import{useId as m,useState as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";function y({label:i=`Attachment`,value:a,name:o,onChange:u,multiple:y=!1,accept:S=c,maxSizeMb:C=l,optional:w=!1,validate:T=!0,error:E,id:D,...O}){e(`AppFileAttachment`,O);let k=m(),A=D||k,[j,M]=h(``),[N,P]=h(!1),F=y&&Array.isArray(a)?a:a?[a]:[],I=f(S),L=e=>e instanceof File?d(e):I||d(e),R=!y&&F.length===1&&L(F[0]),z=b(S,C);function B(e){if(!e.length)return;let t=[],n=``;for(let r of e){let e=T?p(r,{accept:S,maxSizeMb:C}):null;if(e){n||=e;continue}t.push(r)}if(M(n),t.length)if(y){let e=Array.isArray(a)?a:a?[a]:[],n=new Set(e.map(r));u(e.concat(t.filter(e=>!n.has(r(e)))))}else u(t[0])}function V(e){let t=Array.from(e.target.files||[]);e.target.value=``,B(t)}function H(e){M(``),u(y?F.filter((t,n)=>n!==e):null)}let U=E||j,W=U?`${A}-error`:void 0,G=y||F.length===0,K=I?`image`:`file`,q=y?`Add ${K}s`:`Add ${I?`an`:`a`} ${K}`;return v(`div`,{className:`field`,children:[v(`label`,{className:`label`,htmlFor:A,children:[i,w&&_(`span`,{className:`label-optional`,children:` (optional)`})]}),G&&v(g,{children:[v(`label`,{className:`attach-drop${N?` dragging`:``}`,htmlFor:A,onDragEnter:e=>{e.preventDefault(),O.disabled||P(!0)},onDragOver:e=>{e.preventDefault(),O.disabled||P(!0)},onDragLeave:e=>{e.preventDefault(),P(!1)},onDrop:e=>{e.preventDefault(),P(!1),!O.disabled&&B(Array.from(e.dataTransfer?.files||[]))},children:[_(`span`,{className:`attach-drop-icon`,children:_(t,{name:I?`image`:`file-text`,size:18})}),v(`span`,{className:`attach-drop-copy`,children:[_(`span`,{className:`attach-drop-title`,children:q}),z&&_(`span`,{className:`attach-drop-hint`,children:z})]}),_(`span`,{className:`attach-drop-cta`,children:`Browse`})]}),_(`input`,{id:A,type:`file`,className:`visually-hidden`,name:o,accept:S||void 0,multiple:y||void 0,"aria-describedby":W,onChange:V,...O})]}),R?_(x,{item:F[0],isImage:!0,onRemove:()=>H(0)}):F.length>0&&_(`div`,{className:`attach-list`,children:F.map((e,t)=>_(s,{item:e,isImage:L(e),onRemove:()=>H(t)},r(e)))}),_(n,{error:U,errorId:`${A}-error`})]})}function b(e,t){let n=e?.trim()?u(e):``,r=t>0?`up to ${t} MB`:``;return n&&r?`${n}, ${r}`:r?`Up to ${t} MB`:n}function x({item:e,isImage:n,onRemove:r}){let s=o(e,n),c=i(e),l=a(e);return v(`div`,{className:`attach-preview`,children:[v(`div`,{className:`attach-figure`,children:[_(`img`,{src:s,alt:c}),_(`button`,{type:`button`,className:`attach-remove`,"aria-label":`Remove attachment`,onClick:r,children:_(t,{name:`x`,size:18})})]}),v(`div`,{className:`attach-meta`,children:[_(`div`,{className:`attach-name`,children:c}),l&&_(`div`,{className:`attach-size`,children:l})]})]})}export{y as default};
+import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"../lib/FieldMessage.js";import r from"./AppProgress.js";import{keyOf as i,linkOf as a,nameOf as o,sizeLabelOf as s,uploadErrorOf as c,uploadProgressOf as l,useItemUrl as u}from"../lib/fileItem.js";import d from"../lib/FileItemRow.js";import{DEFAULT_IMAGE_ACCEPT as f,DEFAULT_MAX_SIZE_MB as p,acceptLabel as m,isImageFile as h,isImageOnlyAccept as g,validateFile as _}from"@webority/ui-elements/helpers";import{useId as v,useState as y}from"react";import{Fragment as b,jsx as x,jsxs as S}from"react/jsx-runtime";function C({label:r=`Attachment`,value:o,name:s,onChange:c,multiple:l=!1,accept:u=f,maxSizeMb:m=p,optional:C=!1,validate:E=!0,error:D,id:O,...k}){e(`AppFileAttachment`,k);let A=v(),j=O||A,[M,N]=y(``),[P,F]=y(!1),I=l&&Array.isArray(o)?o:o?[o]:[],L=g(u),R=e=>e instanceof File?h(e):L||h(e),z=!l&&I.length===1&&R(I[0])&&(I[0]instanceof File||a(I[0])!==null),B=w(u,m);function V(e){if(!e.length)return;let t=[],n=``;for(let r of e){let e=E?_(r,{accept:u,maxSizeMb:m}):null;if(e){n||=e;continue}t.push(r)}if(N(n),t.length)if(l){let e=Array.isArray(o)?o:o?[o]:[],n=new Set(e.map(i));c(e.concat(t.filter(e=>!n.has(i(e)))))}else c(t[0])}function H(e){let t=Array.from(e.target.files||[]);e.target.value=``,V(t)}function U(e){N(``),c(l?I.filter((t,n)=>n!==e):null)}let W=D||M,G=W?`${j}-error`:void 0,K=l||I.length===0,q=L?`image`:`file`,J=l?`Add ${q}s`:`Add ${L?`an`:`a`} ${q}`;return S(`div`,{className:`field`,children:[S(`label`,{className:`label`,htmlFor:j,children:[r,C&&x(`span`,{className:`label-optional`,children:` (optional)`})]}),K&&S(b,{children:[S(`label`,{className:`attach-drop${P?` dragging`:``}`,htmlFor:j,onDragEnter:e=>{e.preventDefault(),k.disabled||F(!0)},onDragOver:e=>{e.preventDefault(),k.disabled||F(!0)},onDragLeave:e=>{e.preventDefault(),F(!1)},onDrop:e=>{e.preventDefault(),F(!1),!k.disabled&&V(Array.from(e.dataTransfer?.files||[]))},children:[x(`span`,{className:`attach-drop-icon`,children:x(t,{name:L?`image`:`file-text`,size:18})}),S(`span`,{className:`attach-drop-copy`,children:[x(`span`,{className:`attach-drop-title`,children:J}),B&&x(`span`,{className:`attach-drop-hint`,children:B})]}),x(`span`,{className:`attach-drop-cta`,children:`Browse`})]}),x(`input`,{id:j,type:`file`,className:`visually-hidden`,name:s,accept:u||void 0,multiple:l||void 0,"aria-describedby":G,onChange:H,...k})]}),z?x(T,{item:I[0],isImage:!0,onRemove:()=>U(0)}):I.length>0&&x(`div`,{className:`attach-list`,children:I.map((e,t)=>x(d,{item:e,isImage:R(e),onRemove:()=>U(t)},i(e)))}),x(n,{error:W,errorId:`${j}-error`})]})}function w(e,t){let n=e?.trim()?m(e):``,r=t>0?`up to ${t} MB`:``;return n&&r?`${n}, ${r}`:r?`Up to ${t} MB`:n}function T({item:e,isImage:n,onRemove:i}){let d=u(e,n),f=o(e),p=s(e),m=l(e),h=c(e),g=a(e);return S(`div`,{className:h?`attach-preview wui-attach-failed`:`attach-preview`,children:[S(`div`,{className:`attach-figure`,children:[x(`img`,{src:d,alt:f}),x(`button`,{type:`button`,className:`attach-remove`,"aria-label":`Remove attachment`,onClick:i,children:x(t,{name:`x`,size:18})})]}),S(`div`,{className:`attach-meta`,children:[x(`div`,{className:`attach-name`,children:g?x(`a`,{href:g,children:f}):f}),p&&x(`div`,{className:`attach-size`,children:p})]}),m!==null&&x(r,{value:m,size:`sm`,label:`Uploading ${f}`,className:`wui-attach-progress`}),h&&x(`div`,{className:`wui-attach-error`,children:h})]})}export{C as default};

package/dist/lib/FileItemRow.js

@@ -1 +1 @@
-import e from"../components/AppIcon.js";import t from"../components/AppProgress.js";import{nameOf as n,sizeLabelOf as r,useItemUrl as i}from"./fileItem.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({item:s,isImage:c,onRemove:l,noun:u=`attachment`}){let d=i(s,c),f=n(s),p=r(s),m=s?.progress,h=typeof m==`number`&&m>=0&&m<=99,g=typeof s?.error==`string`&&s.error.length>0,_=typeof s?.url==`string`&&s.url.length>0?s.url:null;return o(`div`,{className:g?`attach-item wui-attach-failed`:`attach-item`,children:[a(`span`,{className:`attach-item-media`,children:d?a(`img`,{src:d,alt:f}):a(e,{name:`file-text`,size:18})}),o(`span`,{className:`attach-item-info`,children:[a(`span`,{className:`attach-name`,children:_?a(`a`,{href:_,children:f}):f}),p&&a(`span`,{className:`attach-size`,children:p}),h&&a(t,{value:m,size:`sm`,label:`Uploading ${f}`,className:`wui-attach-progress`}),g&&a(`div`,{className:`wui-attach-error`,children:s?.error})]}),a(`button`,{type:`button`,className:`attach-item-remove`,"aria-label":`Remove ${f||u}`,onClick:l,children:a(e,{name:`x`,size:16})})]})}export{s as default};
+import e from"../components/AppIcon.js";import t from"../components/AppProgress.js";import{linkOf as n,nameOf as r,sizeLabelOf as i,uploadErrorOf as a,uploadProgressOf as o,useItemUrl as s}from"./fileItem.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({item:u,isImage:d,onRemove:f,noun:p=`attachment`}){let m=s(u,d),h=r(u),g=i(u),_=o(u),v=a(u),y=n(u);return l(`div`,{className:v?`attach-item wui-attach-failed`:`attach-item`,children:[c(`span`,{className:`attach-item-media`,children:m?c(`img`,{src:m,alt:h}):c(e,{name:`file-text`,size:18})}),l(`span`,{className:`attach-item-info`,children:[c(`span`,{className:`attach-name`,children:y?c(`a`,{href:y,children:h}):h}),g&&c(`span`,{className:`attach-size`,children:g}),_!==null&&c(t,{value:_,size:`sm`,label:`Uploading ${h}`,className:`wui-attach-progress`}),v&&c(`div`,{className:`wui-attach-error`,children:v})]}),c(`button`,{type:`button`,className:`attach-item-remove`,"aria-label":`Remove ${h||p}`,onClick:f,children:c(e,{name:`x`,size:16})})]})}export{u 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}var i=[`KB`,`MB`,`GB`];function a(e){if(e<1024)return`${e} B`;let t=e/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(e){if(e instanceof File)return a(e.size);let t=e?.sizeBytes;return Number.isFinite(t)&&t>=0?a(t):null}function s(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,o as sizeLabelOf,s as useItemUrl};
+import{formatFileSize as e}from"@webority/ui-elements/helpers";import{useEffect as t,useState as n}from"react";function r(e){return e instanceof File?`${e.name}:${e.size}`:e?.url||e?.name||`item`}function i(e){return e instanceof File?e.name:e?.name}function a(t){if(t instanceof File)return e(t.size);let n=t?.sizeBytes;return Number.isFinite(n)&&n>=0?e(n):null}function o(e){return typeof e?.url==`string`&&e.url.length>0?e.url:null}function s(e){let t=e?.progress;return typeof t==`number`&&t>=0&&t<=99?t:null}function c(e){return typeof e?.error==`string`&&e.error.length>0?e.error:null}function l(e,r){let[i,a]=n(null);return t(()=>{if(!r){a(null);return}if(e instanceof File){let t=URL.createObjectURL(e);return a(t),()=>URL.revokeObjectURL(t)}a(e?.url||null)},[e,r]),i}export{r as keyOf,o as linkOf,i as nameOf,a as sizeLabelOf,c as uploadErrorOf,s as uploadProgressOf,l as useItemUrl};

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

@@ -11,6 +11,12 @@ export declare function nameOf(item: any): any;
  * `sizeBytes` of 0 or more. Null when the size is unknown.
  */
 export declare function sizeLabelOf(item: any): string;
+/** The link a stored file opens; a freshly picked File has none. */
+export declare function linkOf(item: any): any;
+/** Upload progress while it is under 100, else null: a finished upload draws no bar. */
+export declare function uploadProgressOf(item: any): number;
+/** Why the upload failed, or null. */
+export declare function uploadErrorOf(item: any): any;
 /**
  * A freshly-picked File has no URL of its own; mint one (for images) and revoke it on
  * change/unmount. An existing attachment already carries `url`. Non-images get no URL — the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.83.0",
+  "version": "0.83.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.83.0",
-    "@webority/theme": "0.83.0"
+    "@webority/theme": "0.83.1",
+    "@webority/ui-elements": "0.83.1"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",