@webority/ui-react 0.51.1 → 0.51.3

package/dist/components/AppSelect.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/select";var d=[`sm`,`lg`],f=e=>e==null?``:e.label??e.text??``,p=o(function({value:o,onChange:p,options:m=[],placeholder:h=`Select...`,searchPlaceholder:g=`Search...`,searchable:_=!1,clearable:v=!1,size:y,icon:b,prefix:x,suffix:S,floatingLabel:C=!1,disabled:w,label:T,required:E=!1,error:D,hint:O,help:k,helpLabel:A=`More information`,id:j,name:M,className:N=``,fieldClassName:P=``,"aria-label":F,"aria-labelledby":I,"aria-describedby":L,...R},z){t(`AppSelect`,R),e(`AppSelect`,`size`,y,d);let B=c(),{setRef:V,innerRef:H}=i({ref:z,value:o??``,onChange:p});s(()=>{let e=H.current;if(!e)return;let t=m.map(e=>({value:e.value,label:f(e),icon:e.icon}));a(t,e.options)||(e.options=t)},[m,H]);let U=j||B,W=C&&T,G=D&&U?`${U}-error`:void 0,K=O&&U?`${U}-hint`:void 0,q=l(`wui-select`,{"aria-label":F||(typeof T==`string`?T:void 0),"aria-labelledby":I||void 0,"aria-describedby":G||K||L||void 0,"aria-invalid":D?`true`:void 0,ref:V,id:U,name:M,placeholder:C&&T?` `:h,"search-placeholder":g,searchable:_?``:void 0,clearable:v?``:void 0,size:y||void 0,icon:b||void 0,disabled:w?``:void 0,required:E?``:void 0,className:N||void 0,...R}),J=!W&&(x!=null||S!=null)?u(`div`,{className:`input-affixed`,children:[x!=null&&l(`span`,{className:`affix affix-pre`,children:x}),q,S!=null&&l(`span`,{className:`affix affix-suf`,children:S})]}):q;return!T&&!D&&!O?J:u(`div`,{className:[`field`,P].filter(Boolean).join(` `),children:[T&&!W&&u(`label`,{className:`label`,htmlFor:U,children:[T,E&&l(r,{}),k&&l(n,{label:A,children:k})]}),W?u(`div`,{className:`field-float`,children:[q,u(`label`,{className:`float-label`,htmlFor:U,children:[T,E&&l(r,{})]})]}):J,D?l(`div`,{className:`field-error`,id:G,children:D}):O?l(`div`,{className:`field-hint`,id:K,children:O}):null]})});export{p as default};
+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};

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{useEffect as i}from"react";import{jsx as a}from"react/jsx-runtime";import"@webority/ui-elements/elements/select";var o=[`sm`,`lg`];function s({value:s,onChange:c,options:l=[],placeholder:u=`Select...`,name:d,ariaLabel:f,id:p,disabled:m,size:h,icon:g,prefix:_,className:v,...y}){t(`AppSelectMini`,y),e(`AppSelectMini`,`size`,h,o);let{setRef:b,innerRef:x}=n({value:s??``,onChange:c});return i(()=>{let e=x.current;if(!e)return;let t=l.map(e=>({value:e.value,label:e.label??e.text??``,icon:e.icon}));r(t,e.options)||(e.options=t)},[l,x]),i(()=>{let e=x.current;if(e)for(let[t,n]of[[`icon`,g],[`prefix`,_]])n==null||n===``?e.removeAttribute(t):e.setAttribute(t,n)},[g,_,x]),a(`wui-select`,{ref:b,name:d,compact:``,id:p,placeholder:u,"aria-label":f,size:h||void 0,disabled:m?``:void 0,className:v,...y})}export{s as default};
+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};

package/dist/components/useNodeLabels.js

@@ -0,0 +1 @@
+import{withTrustedLabel as e}from"@webority/ui-elements/helpers";import{createElement as t,useCallback as n,useRef as r}from"react";import{createPortal as i}from"react-dom";var a=e=>e?.label!=null&&typeof e.label==`object`;function o(o){let s=r(null),c=o.filter(a);c.length&&s.current===null&&(s.current=document.createElement(`div`));let l=n((t,n)=>{let r=0;return t.map(t=>{if(!a(t))return n(t,t?.label??t?.text??``);let i=s.current.children[r].innerHTML;return r+=1,e(n(t,i))})},[]);return{portal:c.length?i(c.map(e=>t(`span`,{key:String(e.value)},e.label)),s.current):null,toElementOptions:l}}export{o as default};

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

@@ -1,6 +1,9 @@
 import "@webority/ui-elements/elements/select";
 /**
  * @param {object} props
+ * @param {Array<{ value: string, label?: import('react').ReactNode, text?: string, icon?: string }>} [props.options]
+ *   The choices. A label may be a node (`<>LPZ 0<sub>B</sub></>`): it renders as static markup in
+ *   the list and the value, and search and the option's accessible name use its text.
  * @param {string} [props.className] Class to apply to the control element.
  * @param {string} [props.fieldClassName] Class to apply to the wrapper field div.
  * @param {import('react').ReactNode} [props.prefix] A bordered box before the select (e.g. "+91", "Tag"),

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

@@ -0,0 +1,28 @@
+/**
+ * Lets a select option carry a React node as its label (a subscript, a bold run, a badge).
+ *
+ * The shared select element renders its options from strings, so each node label is rendered
+ * by React into a detached host through a portal, and the markup React produced is handed to
+ * the element marked as trusted: React escaped every text and attribute in it, so it is author
+ * markup, the same as a Razor option's child content. The element shows that markup in the list
+ * and as the selected value, and filters, typeahead-matches and names each option by its text,
+ * so `LPZ 0<sub>B</sub>` is found by typing "0b" and read out as "LPZ 0B".
+ *
+ * The markup is static: handlers and state inside a label do not run in the menu, and it is
+ * read again only when the `options` array changes.
+ *
+ * @param {Array<{ value: string, label?: import('react').ReactNode }>} options
+ * @returns {{
+ *   portal: import('react').ReactPortal | null,
+ *   toElementOptions: (options: object[], shape: (o: object, label: string) => object) => object[],
+ * }} `portal` goes anywhere in the wrapper's tree (it adds no DOM there). `toElementOptions` is
+ *   called from an effect, after the portal has committed, with the same `options`; it maps each
+ *   option through `shape` with its text label or its markup.
+ */
+export default function useNodeLabels(options: Array<{
+    value: string;
+    label?: import('react').ReactNode;
+}>): {
+    portal: import('react').ReactPortal | null;
+    toElementOptions: (options: object[], shape: (o: object, label: string) => object) => object[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.51.1",
+  "version": "0.51.3",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,11 +27,11 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.51.1",
-    "@webority/ui-elements": "0.51.1"
+    "@webority/theme": "0.51.3",
+    "@webority/ui-elements": "0.51.3"
   },
   "peerDependencies": {
-    "@webority/analytics": "^0.20.0",
+    "@webority/analytics": "^0.21.0",
     "bootstrap": "5.3.3",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.0",
@@ -45,7 +45,7 @@
     "@types/react": "^19.2.17",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "5.0.1",
-    "@webority/analytics": "0.20.0",
+    "@webority/analytics": "0.21.0",
     "bootstrap": "5.3.3",
     "jsdom": "30.1.1",
     "react": "^19.2.6",