@webority/ui-react 0.52.1 → 0.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"./renderIconProp.js";import r from"./AppSpinner.js";import i from"./AppModal.js";import{matchSegments as a}from"@webority/ui-elements/helpers";import{Fragment as o,useEffect as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/command-palette";var p=`lg`;function m({open:t,onClose:n,query:r=``,onQueryChange:a,placeholder:o=`Search…`,groups:s=[],loading:l=!1,emptyText:u=`No results`,footer:f,ariaLabel:m=`Search`,highlight:g=!0,id:_,className:v=``,...y}){e(`AppCommandPalette`,y);let b=c(),x=_||b;return d(i,{open:t,onClose:n,hideHeader:!0,placement:`top`,size:p,ariaLabel:m,className:`wui-cmd-card${v?` ${v}`:``}`,children:d(h,{baseId:x,query:r,onQueryChange:a,placeholder:o,groups:s,loading:l,emptyText:u,footer:f,ariaLabel:m,highlight:g,onClose:n,rest:y})})}function h({baseId:e,query:i,onQueryChange:a,placeholder:o,groups:c,loading:p,emptyText:m,footer:h,ariaLabel:v,highlight:y,onClose:b,rest:x}){let S=u(null),C=`${e}-list`,w=c.filter(e=>e.items?.length),T=!p&&i.trim()!==``&&w.length===0;return l(()=>{S.current?.refresh?.()}),s(()=>{let e=S.current,t=e=>{let t=c.find(t=>String(t.key)===e.detail.groupKey)?.items?.find(t=>String(t.key)===e.detail.key);t&&(e.preventDefault(),t.onSelect?.(),b?.())};return e.addEventListener(`wui-command-palette:select`,t),()=>e.removeEventListener(`wui-command-palette:select`,t)},[c,b]),f(`wui-command-palette`,{ref:S,...x,children:[f(`div`,{className:`wui-cmd-search`,children:[d(`span`,{className:`wui-cmd-search-icon`,"aria-hidden":`true`,children:d(t,{name:`search`,size:18})}),d(`input`,{className:`wui-cmd-input`,type:`text`,role:`combobox`,"aria-expanded":`true`,"aria-controls":C,"aria-autocomplete":`list`,"aria-label":v,placeholder:o,autoComplete:`off`,spellCheck:!1,"data-autofocus":``,value:i,onChange:e=>a?.(e.target.value)}),p&&d(r,{size:`sm`,className:`wui-cmd-spinner`})]}),d(`div`,{className:`wui-cmd-list`,role:`listbox`,id:C,"aria-label":`Results`,"aria-busy":p?`true`:void 0,hidden:w.length===0,children:w.map(t=>{let r=`${e}-${_(t.key)}`;return f(`div`,{className:`wui-cmd-group`,role:`group`,"aria-labelledby":r,children:[d(`div`,{className:`wui-cmd-group-label`,role:`presentation`,id:r,children:t.label}),t.items.map(e=>f(`div`,{className:`wui-cmd-item`,role:`option`,id
|
|
1
|
+
import e from"./warnUnknownProps.js";import t from"./AppIcon.js";import n from"./renderIconProp.js";import r from"./AppSpinner.js";import i from"./AppModal.js";import{matchSegments as a}from"@webority/ui-elements/helpers";import{Fragment as o,useEffect as s,useId as c,useLayoutEffect as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/command-palette";var p=`lg`;function m({open:t,onClose:n,query:r=``,onQueryChange:a,placeholder:o=`Search…`,groups:s=[],loading:l=!1,emptyText:u=`No results`,footer:f,ariaLabel:m=`Search`,highlight:g=!0,id:_,className:v=``,...y}){e(`AppCommandPalette`,y);let b=c(),x=_||b;return d(i,{open:t,onClose:n,hideHeader:!0,placement:`top`,size:p,ariaLabel:m,className:`wui-cmd-card${v?` ${v}`:``}`,children:d(h,{baseId:x,query:r,onQueryChange:a,placeholder:o,groups:s,loading:l,emptyText:u,footer:f,ariaLabel:m,highlight:g,onClose:n,rest:y})})}function h({baseId:e,query:i,onQueryChange:a,placeholder:o,groups:c,loading:p,emptyText:m,footer:h,ariaLabel:v,highlight:y,onClose:b,rest:x}){let S=u(null),C=`${e}-list`,w=c.filter(e=>e.items?.length),T=!p&&i.trim()!==``&&w.length===0;return l(()=>{S.current?.refresh?.()}),s(()=>{let e=S.current,t=e=>{let t=c.find(t=>String(t.key)===e.detail.groupKey)?.items?.find(t=>String(t.key)===e.detail.key);t&&(e.preventDefault(),t.onSelect?.(),b?.())};return e.addEventListener(`wui-command-palette:select`,t),()=>e.removeEventListener(`wui-command-palette:select`,t)},[c,b]),f(`wui-command-palette`,{ref:S,...x,children:[f(`div`,{className:`wui-cmd-search`,children:[d(`span`,{className:`wui-cmd-search-icon`,"aria-hidden":`true`,children:d(t,{name:`search`,size:18})}),d(`input`,{className:`wui-cmd-input`,type:`text`,role:`combobox`,"aria-expanded":`true`,"aria-controls":C,"aria-autocomplete":`list`,"aria-label":v,placeholder:o,autoComplete:`off`,spellCheck:!1,"data-autofocus":``,value:i,onChange:e=>a?.(e.target.value)}),p&&d(r,{size:`sm`,className:`wui-cmd-spinner`})]}),d(`div`,{className:`wui-cmd-list`,role:`listbox`,id:C,"aria-label":`Results`,"aria-busy":p?`true`:void 0,hidden:w.length===0,children:w.map(t=>{let r=`${e}-${_(t.key)}`;return f(`div`,{className:`wui-cmd-group`,role:`group`,"aria-labelledby":r,children:[d(`div`,{className:`wui-cmd-group-label`,role:`presentation`,id:r,children:t.label}),t.items.map(e=>{let a=`${r}-${_(e.key)}`,o=e.description==null?null:`${a}-desc`,s=e.meta==null?null:`${a}-meta`;return f(`div`,{className:`wui-cmd-item`,role:`option`,id:a,"data-group-key":String(t.key),"data-key":String(e.key),"aria-label":e.ariaLabel||(typeof e.label==`string`?e.label:``)||void 0,"aria-describedby":[o,s].filter(Boolean).join(` `)||void 0,"aria-disabled":e.disabled?`true`:void 0,children:[e.icon!=null&&d(`span`,{className:`wui-cmd-item-icon`,"aria-hidden":`true`,children:n(e.icon,{size:18})}),f(`span`,{className:`wui-cmd-item-text`,children:[d(`span`,{className:`wui-cmd-item-label`,children:y?g(e.label,i):e.label}),o&&d(`span`,{className:`wui-cmd-item-desc`,id:o,children:e.description})]}),s&&d(`span`,{className:`wui-cmd-item-meta`,id:s,children:e.meta})]},e.key)})]},t.key)})}),d(`div`,{className:`wui-cmd-empty`,role:`status`,children:T?m:null}),h!=null&&d(`div`,{className:`wui-cmd-footer`,children:h})]})}function g(e,t){if(typeof e!=`string`)return e;let n=a(e,t);if(n.length===1&&!n[0].match)return e;let r=0;return n.map(e=>{let t=r;return r+=e.text.length,e.match?d(`mark`,{className:`wui-cmd-mark`,children:e.text},t):d(o,{children:e.text},t)})}function _(e){return String(e).replace(/\s+/g,`_`)}export{m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./withTooltip.js";import r from"./AppIcon.js";import i from"./AppAlert.js";import
|
|
1
|
+
import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./withTooltip.js";import r from"./AppIcon.js";import i from"./AppAlert.js";import a from"./AppButton.js";import ee from"./AppRequiredMark.js";import te from"./AppModal.js";import{DEFAULT_MAX_SIZE_MB as ne,validateFile as o}from"@webority/ui-elements/helpers";import{useCallback as re,useEffect as s,useId as ie,useRef as c,useState as l}from"react";import{Fragment as ae,jsx as u,jsxs as d}from"react/jsx-runtime";import"@webority/ui-elements/elements/image-crop";var oe=[`stacked`,`inline`,`profile`],se=[`initials`,`avatar`],ce=[`circle`,`rounded`,`square`],f={sm:72,md:120,lg:160},le=`That image could not be cropped. Choose another one.`,ue=`That image could not be opened. Choose another one.`;function p({value:p,fallback:de,name:fe,onPick:pe,onRemove:m,loading:h=!1,disabled:g=!1,accept:_=`image/png,image/jpeg,image/webp`,maxSizeMb:v=ne,crop:y,overlayIcon:me=`image`,overlayLabel:b=`Update photo`,ariaLabel:he=`Upload photo`,removeLabel:x=`Remove photo`,label:ge,hint:S,error:_e,layout:C=`stacked`,title:ve,subtitle:w,required:ye=!1,variant:T=`initials`,size:E=`md`,shape:D=`circle`,className:O=``,...k}){t(`AppLogoPicker`,k),e(`AppLogoPicker`,`layout`,C,oe),e(`AppLogoPicker`,`variant`,T,se),e(`AppLogoPicker`,`shape`,D,ce),e(`AppLogoPicker`,`size`,typeof E==`string`?E:null,Object.keys(f));let A=y===`free`?null:typeof y==`number`&&Number.isFinite(y)&&y>0?y:void 0;y!=null&&A===void 0&&e(`AppLogoPicker`,`crop`,String(y),[`free`,`a positive number`]);let j=c(null),M=c(null),N=ie(),[P,F]=l(null),[be,I]=l(``),[xe,L]=l(!1),[R,z]=l(!1),[B,V]=l(null),[H,U]=l(!1),[W,G]=l(`loading`),[K,q]=l(``),Se=re(e=>{if(M.current=e,!e)return;let t=()=>G(`ready`),n=()=>G(`error`);return e.addEventListener(`load`,t),e.addEventListener(`error`,n),()=>{e.removeEventListener(`load`,t),e.removeEventListener(`error`,n),M.current=null}},[]);s(()=>()=>B&&URL.revokeObjectURL(B.url),[B]),s(()=>()=>P&&URL.revokeObjectURL(P),[P]),s(()=>{F(null),L(!1)},[p]);let J=h||g,Y=P||(p&&!xe?p:null),X=_e||be,Ce=S&&!X?`${N}-hint`:void 0,we=X?`${N}-error`:void 0,Te=!J&&(!!P||!!Y&&!!m),Ee=()=>{J||j.current?.click()},De=e=>{I(``),L(!1),F(URL.createObjectURL(e)),pe(e)},Oe=e=>{let t=A!==void 0&&e.type!==`image/svg+xml`,n=o(e,{accept:_,maxSizeMb:t?0:v});if(n){I(n);return}if(t){I(``),G(`loading`),q(``),V({file:e,url:URL.createObjectURL(e)});return}De(e)},ke=async()=>{let{file:e}=B;U(!0),q(``);let t=null;try{t=await M.current?.toFile({name:e.name,type:e.type,maxBytes:v>0?v*1024*1024:0})}catch{t=null}if(U(!1),!t){q(le);return}V(null);let n=o(t,{accept:_,maxSizeMb:v});n?I(n):De(t)},Ae=()=>{H||V(null)},je=e=>{let t=e.target.files?.[0];e.target.value=``,t&&Oe(t)},Me=e=>{if(e.preventDefault(),z(!1),J)return;let t=e.dataTransfer.files?.[0];t&&Oe(t)},Ne=()=>{F(null),I(``),L(!1),j.current&&(j.current.value=``),m?.()},Z=typeof E==`number`?E:f[E]??f.md,Pe=Math.max(14,Math.round(Z*.18)),Fe=Math.round(Z*.5),Ie=[`set-uploader`,T===`avatar`?`set-uploader--avatar`:``,D===`rounded`?`set-uploader--rounded`:D===`square`?`set-uploader--square`:``,R&&`is-dragging`].filter(Boolean).join(` `),Le=C===`inline`,Re=C===`profile`,Q=d(`div`,{className:`set-uploader-shell`,style:{"--wui-logo-size":`${Z}px`},children:[u(`button`,{type:`button`,className:Ie,onClick:Ee,disabled:J,"aria-busy":h||void 0,"aria-label":he,"aria-describedby":we||Ce,onDragOver:e=>{e.preventDefault(),!J&&!R&&z(!0)},onDragLeave:e=>{e.preventDefault(),z(!1)},onDrop:Me,...k,children:d(`span`,{className:`set-uploader-ring`,"data-overlay-label":b,children:[Y?u(`img`,{className:`set-uploader-img`,src:Y,alt:``,onError:()=>L(!0)}):u(`span`,{className:`set-uploader-logo`,children:de||T===`avatar`&&u(r,{name:`user`,size:Fe})}),h?u(`span`,{className:`set-uploader-overlay is-loading`,"aria-hidden":`true`,children:u(r,{name:`refresh-cw`,size:Pe,className:`wui-spin`})}):!g&&d(`span`,{className:`set-uploader-overlay`,children:[u(r,{name:me,size:Pe}),u(`span`,{children:b})]})]})}),n(u(`button`,{type:`button`,className:`set-uploader-remove`,hidden:!Te,"aria-label":x,onClick:Ne,children:u(r,{name:`x`,size:14})}),Te?x:null),u(`input`,{id:N,ref:j,type:`file`,name:fe,hidden:!0,accept:_,onChange:je,disabled:J}),A!==void 0&&d(te,{open:!!B,title:`Crop photo`,subtitle:`Drag the frame and zoom to choose what to keep.`,size:`lg`,staticBackdrop:!0,dismissible:!H,onClose:Ae,footer:d(ae,{children:[u(a,{type:`button`,variant:`secondary`,disabled:H,onClick:Ae,children:`Cancel`}),u(a,{type:`button`,variant:`primary`,loading:H,disabled:W!==`ready`,onClick:ke,children:`Apply`})]}),children:[W===`error`&&u(i,{variant:`danger`,children:ue}),K&&u(i,{variant:`danger`,children:K}),B&&W!==`error`&&u(`wui-image-crop`,{ref:Se,src:B.url,aspect:A??`free`,round:A===1&&D===`circle`})]})]}),ze=S&&!X?u(`div`,{className:`set-uploader-hint`,id:Ce,children:S}):null,Be=X?u(`div`,{className:`field-error`,id:we,children:X}):null,$=ge&&d(`label`,{className:`label`,htmlFor:N,children:[ge,ye&&u(ee,{})]}),Ve=d(`div`,{className:`set-uploader-meta`,children:[ve&&u(`div`,{className:`set-uploader-title`,children:ve}),w&&u(`div`,{className:`set-uploader-subtitle`,children:w}),ze,Be]});return Le?d(`div`,{className:`field set-uploader-field set-uploader-field--inline${O?` ${O}`:``}`,children:[$,d(`div`,{className:`set-uploader-row`,children:[Q,Ve]})]}):Re?d(`div`,{className:`field set-uploader-field set-uploader-field--profile${O?` ${O}`:``}`,children:[$,Q,Ve]}):d(`div`,{className:`field set-uploader-field${O?` ${O}`:``}`,children:[$,Q,ze,Be]})}export{p as default};
|
|
@@ -21,10 +21,13 @@ import "@webority/ui-elements/elements/command-palette";
|
|
|
21
21
|
* @param {{ key: string, label: import('react').ReactNode, items: { key: string,
|
|
22
22
|
* label: import('react').ReactNode, description?: import('react').ReactNode,
|
|
23
23
|
* icon?: string | import('react').ReactNode, meta?: import('react').ReactNode,
|
|
24
|
-
* disabled?: boolean, onSelect?: () => void }[] }[]} [props.groups=[]]
|
|
25
|
-
* order under their group headings. Keys must be unique within their
|
|
26
|
-
* items are left out. `icon` is a library icon name or a node; `meta` is
|
|
27
|
-
* or a node. A `disabled` item is listed but cannot be chosen: the arrow
|
|
24
|
+
* disabled?: boolean, ariaLabel?: string, onSelect?: () => void }[] }[]} [props.groups=[]]
|
|
25
|
+
* Results, rendered in order under their group headings. Keys must be unique within their
|
|
26
|
+
* group; groups with no items are left out. `icon` is a library icon name or a node; `meta` is
|
|
27
|
+
* short trailing text or a node. A `disabled` item is listed but cannot be chosen: the arrow
|
|
28
|
+
* keys skip it. `ariaLabel` is the option's accessible name, by default a string `label`, so a
|
|
29
|
+
* screen reader reads the name whole rather than in the pieces the search emphasis splits it
|
|
30
|
+
* into; give it for a label passed as a node. The description and meta describe the option.
|
|
28
31
|
* @param {boolean} [props.loading=false] Shows the library spinner in the input.
|
|
29
32
|
* @param {import('react').ReactNode} [props.emptyText='No results'] Shown when the query is
|
|
30
33
|
* not blank, nothing is loading, and no group has items.
|
|
@@ -51,6 +54,7 @@ export default function AppCommandPalette({ open, onClose, query, onQueryChange,
|
|
|
51
54
|
icon?: string | import('react').ReactNode;
|
|
52
55
|
meta?: import('react').ReactNode;
|
|
53
56
|
disabled?: boolean;
|
|
57
|
+
ariaLabel?: string;
|
|
54
58
|
onSelect?: () => void;
|
|
55
59
|
}[];
|
|
56
60
|
}[];
|
|
@@ -4,7 +4,7 @@ fallback, // node shown when there's no image (e.g. initials)
|
|
|
4
4
|
name, onPick, // (file) => void — receives a validated File
|
|
5
5
|
onRemove, // () => void — clears the current logo
|
|
6
6
|
loading, // show a spinner + block interaction while the pick is uploading
|
|
7
|
-
disabled, accept, maxSizeMb, crop, overlayIcon, overlayLabel, ariaLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
|
|
7
|
+
disabled, accept, maxSizeMb, crop, overlayIcon, overlayLabel, ariaLabel, removeLabel, label, hint, error, layout, title, subtitle, required, variant, size, shape, className, ...rest }: {
|
|
8
8
|
[x: string]: any;
|
|
9
9
|
accept?: string;
|
|
10
10
|
ariaLabel?: string;
|
|
@@ -23,6 +23,7 @@ disabled, accept, maxSizeMb, crop, overlayIcon, overlayLabel, ariaLabel, label,
|
|
|
23
23
|
onRemove: any;
|
|
24
24
|
overlayIcon?: string;
|
|
25
25
|
overlayLabel?: string;
|
|
26
|
+
removeLabel?: string;
|
|
26
27
|
required?: boolean;
|
|
27
28
|
shape?: string;
|
|
28
29
|
size?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/ui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.53.0",
|
|
4
4
|
"description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"type": "module",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@webority/theme": "0.
|
|
31
|
-
"@webority/ui-elements": "0.
|
|
30
|
+
"@webority/theme": "0.53.0",
|
|
31
|
+
"@webority/ui-elements": "0.53.0"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@webority/analytics": "^0.21.0",
|