@webority/ui-react 0.54.0 → 0.55.0

package/dist/components/AppAutocomplete.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i,{optionsEqual as a}from"./useWuiControl.js";import{forwardRef as o,useEffect as s,useId as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import"@webority/ui-elements/elements/autocomplete";var d=[`sm`,`lg`],f=o(function({value:o,onChange:f,options:p,loadOptions:m,placeholder:h=`Search…`,minChars:g,debounce:_,disabled:v=!1,size:y,allowCustom:b=!1,name:x,id:S,label:C,error:w,hint:T,required:E=!1,help:D,helpLabel:O=`More information`,fieldClassName:k=``,...A},j){t(`AppAutocomplete`,A),e(`AppAutocomplete`,`size`,y,d);let M=typeof m==`function`,N=c(),P=S||N,{setRef:F,innerRef:I}=i({ref:j,value:o??``,on:{change:e=>f?.(e.currentTarget.value,{isCustom:!!e.detail?.isCustom})}});return s(()=>{let e=I.current;if(!e||M)return;let t=p||[];a(t,e.options)||(e.options=t)},[p,M,I]),s(()=>{let e=I.current;if(!e||!M)return;let t=0,n=null,r=async r=>{let i=++t;n?.abort(),n=typeof AbortController==`function`?new AbortController:null,e.loading=!0;try{let a=await m(r.detail.query,{signal:n?.signal});i===t&&(e.options=a||[])}catch{i===t&&(e.options=[])}finally{i===t&&(e.loading=!1)}};return e.addEventListener(`search`,r),()=>{t=-1,n?.abort(),e.removeEventListener(`search`,r),e.loading=!1}},[M,m,I]),u(`div`,{className:`field${k?` ${k}`:``}`,children:[C&&u(`label`,{className:`label`,htmlFor:P,children:[C,E&&l(r,{}),D&&l(n,{label:O,children:D})]}),l(`wui-autocomplete`,{"aria-label":typeof C==`string`?C:void 0,"aria-describedby":w?`${P}-error`:T?`${P}-hint`:void 0,"aria-invalid":w?`true`:void 0,id:P,ref:F,name:x,placeholder:h,remote:M?``:void 0,"min-chars":g==null?void 0:String(g),debounce:_==null?void 0:String(_),size:y||void 0,"allow-custom":b?``:void 0,disabled:v?``:void 0,required:E?``:void 0,...A}),w?l(`div`,{className:`field-error`,id:`${P}-error`,children:w}):T?l(`div`,{className:`field-hint`,id:`${P}-hint`,children:T}):null]})});export{f as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o}from"./useWuiControl.js";import{forwardRef as s,useEffect as c,useId as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/autocomplete";var p=[`sm`,`lg`],m=[],h=(e,t)=>({...e,label:t}),g=s(function({value:s,onChange:g,options:_,loadOptions:v,placeholder:y=`Search…`,minChars:b,debounce:x,disabled:S=!1,size:C,allowCustom:w=!1,name:T,id:E,label:D,error:O,hint:k,required:A=!1,help:j,helpLabel:M=`More information`,fieldClassName:N=``,...P},F){t(`AppAutocomplete`,P),e(`AppAutocomplete`,`size`,C,p);let I=typeof v==`function`,L=l(),R=E||L,{setRef:z,innerRef:B}=a({ref:F,value:s??``,on:{change:e=>g?.(e.currentTarget.value,{isCustom:!!e.detail?.isCustom})}}),V=_||m,{portal:H,toElementOptions:U}=i(V),W=u(!1);return c(()=>{let e=B.current;if(!e||I&&W.current)return;let t=U(V,h);o(t,e.options)||(e.options=t)},[V,I,B,U]),c(()=>{let e=B.current;if(!e||!I)return;let t=0,n=null,r=async r=>{let i=++t;n?.abort(),n=typeof AbortController==`function`?new AbortController:null,e.loading=!0;try{let a=await v(r.detail.query,{signal:n?.signal});i===t&&(W.current=!0,e.options=a||[])}catch{i===t&&(W.current=!0,e.options=[])}finally{i===t&&(e.loading=!1)}};return e.addEventListener(`search`,r),()=>{t=-1,n?.abort(),e.removeEventListener(`search`,r),e.loading=!1}},[I,v,B]),f(`div`,{className:`field${N?` ${N}`:``}`,children:[D&&f(`label`,{className:`label`,htmlFor:R,children:[D,A&&d(r,{}),j&&d(n,{label:M,children:j})]}),d(`wui-autocomplete`,{"aria-label":typeof D==`string`?D:void 0,"aria-describedby":O?`${R}-error`:k?`${R}-hint`:void 0,"aria-invalid":O?`true`:void 0,id:R,ref:z,name:T,placeholder:y,remote:I?``:void 0,"min-chars":b==null?void 0:String(b),debounce:x==null?void 0:String(x),size:C||void 0,"allow-custom":w?``:void 0,disabled:S?``:void 0,required:A?``:void 0,...P}),H,O?d(`div`,{className:`field-error`,id:`${R}-error`,children:O}):k?d(`div`,{className:`field-hint`,id:`${R}-hint`,children:k}):null]})});export{g as default};

package/dist/components/AppMultiSelect.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i,{optionsEqual as a,readValues as o,writeValues as s}from"./useWuiControl.js";import{forwardRef as c,useEffect as l,useId as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/multiselect";var p=[`sm`,`lg`],m=c(function({values:c,onChange:m,options:h,placeholder:g=`Select…`,searchPlaceholder:_=`Search…`,searchable:v=!0,disabled:y=!1,icon:b,size:x,collapseChips:S=!1,allowCustom:C=!1,validateCustom:w,customPattern:T,customInvalidMessage:E,name:D,id:O,label:k,error:A,hint:j,required:M=!1,help:N,helpLabel:P=`More information`,fieldClassName:F=``,...I},L){t(`AppMultiSelect`,I),e(`AppMultiSelect`,`size`,x,p);let R=u(),z=O||R,{setRef:B,innerRef:V}=i({ref:L,value:c,onChange:m,readValue:o,writeValue:s});return l(()=>{let e=V.current;if(!e)return;let t=h||[];a(t,e.options)||(e.options=t)},[h,V]),l(()=>{let e=V.current;e&&(e.validateCustom=w??null)},[w,V]),f(`div`,{className:`field${F?` ${F}`:``}`,children:[k&&f(`label`,{className:`label`,htmlFor:z,children:[k,M&&d(r,{}),N&&d(n,{label:P,children:N})]}),d(`wui-multiselect`,{"aria-label":typeof k==`string`?k:void 0,"aria-describedby":A?`${z}-error`:j?`${z}-hint`:void 0,"aria-invalid":A?`true`:void 0,id:z,ref:B,name:D,placeholder:g,"search-placeholder":_,icon:b||void 0,size:x||void 0,"collapse-chips":S?``:void 0,"allow-custom":C?``:void 0,"custom-pattern":T||void 0,"custom-invalid-message":E||void 0,searchable:v?``:void 0,disabled:y?``:void 0,required:M?``:void 0,...I}),A?d(`div`,{className:`field-error`,id:`${z}-error`,children:A}):j?d(`div`,{className:`field-hint`,id:`${z}-hint`,children:j}):null]})});export{m as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import i from"./useNodeLabels.js";import a,{optionsEqual as o,readValues as s,writeValues as c}from"./useWuiControl.js";import{forwardRef as l,useEffect as u,useId as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import"@webority/ui-elements/elements/multiselect";var m=[`sm`,`lg`],h=[],g=(e,t)=>({...e,label:t}),_=l(function({values:l,onChange:_,options:v,placeholder:y=`Select…`,searchPlaceholder:b=`Search…`,searchable:x=!0,disabled:S=!1,icon:C,size:w,collapseChips:T=!1,allowCustom:E=!1,validateCustom:D,customPattern:O,customInvalidMessage:k,name:A,id:j,label:M,error:N,hint:P,required:F=!1,help:I,helpLabel:L=`More information`,fieldClassName:R=``,...z},B){t(`AppMultiSelect`,z),e(`AppMultiSelect`,`size`,w,m);let V=d(),H=j||V,{setRef:U,innerRef:W}=a({ref:B,value:l,onChange:_,readValue:s,writeValue:c}),G=v||h,{portal:K,toElementOptions:q}=i(G);return u(()=>{let e=W.current;if(!e)return;let t=q(G,g);o(t,e.options)||(e.options=t)},[G,W,q]),u(()=>{let e=W.current;e&&(e.validateCustom=D??null)},[D,W]),p(`div`,{className:`field${R?` ${R}`:``}`,children:[M&&p(`label`,{className:`label`,htmlFor:H,children:[M,F&&f(r,{}),I&&f(n,{label:L,children:I})]}),f(`wui-multiselect`,{"aria-label":typeof M==`string`?M:void 0,"aria-describedby":N?`${H}-error`:P?`${H}-hint`:void 0,"aria-invalid":N?`true`:void 0,id:H,ref:U,name:A,placeholder:y,"search-placeholder":b,icon:C||void 0,size:w||void 0,"collapse-chips":T?``:void 0,"allow-custom":E?``:void 0,"custom-pattern":O||void 0,"custom-invalid-message":k||void 0,searchable:x?``:void 0,disabled:S?``:void 0,required:F?``:void 0,...z}),K,N?f(`div`,{className:`field-error`,id:`${H}-error`,children:N}):P?f(`div`,{className:`field-hint`,id:`${H}-hint`,children:P}):null]})});export{_ as default};

package/dist/components/AppSelect.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import ee from"./AppInfoTip.js";import n from"./AppRequiredMark.js";import r,{optionsEqual as i}from"./useWuiControl.js";import a from"./useNodeLabels.js";import{forwardRef as o,useEffect as s,useId as c,useRef as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var p=[`sm`,`lg`],m=(e,t)=>({value:e.value,label:t,icon:e.icon}),h=o(function({value:o,onChange:h,options:g=[],placeholder:_=`Select...`,searchPlaceholder:v=`Search...`,searchable:y=!1,clearable:b=!1,size:x,icon:S,prefix:C,suffix:w,floatingLabel:T=!1,disabled:E,label:D,required:O=!1,error:k,hint:A,help:j,helpLabel:M=`More information`,id:N,name:P,className:F=``,fieldClassName:I=``,"aria-label":L,"aria-labelledby":R,"aria-describedby":z,...B},V){t(`AppSelect`,B),e(`AppSelect`,`size`,x,p);let H=c(),{setRef:U,innerRef:W}=r({ref:V,value:o??``,onChange:h}),{portal:G,toElementOptions:K}=a(g),q=l({el:null,options:null});s(()=>{let e=W.current;if(!e||q.current.el===e&&q.current.options===g)return;q.current={el:e,options:g};let t=K(g,m);i(t,e.options)||(e.options=t)});let J=N||H,Y=T&&D,X=k&&J?`${J}-error`:void 0,Z=A&&J?`${J}-hint`:void 0,Q=f(u,{children:[d(`wui-select`,{"aria-label":L||(typeof D==`string`?D:void 0),"aria-labelledby":R||void 0,"aria-describedby":X||Z||z||void 0,"aria-invalid":k?`true`:void 0,ref:U,id:J,name:P,placeholder:T&&D?` `:_,"search-placeholder":v,searchable:y?``:void 0,clearable:b?``:void 0,size:x||void 0,icon:S||void 0,disabled:E?``:void 0,required:O?``:void 0,className:F||void 0,...B}),G]}),$=!Y&&(C!=null||w!=null)?f(`div`,{className:`input-affixed`,children:[C!=null&&d(`span`,{className:`affix affix-pre`,children:C}),Q,w!=null&&d(`span`,{className:`affix affix-suf`,children:w})]}):Q;return!D&&!k&&!A?$:f(`div`,{className:[`field`,I].filter(Boolean).join(` `),children:[D&&!Y&&f(`label`,{className:`label`,htmlFor:J,children:[D,O&&d(n,{}),j&&d(ee,{label:M,children:j})]}),Y?f(`div`,{className:`field-float`,children:[Q,f(`label`,{className:`float-label`,htmlFor:J,children:[D,O&&d(n,{})]})]}):$,k?d(`div`,{className:`field-error`,id:X,children:k}):A?d(`div`,{className:`field-hint`,id:Z,children:A}):null]})});export{h as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import ee from"./AppInfoTip.js";import n from"./AppRequiredMark.js";import r from"./useNodeLabels.js";import i,{optionsEqual as a}from"./useWuiControl.js";import{forwardRef as o,useEffect as s,useId as c,useRef as l}from"react";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var p=[`sm`,`lg`],m=(e,t)=>({value:e.value,label:t,icon:e.icon}),h=o(function({value:o,onChange:h,options:g=[],placeholder:_=`Select...`,searchPlaceholder:v=`Search...`,searchable:y=!1,clearable:b=!1,size:x,icon:S,prefix:C,suffix:w,floatingLabel:T=!1,disabled:E,label:D,required:O=!1,error:k,hint:A,help:j,helpLabel:M=`More information`,id:N,name:P,className:F=``,fieldClassName:I=``,"aria-label":L,"aria-labelledby":R,"aria-describedby":z,...B},V){t(`AppSelect`,B),e(`AppSelect`,`size`,x,p);let H=c(),{setRef:U,innerRef:W}=i({ref:V,value:o??``,onChange:h}),{portal:G,toElementOptions:K}=r(g),q=l({el:null,options:null});s(()=>{let e=W.current;if(!e||q.current.el===e&&q.current.options===g)return;q.current={el:e,options:g};let t=K(g,m);a(t,e.options)||(e.options=t)});let J=N||H,Y=T&&D,X=k&&J?`${J}-error`:void 0,Z=A&&J?`${J}-hint`:void 0,Q=f(u,{children:[d(`wui-select`,{"aria-label":L||(typeof D==`string`?D:void 0),"aria-labelledby":R||void 0,"aria-describedby":X||Z||z||void 0,"aria-invalid":k?`true`:void 0,ref:U,id:J,name:P,placeholder:T&&D?` `:_,"search-placeholder":v,searchable:y?``:void 0,clearable:b?``:void 0,size:x||void 0,icon:S||void 0,disabled:E?``:void 0,required:O?``:void 0,className:F||void 0,...B}),G]}),$=!Y&&(C!=null||w!=null)?f(`div`,{className:`input-affixed`,children:[C!=null&&d(`span`,{className:`affix affix-pre`,children:C}),Q,w!=null&&d(`span`,{className:`affix affix-suf`,children:w})]}):Q;return!D&&!k&&!A?$:f(`div`,{className:[`field`,I].filter(Boolean).join(` `),children:[D&&!Y&&f(`label`,{className:`label`,htmlFor:J,children:[D,O&&d(n,{}),j&&d(ee,{label:M,children:j})]}),Y?f(`div`,{className:`field-float`,children:[Q,f(`label`,{className:`float-label`,htmlFor:J,children:[D,O&&d(n,{})]})]}):$,k?d(`div`,{className:`field-error`,id:X,children:k}):A?d(`div`,{className:`field-hint`,id:Z,children:A}):null]})});export{h as default};

package/dist/components/AppSelectMini.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n,{optionsEqual as r}from"./useWuiControl.js";import i from"./useNodeLabels.js";import{useEffect as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var l=[`sm`,`lg`],u=(e,t)=>({value:e.value,label:t,icon:e.icon});function d({value:d,onChange:f,options:p=[],placeholder:m=`Select...`,name:h,ariaLabel:g,id:_,disabled:v,size:y,icon:b,prefix:x,className:S,...C}){t(`AppSelectMini`,C),e(`AppSelectMini`,`size`,y,l);let{setRef:w,innerRef:T}=n({value:d??``,onChange:f}),{portal:E,toElementOptions:D}=i(p);return a(()=>{let e=T.current;if(!e)return;let t=D(p,u);r(t,e.options)||(e.options=t)},[p,T,D]),a(()=>{let e=T.current;if(e)for(let[t,n]of[[`icon`,b],[`prefix`,x]])n==null||n===``?e.removeAttribute(t):e.setAttribute(t,n)},[b,x,T]),c(o,{children:[s(`wui-select`,{ref:w,name:h,compact:``,id:_,placeholder:m,"aria-label":g,size:y||void 0,disabled:v?``:void 0,className:S,...C}),E]})}export{d as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./useNodeLabels.js";import r,{optionsEqual as i}from"./useWuiControl.js";import{useEffect as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var l=[`sm`,`lg`],u=(e,t)=>({value:e.value,label:t,icon:e.icon});function d({value:d,onChange:f,options:p=[],placeholder:m=`Select...`,name:h,ariaLabel:g,id:_,disabled:v,size:y,icon:b,prefix:x,className:S,...C}){t(`AppSelectMini`,C),e(`AppSelectMini`,`size`,y,l);let{setRef:w,innerRef:T}=r({value:d??``,onChange:f}),{portal:E,toElementOptions:D}=n(p);return a(()=>{let e=T.current;if(!e)return;let t=D(p,u);i(t,e.options)||(e.options=t)},[p,T,D]),a(()=>{let e=T.current;if(e)for(let[t,n]of[[`icon`,b],[`prefix`,x]])n==null||n===``?e.removeAttribute(t):e.setAttribute(t,n)},[b,x,T]),c(o,{children:[s(`wui-select`,{ref:w,name:h,compact:``,id:_,placeholder:m,"aria-label":g,size:y||void 0,disabled:v?``:void 0,className:S,...C}),E]})}export{d as default};

package/dist/components/AppTour.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import"@webority/ui-elements/elements/tour";import{forwardRef as t,useEffect as n,useLayoutEffect as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";var o=t(function({open:t,onClose:o,tourId:s,steps:c,seenStore:l,onBeforeStep:u,labels:d,className:f,...p},m){e(`AppTour`,p);let h=i(null),g=e=>{h.current=e,typeof m==`function`?m(e):m&&(m.current=e)};r(()=>{let e=h.current;e.seenStore=l??null,e.onBeforeStep=u??null}),r(()=>{let e=h.current;t?e.setAttribute(`open`,``):e.removeAttribute(`open`)},[t]);let _=i(o);return _.current=o,n(()=>{let e=h.current,t=e=>_.current?.(e.detail.reason);return e.addEventListener(`wui-tour:close`,t),()=>e.removeEventListener(`wui-tour:close`,t)},[]),a(`wui-tour`,{ref:g,"tour-id":s,"back-label":d?.back,"next-label":d?.next,"skip-label":d?.skip,"done-label":d?.done,class:f||void 0,...p,children:c.map(e=>a(`wui-tour-step`,{target:e.target,title:e.title,children:e.description},`${e.target}|${e.description}`))})});export{o as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import"@webority/ui-elements/elements/tour";import{forwardRef as n,useEffect as r,useLayoutEffect as i,useRef as a}from"react";import{jsx as o}from"react/jsx-runtime";var s=[`image`,`video`],c=[`click`],l=n(function({open:n,onClose:l,tourId:u,steps:d,seenStore:f,onBeforeStep:p,labels:m,endDialog:h=!0,className:g,..._},v){t(`AppTour`,_);for(let t of d)e(`AppTour`,`steps[].mediaType`,t.mediaType,s),e(`AppTour`,`steps[].advanceOn`,t.advanceOn,c);let y=a(null),b=e=>{y.current=e,typeof v==`function`?v(e):v&&(v.current=e)};i(()=>{let e=y.current;e.seenStore=f??null,e.onBeforeStep=p??null}),i(()=>{let e=y.current;n?e.setAttribute(`open`,``):e.removeAttribute(`open`)},[n]);let x=a(l);return x.current=l,r(()=>{let e=y.current,t=e=>{let{reason:t,index:n,position:r,total:i}=e.detail;x.current?.(t,{index:n,position:r,total:i})};return e.addEventListener(`wui-tour:close`,t),()=>e.removeEventListener(`wui-tour:close`,t)},[]),o(`wui-tour`,{ref:b,"tour-id":u,"back-label":m?.back,"next-label":m?.next,"skip-label":m?.skip,"done-label":m?.done,"progress-label":m?.progress,"advance-label":m?.advance,"media-pause-label":m?.mediaPause,"media-play-label":m?.mediaPlay,"end-title":m?.endTitle,"end-message":m?.endMessage,"end-button":m?.endButton,"end-dialog":h===!1?`false`:void 0,class:g||void 0,..._,children:d.map(e=>o(`wui-tour-step`,{target:e.target,title:e.title,media:e.media,"media-alt":e.mediaAlt,"media-poster":e.mediaPoster,"media-type":e.mediaType,"advance-on":e.advanceOn,"action-label":e.actionLabel,children:e.description},`${e.target}|${e.description}`))})});export{l as default};

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

@@ -6,18 +6,25 @@ import "@webority/ui-elements/elements/autocomplete";
  *   - **static** — pass `options` (`[{ value, label }]`); filtering is client-side.
  *   - **remote** — pass an async `loadOptions(query) => Promise<options>`; the field
  *     debounces typing, shows a spinner while your promise is in flight, then lists the
- *     results. You own the fetch; the component owns the UX.
+ *     results. You own the fetch; the component owns the UX. `options` given alongside it
+ *     are the list shown until the first load result arrives, which replaces them.
  *
  * @param {object} props
  * @param {string} [props.value] Selected option value.
  * @param {(value: string, meta?: { isCustom: boolean }) => void} [props.onChange] The second
  *   argument reports whether the commit was a freeform entry (`allowCustom`) rather than a
  *   listed option — existing callers reading only the first argument are unaffected.
- * @param {{value: string, label: string}[]} [props.options] Static options.
+ * @param {Array<{ value: string, label: import('react').ReactNode }>} [props.options] Static options,
+ *   or with `loadOptions` the initial list: shown before any load result arrives (and resolving a
+ *   pre-filled value's label), then replaced by the first result; later changes are ignored.
+ *   A label may be a node (`<>CO<sub>2</sub></>`): it renders as static markup in the menu, the
+ *   input shows its text once chosen, and filtering and the option's accessible name use that
+ *   text. Remote results from `loadOptions` take string labels only.
  * @param {(query: string, opts?: { signal?: AbortSignal }) => Promise<{value: string, label: string}[]>} [props.loadOptions]
  *   Remote loader; receives an AbortSignal for the superseded request (optional to use).
  * @param {string} [props.placeholder]
  * @param {number} [props.minChars] Min chars before a remote search fires (default 1 in remote mode).
+ *   0 is allowed: opening the field with an empty box calls `loadOptions("")` for the first page.
  * @param {number} [props.debounce] Debounce ms for remote search (default 250).
  * @param {boolean} [props.disabled]
  * @param {'sm'|'lg'} [props.size] Control size around the default.

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

@@ -17,7 +17,10 @@ import "@webority/ui-elements/elements/multiselect";
  * @param {object} props
  * @param {string[]} [props.values] Selected option values.
  * @param {(values: string[]) => void} [props.onChange]
- * @param {{value: string, label: string, description?: string, avatar?: string, initials?: string, disabled?: boolean, disabledHint?: string}[]} [props.options]
+ * @param {Array<{ value: string, label: import('react').ReactNode, description?: string, avatar?: string, initials?: string, disabled?: boolean, disabledHint?: string }>} [props.options]
+ *   The choices. A label may be a node (`<>CO<sub>2</sub></>`): it renders as static markup in the
+ *   menu and on the chosen chip, and search, typeahead and the accessible names (the option and the
+ *   chip's remove button) use its text.
  * @param {string} [props.placeholder]
  * @param {string} [props.searchPlaceholder] Placeholder for the in-menu search box.
  * @param {boolean} [props.searchable=true] Ignored under `allowCustom`, whose inline input is the search.

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

@@ -7,25 +7,50 @@ import "@webority/ui-elements/elements/tour";
  *
  * Accessibility: focus moves into the card on open, stays there while the tour runs, and returns
  * to where it was on close; each step is announced; Escape skips the tour; the arrow keys move
- * between steps. On a phone the card sits on the side of the target with room and never covers it.
+ * between steps, except while focus is in a field. On a phone the card sits on the side of the
+ * target with room and never covers it. After the last step a closing dialog says the tour is
+ * done (`endDialog={false}` leaves it out); Escape there closes the tour as `finished`.
  *
  * Set `open` to run the tour and set it back to false from `onClose`. Pass a `seenStore` to
  * remember that a person has seen it: it is asked before showing and written when the tour
- * finishes or is skipped. `createLocalSeenStore()` (from `@webority/ui-elements`) keeps that in
- * the browser; a product that keeps it on its server passes its own `{ isSeen, markSeen }`.
+ * finishes or is skipped, with that outcome. `createLocalSeenStore()` (from
+ * `@webority/ui-elements`) keeps that in the browser; a product that keeps it on its server
+ * passes its own `{ isSeen, markSeen }`.
+ *
+ * The element also raises bubbling events a product can listen for on the ref:
+ * `wui-tour:start` { total }, `wui-tour:step` { step, index, position, total } and
+ * `wui-tour:close` { reason, index, position, total, via }, where `via` is `button` or `escape`
+ * on a skip.
  *
  * @param {object} props
  * @param {boolean} props.open Runs the tour. Set it back to false from `onClose`.
- * @param {(reason: 'finished'|'skipped'|'alreadySeen'|'noTargets') => void} props.onClose Called when the tour ends.
- *   `finished`: the person stepped past the last step; `skipped`: Skip or Escape (both marked
- *   seen); `alreadySeen`: the store says it was seen, so nothing showed; `noTargets`: no step had
- *   a visible target, so nothing showed (not marked seen).
+ * @param {(reason: 'finished'|'skipped'|'alreadySeen'|'noTargets', details: { index: number|null, position: number|null, total: number|null }) => void} props.onClose
+ *   Called when the tour ends. `finished`: the person stepped past the last step; `skipped`: Skip
+ *   or Escape (both marked seen); `alreadySeen`: the store says it was seen, so nothing showed;
+ *   `noTargets`: no step had a visible target, so nothing showed (not marked seen). `details`
+ *   names the step the tour ended on: its `index` in `steps`, and its `position` (from 1) out of
+ *   `total`, counting only the steps that showed; all null for `alreadySeen` and `noTargets`.
  * @param {string} props.tourId Names the tour in the seen store.
- * @param {{ target: string, title?: string, description: string }[]} props.steps `target` is a CSS selector.
- * @param {{ isSeen: (tourId: string) => Promise<boolean>, markSeen: (tourId: string) => Promise<void> }} [props.seenStore]
+ * @param {{ target: string, title?: string, description: string, media?: string, mediaAlt?: string, mediaPoster?: string, mediaType?: 'image'|'video', advanceOn?: 'click', actionLabel?: string }[]} props.steps
+ *   `target` is a CSS selector. `media` is the URL of an image or short loop shown above the
+ *   title, `mediaAlt` its text alternative, `mediaPoster` the still a loop shows under reduced
+ *   motion. `advanceOn: 'click'` moves the tour on when the person clicks the target, and the
+ *   card says what to click; `actionLabel` names the control in that sentence, in place of the
+ *   target's accessible name, which it falls back to.
+ * @param {{ isSeen: (tourId: string) => Promise<boolean>, markSeen: (tourId: string, outcome: 'finished'|'skipped') => Promise<void> }} [props.seenStore]
  *   Read through a ref, so an inline object does not restart a running tour.
  * @param {(step: object, index: number) => void | Promise<void>} [props.onBeforeStep] Runs before each step's target is looked up, awaited. Use it to open a menu or switch a tab so the target is visible.
- * @param {{ back?: string, next?: string, skip?: string, done?: string }} [props.labels] Button text; defaults Back, Next, Skip, Done.
+ * @param {{ back?: string, next?: string, skip?: string, done?: string, progress?: string, advance?: string, mediaPause?: string, mediaPlay?: string, endTitle?: string, endMessage?: string, endButton?: string }} [props.labels]
+ *   Button text, defaults Back, Next, Skip, Done. `done` is the last step's button only with
+ *   `endDialog={false}`; while the closing dialog is on, the last step reads `next`, because the
+ *   dialog follows. `progress` is the step count template, default "Step {current} of {total}".
+ *   `advance` is a click-to-advance step's sentence, default "Click {actionName} to continue.",
+ *   where `{actionName}` is the step's `actionLabel` or else its target's accessible name.
+ *   `mediaPause` and `mediaPlay` name a step loop's pause button while it plays and while it is
+ *   paused, defaults "Pause animation" and "Play animation".
+ *   `endTitle`, `endMessage` and `endButton` are the closing dialog's text, defaults "You're all
+ *   set", a short friendly line, and "Done".
+ * @param {boolean} [props.endDialog=true] Show the closing dialog after the last step.
  * @param {string} [props.className]
  */
 declare const AppTour: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "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.54.0",
-    "@webority/ui-elements": "0.54.0"
+    "@webority/theme": "0.55.0",
+    "@webority/ui-elements": "0.55.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.21.0",