@webority/ui-react 0.101.5 → 0.102.0

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.101.5"
+    "version": "0.102.0"
   },
   "rendererProtocolVersion": 12,
   "platform": "Web",
@@ -5750,6 +5750,12 @@
           "name": "items",
           "type": "array",
           "itemFields": [
+            {
+              "name": "checked",
+              "type": "boolean",
+              "required": false,
+              "description": "Shows a check mark beside the label, for a selection."
+            },
             {
               "name": "danger",
               "type": "boolean",
@@ -5768,6 +5774,12 @@
               "required": false,
               "description": "Draws a separator; the row then needs only its key."
             },
+            {
+              "name": "hint",
+              "type": "string",
+              "required": false,
+              "description": "Muted text after the label, such as a keyboard shortcut."
+            },
             {
               "name": "icon",
               "type": "icon",
@@ -5780,6 +5792,12 @@
               "required": false,
               "description": "A picture URL shown instead of the icon."
             },
+            {
+              "name": "items",
+              "type": "array",
+              "required": false,
+              "description": "Makes the row open a side menu of these rows, in the same item model."
+            },
             {
               "name": "key",
               "type": "string",
@@ -5792,6 +5810,25 @@
               "required": false,
               "description": "The row's text."
             },
+            {
+              "name": "searchPlaceholder",
+              "type": "string",
+              "required": false,
+              "description": "The placeholder of the filter field on a searchable side menu.",
+              "default": "Search"
+            },
+            {
+              "name": "searchable",
+              "type": "boolean",
+              "required": false,
+              "description": "On a row with items, puts a filter field at the top of its side menu."
+            },
+            {
+              "name": "shortcut",
+              "type": "string",
+              "required": false,
+              "description": "The key that runs the row, such as E, drawn as a key chip at the end of the row. The page binds the key itself."
+            },
             {
               "name": "to",
               "type": "string",
@@ -5821,6 +5858,12 @@
           "type": "string",
           "required": false,
           "description": "CSS selector of the elements the menu serves. Without it, the menu serves `children`."
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "required": false,
+          "description": "A CSS selector inside the region: a click or Enter on a match opens the menu under it."
         }
       ],
       "itemsTakeAction": [
@@ -6306,6 +6349,89 @@
         {
           "name": "columns",
           "type": "array",
+          "itemFields": [
+            {
+              "name": "align",
+              "type": "enum",
+              "enum": [
+                "center",
+                "end",
+                "num"
+              ],
+              "required": false,
+              "description": "Aligns the cells: num right-aligns figures in tabular digits."
+            },
+            {
+              "name": "cellClassName",
+              "type": "string",
+              "required": false,
+              "description": "A class added to every cell in the column."
+            },
+            {
+              "name": "cellStyle",
+              "type": "object",
+              "required": false,
+              "description": "Inline styles added to every cell in the column."
+            },
+            {
+              "name": "grow",
+              "type": "boolean",
+              "required": false,
+              "description": "Gives this column the spare width."
+            },
+            {
+              "name": "hideable",
+              "type": "boolean",
+              "required": false,
+              "description": "Lets the person hide this column from the column menu."
+            },
+            {
+              "name": "key",
+              "type": "string",
+              "required": true,
+              "description": "The row field this column reads."
+            },
+            {
+              "name": "label",
+              "type": "node",
+              "required": true,
+              "description": "The column heading."
+            },
+            {
+              "name": "minWidth",
+              "type": "stringOrNumber",
+              "required": false,
+              "description": "The narrowest the column may shrink, in px or a CSS length."
+            },
+            {
+              "name": "nowrap",
+              "type": "boolean",
+              "required": false,
+              "description": "Keeps each cell on one line."
+            },
+            {
+              "name": "pin",
+              "type": "enum",
+              "enum": [
+                "end",
+                "start"
+              ],
+              "required": false,
+              "description": "Keeps the column in view at the start or end while the table scrolls sideways."
+            },
+            {
+              "name": "sortable",
+              "type": "boolean",
+              "required": false,
+              "description": "Lets the heading sort the rows by this column."
+            },
+            {
+              "name": "width",
+              "type": "stringOrNumber",
+              "required": false,
+              "description": "The column's width, in px or a CSS length."
+            }
+          ],
           "required": true,
           "description": "The columns, each an object with a key and a label, plus optional settings such as sortable, hideable, pin, align and grow."
         },
@@ -7756,6 +7882,13 @@
           "required": false,
           "description": "The due date: an ISO date or date-time string, or epoch milliseconds, read in India Standard Time."
         },
+        {
+          "name": "icon",
+          "type": "boolean",
+          "required": false,
+          "description": "Draws a calendar glyph before the date text in every dated state.",
+          "default": false
+        },
         {
           "name": "overdue",
           "type": "boolean",
@@ -7774,6 +7907,17 @@
           "type": "number",
           "required": false,
           "description": "Within this many days of the date, the text reads \"N days left\" in warning."
+        },
+        {
+          "name": "soonWording",
+          "type": "enum",
+          "enum": [
+            "days",
+            "due"
+          ],
+          "required": false,
+          "description": "Within soonDays, \"days\" reads \"N days left\"; \"due\" reads \"Due today\", \"Due tomorrow\" or \"Due in N days\".",
+          "default": "days"
         }
       ],
       "itemsTakeAction": [],
@@ -13384,6 +13528,12 @@
           "required": true,
           "description": "Rendered as the screen heading."
         },
+        {
+          "name": "titleSlot",
+          "type": "node",
+          "required": false,
+          "description": "Rendered inside the heading in place of title, for a title with a badge or a link in it. The heading is then named by title."
+        },
         {
           "name": "tone",
           "type": "enum",
@@ -18485,6 +18635,46 @@
             {
               "name": "results",
               "type": "array",
+              "itemFields": [
+                {
+                  "name": "hits",
+                  "type": "array",
+                  "itemFields": [
+                    {
+                      "name": "href",
+                      "type": "url",
+                      "required": true,
+                      "description": "Where the suggestion goes."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "icon",
+                      "required": false,
+                      "description": "An icon before the title."
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "string",
+                      "required": false,
+                      "description": "A second line under the title."
+                    },
+                    {
+                      "name": "title",
+                      "type": "string",
+                      "required": true,
+                      "description": "The suggestion's text."
+                    }
+                  ],
+                  "required": true,
+                  "description": "The suggestions in the group."
+                },
+                {
+                  "name": "label",
+                  "type": "string",
+                  "required": false,
+                  "description": "The group heading."
+                }
+              ],
               "required": false,
               "nullable": true,
               "description": "Suggestion groups, each with a label and its hits. Null hides the list."

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.101.5",
+  "version": "0.102.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 12,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.101.5"
+    "version": "0.102.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "adafa71d65ea6b51b71a3829e2ebcabc8e484cc2d1b496c94ca867a7df5c8b8e",
-      "bytes": 844310
+      "sha256": "574a750ea887438b4198cf70342152675dd4bec0229b1e545c502911988c7d91",
+      "bytes": 850905
     },
     "kit.js": {
-      "sha256": "88859cfd65ad342b08f033cc35a5f5a259f350145a2dfd465348ae8426dbcba9",
-      "bytes": 10864400
+      "sha256": "a351946943375d06b7b715b5a56c23fe43a7f9a4a2e54ce26e0e32582bceacd9",
+      "bytes": 10876977
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppContextMenu.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import n from"./renderIconProp.js";import{useEffect as r,useLayoutEffect as i,useRef as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import"@webority/ui-elements/elements/context-menu";function c(c){let{items:l=[],target:u,children:d,ariaLabel:f=`Context menu`,disabled:p=!1,open:m,onOpen:h,menuClassName:g=``,linkComponent:_,...v}=c;t(`AppContextMenu`,v);let y=a(null);return r(()=>{let e=y.current;if(!h)return;let t=e=>h(e.detail);return e.addEventListener(`wui-context-menu:open`,t),()=>e.removeEventListener(`wui-context-menu:open`,t)},[h]),i(()=>{y.current.toggleAttribute(`open`,!!m)},[m]),s(`wui-context-menu`,{ref:y,target:u,disabled:p,...e(`AppContextMenu`,c),...v,children:[d,o(`div`,{className:`dropdown-menu wui-context-menu-panel${g?` ${g}`:``}`,role:`menu`,"aria-label":f,tabIndex:-1,children:l.map(e=>{if(e.divider)return o(`hr`,{className:`dropdown-divider`},e.key);let t=!!e.to&&!e.disabled;return s(t?_??`a`:`button`,{...t?_?{to:e.to}:{href:e.to}:{type:`button`},className:`dropdown-item${e.danger?` danger`:``}${e.disabled?` disabled`:``}`,role:`menuitem`,tabIndex:-1,"data-key":e.key,"aria-disabled":e.disabled?`true`:void 0,onClick:e.disabled?void 0:e.onClick,children:[e.image?o(`img`,{src:e.image,alt:``}):n(e.icon,{size:16}),e.label]},e.key)})})]})}export{c as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import{shortcutAria as n,shortcutChip as r}from"../lib/shortcutChip.js";import i from"./renderIconProp.js";import{useEffect as a,useLayoutEffect as o,useRef as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import"@webority/ui-elements/elements/context-menu";function u(n){let{items:r=[],target:i,trigger:u,children:d,ariaLabel:p=`Context menu`,disabled:m=!1,open:h,onOpen:g,onBeforeOpen:_,menuClassName:v=``,linkComponent:y,...b}=n;t(`AppContextMenu`,b);let x=s(null);return a(()=>{let e=x.current;if(!g)return;let t=e=>g(e.detail);return e.addEventListener(`wui-context-menu:open`,t),()=>e.removeEventListener(`wui-context-menu:open`,t)},[g]),a(()=>{let e=x.current;if(_)return e.addEventListener(`wui-context-menu:beforeopen`,_),()=>e.removeEventListener(`wui-context-menu:beforeopen`,_)},[_]),o(()=>{x.current.toggleAttribute(`open`,!!h)},[h]),l(`wui-context-menu`,{ref:x,target:i,trigger:u,disabled:m,...e(`AppContextMenu`,n),...b,children:[d,c(`div`,{className:`dropdown-menu wui-context-menu-panel${v?` ${v}`:``}`,role:`menu`,"aria-label":p,tabIndex:-1,children:f(r,y)})]})}var d=e=>`dropdown-item${e.danger?` danger`:``}${e.disabled?` disabled`:``}`;function f(e,t){return e.map(e=>{if(e.divider)return c(`hr`,{className:`dropdown-divider`},e.key);if(e.items!=null){let n=e.searchPlaceholder||`Search`;return l(`div`,{className:`wui-context-menu-sub`,role:`none`,"data-searchable":e.searchable?``:void 0,children:[l(`button`,{type:`button`,className:d(e),role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":`false`,tabIndex:-1,"data-key":e.key,"aria-disabled":e.disabled?`true`:void 0,children:[i(e.icon,{size:16}),e.label,i(`chevron-right`,{size:14,className:`wui-context-menu-chevron`})]}),l(`div`,{className:`dropdown-menu wui-context-menu-subpanel`,role:`menu`,"aria-label":e.label,tabIndex:-1,children:[e.searchable?c(`input`,{type:`search`,className:`wui-context-menu-search`,autoComplete:`off`,placeholder:n,"aria-label":n}):null,f(e.items,t)]})]},e.key)}let a=!!e.to&&!e.disabled;return l(a?t??`a`:`button`,{...a?t?{to:e.to}:{href:e.to}:{type:`button`},className:d(e),role:`menuitem`,tabIndex:-1,"data-key":e.key,"aria-checked":e.checked?`true`:void 0,"data-hint":e.hint||void 0,"aria-keyshortcuts":n(e.shortcut),"aria-disabled":e.disabled?`true`:void 0,onClick:e.disabled?void 0:e.onClick,children:[e.image?c(`img`,{src:e.image,alt:``}):i(e.icon,{size:16}),e.label,r(e.shortcut)]},e.key)})}export{u as default};

package/dist/components/AppDueDate.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{formatDate as r,toInstant as i}from"@webority/ui-elements/helpers";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s=864e5,c=330*6e4,l=14,u=e=>Math.floor((e+c)/s),d=(...e)=>e.filter(Boolean).join(` `);function f(c){let{date:f,soonDays:p,overdue:m=!1,overdueLabel:h,className:g=``,..._}=c;t(`AppDueDate`,_);let v=i(f);if(!Number.isFinite(v))return a(`wui-due-date`,{class:d(`wui-due-date`,`wui-due-date-empty`,g),...e(`AppDueDate`,c),..._,children:a(`time`,{children:`Not set`})});let y=u(v),b=new Date(y*s).toISOString().slice(0,10),x=y-u(Date.now());if(m){let t=r(v);return o(`wui-due-date`,{class:d(`wui-due-date`,`wui-due-date-danger`,g),title:`Overdue since ${t}`,...e(`AppDueDate`,c),..._,children:[a(n,{name:`danger`,size:l}),a(`time`,{dateTime:b,children:h||t})]})}if(Number.isFinite(p)&&x>=0&&x<=p){let t=x===1?`1 day left`:`${x} days left`;return a(`wui-due-date`,{class:d(`wui-due-date`,`wui-due-date-warning`,g),...e(`AppDueDate`,c),..._,children:a(`time`,{dateTime:b,children:t})})}return a(`wui-due-date`,{class:d(`wui-due-date`,g),...e(`AppDueDate`,c),..._,children:a(`time`,{dateTime:b,children:r(v)})})}export{f as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{formatDate as i,toInstant as a}from"@webority/ui-elements/helpers";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=864e5,l=330*6e4,u=14,d=[`days`,`due`],f=e=>Math.floor((e+l)/c),p=(...e)=>e.filter(Boolean).join(` `),m=(e,t)=>e===`due`?t===0?`Due today`:t===1?`Due tomorrow`:`Due in ${t} days`:t===1?`1 day left`:`${t} days left`;function h(l){let{date:h,soonDays:g,soonWording:_=`days`,icon:v=!1,overdue:y=!1,overdueLabel:b,className:x=``,...S}=l;n(`AppDueDate`,S),t(`AppDueDate`,`soonWording`,_,d);let C=a(h);if(!Number.isFinite(C))return o(`wui-due-date`,{class:p(`wui-due-date`,`wui-due-date-empty`,x),...e(`AppDueDate`,l),...S,children:o(`time`,{children:`Not set`})});let w=f(C),T=new Date(w*c).toISOString().slice(0,10),E=w-f(Date.now()),D=v?o(r,{name:`calendar`,size:u}):null;if(y){let t=i(C);return s(`wui-due-date`,{class:p(`wui-due-date`,`wui-due-date-danger`,x),title:`Overdue since ${t}`,...e(`AppDueDate`,l),...S,children:[o(r,{name:`danger`,size:u}),D,o(`time`,{dateTime:T,children:b||t})]})}return Number.isFinite(g)&&E>=0&&E<=g?s(`wui-due-date`,{class:p(`wui-due-date`,`wui-due-date-warning`,x),...e(`AppDueDate`,l),...S,children:[D,o(`time`,{dateTime:T,children:m(_,E)})]}):s(`wui-due-date`,{class:p(`wui-due-date`,x),...e(`AppDueDate`,l),...S,children:[D,o(`time`,{dateTime:T,children:i(C)})]})}export{h as default};

package/dist/components/AppPageHeader.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{BreadcrumbTrailContext as i}from"./AppBreadcrumbs.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`sm`,`md`,`lg`,`bar`],f=[`start`,`center`],p=[`inline`,`below`],m=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`];function h(h){let{title:g,as:_=`h1`,subtitle:v,eyebrow:y,icon:b,tone:x=`primary`,status:S,breadcrumbs:C,actions:w,views:T,tools:E,meta:D,metaPlacement:O=`inline`,bulkFor:k,bulk:A,size:j=`md`,align:M=`start`,divider:N=!1,sticky:P=!1,className:F=``,...I}=h;n(`AppPageHeader`,I),t(`AppPageHeader`,`tone`,x,u),t(`AppPageHeader`,`size`,j,d),t(`AppPageHeader`,`align`,M,f),t(`AppPageHeader`,`as`,_,m),t(`AppPageHeader`,`metaPlacement`,O,p);let L=m.includes(_)?_:`h1`,R=j===`bar`,z=R&&O===`below`,B=[`page-header`,j&&j!==`md`?`page-header-${j}`:``,M===`center`?`page-header-center`:``,N?`page-header-divider`:``,P?`page-header-sticky`:``,x&&x!==`primary`?`tone-${x}`:``,z?`wui-page-header-meta-below`:``,F].filter(Boolean).join(` `),[V,H]=s(0),U=R?k:void 0;if(o(()=>{if(!U)return;document.getElementById(U)?.setAttribute(`data-wui-bulk-in-bar`,``);let e=e=>{typeof e.detail?.selected==`number`&&document.getElementById(U)?.contains(e.target)&&H(e.detail.selected)};return document.addEventListener(`selectionchange`,e),()=>{document.removeEventListener(`selectionchange`,e),document.getElementById(U)?.removeAttribute(`data-wui-bulk-in-bar`)}},[U]),R)return l(`header`,{className:B,"data-wui-page-header-bar":``,"data-wui-bulk-for":k||void 0,...e(`AppPageHeader`,h),...I,children:[C!=null&&c(i.Provider,{value:!0,children:c(`div`,{className:`page-header-bar-crumbs`,children:C})}),g!=null&&c(L,{className:`page-title`,children:g}),S!=null&&c(`span`,{className:`page-status`,children:S}),T!=null&&c(`div`,{className:`page-header-bar-views`,"data-wui-bar-swap":``,hidden:k&&V>0?!0:void 0,children:T}),c(`span`,{className:`page-header-bar-spacer`,"aria-hidden":`true`}),D!=null&&!z&&c(`div`,{className:`page-header-bar-meta`,children:D}),E!=null&&c(`div`,{className:`page-header-bar-tools`,"data-wui-bar-swap":``,hidden:k&&V>0?!0:void 0,children:E}),k?l(`div`,{className:`page-header-bar-bulk`,"data-wui-bar-bulk":``,hidden:V===0||void 0,children:[c(`span`,{className:`page-header-bar-bulk-count`,"aria-live":`polite`,children:V>0?`${a(V,{decimals:0})} selected`:``}),A]}):null,w!=null&&c(`div`,{className:`page-actions`,children:w}),D!=null&&z&&c(`div`,{className:`page-header-bar-meta`,children:D})]});let W=b==null?null:typeof b==`string`?c(r,{name:b,size:20}):b;return l(`div`,{className:B,...e(`AppPageHeader`,h),...I,children:[C!=null&&c(`div`,{className:`page-breadcrumbs`,children:C}),l(`div`,{className:`page-header-bar`,children:[l(`div`,{className:`page-header-lead`,children:[W!=null&&c(`span`,{className:`page-header-icon`,children:W}),l(`div`,{className:`page-header-titles`,children:[y!=null&&c(`div`,{className:`page-eyebrow`,children:y}),l(`div`,{className:`page-titlebar`,children:[g!=null&&c(L,{className:`page-title`,children:g}),S!=null&&c(`span`,{className:`page-status`,children:S})]}),v!=null&&c(`div`,{className:`page-subtitle`,children:v})]})]}),w!=null&&c(`div`,{className:`page-actions`,children:w})]})]})}export{h as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import r from"./AppIcon.js";import{BreadcrumbTrailContext as i}from"./AppBreadcrumbs.js";import{formatNumber as a}from"@webority/ui-elements/helpers";import{useEffect as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`sm`,`md`,`lg`,`bar`],f=[`start`,`center`],p=[`inline`,`below`],m=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`];function h(h){let{title:g,titleSlot:_,as:v=`h1`,subtitle:y,eyebrow:b,icon:x,tone:S=`primary`,status:C,breadcrumbs:w,actions:T,views:E,tools:D,meta:O,metaPlacement:k=`inline`,bulkFor:A,bulk:j,size:M=`md`,align:N=`start`,divider:P=!1,sticky:F=!1,className:I=``,...L}=h;n(`AppPageHeader`,L),t(`AppPageHeader`,`tone`,S,u),t(`AppPageHeader`,`size`,M,d),t(`AppPageHeader`,`align`,N,f),t(`AppPageHeader`,`as`,v,m),t(`AppPageHeader`,`metaPlacement`,k,p);let R=m.includes(v)?v:`h1`,z=M===`bar`,B=z&&k===`below`,V=[`page-header`,M&&M!==`md`?`page-header-${M}`:``,N===`center`?`page-header-center`:``,P?`page-header-divider`:``,F?`page-header-sticky`:``,S&&S!==`primary`?`tone-${S}`:``,B?`wui-page-header-meta-below`:``,I].filter(Boolean).join(` `),[H,U]=s(0),W=z?A:void 0;o(()=>{if(!W)return;document.getElementById(W)?.setAttribute(`data-wui-bulk-in-bar`,``);let e=e=>{typeof e.detail?.selected==`number`&&document.getElementById(W)?.contains(e.target)&&U(e.detail.selected)};return document.addEventListener(`selectionchange`,e),()=>{document.removeEventListener(`selectionchange`,e),document.getElementById(W)?.removeAttribute(`data-wui-bulk-in-bar`)}},[W]);let G=g!=null||_!=null?c(R,{className:_==null?`page-title`:`page-title wui-page-title-slot`,"aria-label":_!=null&&typeof g==`string`&&g!==``?g:void 0,children:_??g}):null;if(z)return l(`header`,{className:V,"data-wui-page-header-bar":``,"data-wui-bulk-for":A||void 0,...e(`AppPageHeader`,h),...L,children:[w!=null&&c(i.Provider,{value:!0,children:c(`div`,{className:`page-header-bar-crumbs`,children:w})}),G,C!=null&&c(`span`,{className:`page-status`,children:C}),E!=null&&c(`div`,{className:`page-header-bar-views`,"data-wui-bar-swap":``,hidden:A&&H>0?!0:void 0,children:E}),c(`span`,{className:`page-header-bar-spacer`,"aria-hidden":`true`}),O!=null&&!B&&c(`div`,{className:`page-header-bar-meta`,children:O}),D!=null&&c(`div`,{className:`page-header-bar-tools`,"data-wui-bar-swap":``,hidden:A&&H>0?!0:void 0,children:D}),A?l(`div`,{className:`page-header-bar-bulk`,"data-wui-bar-bulk":``,hidden:H===0||void 0,children:[c(`span`,{className:`page-header-bar-bulk-count`,"aria-live":`polite`,children:H>0?`${a(H,{decimals:0})} selected`:``}),j]}):null,T!=null&&c(`div`,{className:`page-actions`,children:T}),O!=null&&B&&c(`div`,{className:`page-header-bar-meta`,children:O})]});let K=x==null?null:typeof x==`string`?c(r,{name:x,size:20}):x;return l(`div`,{className:V,...e(`AppPageHeader`,h),...L,children:[w!=null&&c(`div`,{className:`page-breadcrumbs`,children:w}),l(`div`,{className:`page-header-bar`,children:[l(`div`,{className:`page-header-lead`,children:[K!=null&&c(`span`,{className:`page-header-icon`,children:K}),l(`div`,{className:`page-header-titles`,children:[b!=null&&c(`div`,{className:`page-eyebrow`,children:b}),l(`div`,{className:`page-titlebar`,children:[G,C!=null&&c(`span`,{className:`page-status`,children:C})]}),y!=null&&c(`div`,{className:`page-subtitle`,children:y})]})]}),T!=null&&c(`div`,{className:`page-actions`,children:T})]})]})}export{h as default};

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.101.5"
+    "version": "0.102.0"
   },
   "components": [
     {

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

@@ -12,18 +12,26 @@ import "@webority/ui-elements/elements/context-menu";
  * it, and use `target="tbody tr"`). The browser's own menu stays on inside inputs, textareas
  * and contenteditable content, with `disabled`, and on Shift+right-click.
  *
+ * A row with `items` opens a side menu. It opens on click, Enter, Space or ArrowRight; with
+ * `searchable` it holds a filter field that narrows its rows as the user types.
+ *
  * NOTE: the exported component must stay the FIRST destructured function in this file —
  * the parity check reads the first signature it finds as the component's public props.
  *
  * @param {object} props
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, divider?: boolean }[]} [props.items]
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, hint?: string, shortcut?: string, checked?: boolean, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, divider?: boolean, searchable?: boolean, searchPlaceholder?: string, items?: object[] }[]} [props.items]
+ *   A row's `shortcut` is the key that runs it, such as "E": a key chip at the row's end and `aria-keyshortcuts`. The page binds the key itself.
  * @param {string} [props.target]
+ * @param {string} [props.trigger] A CSS selector inside the region; a click or Enter on a match opens the menu under it.
  * @param {import('react').ReactNode} [props.children] The region to attach to, when `target` is not used.
  * @param {string} [props.ariaLabel]
  * @param {boolean} [props.disabled]
  * @param {boolean} [props.open] Shows the menu open at the top-left corner of its region, for a design preview or a controlled caller.
  * @param {(detail: { region: Element, origin: Element, x: number, y: number }) => void} [props.onOpen]
  *   Called as the menu opens. `region` is the matched target, `origin` the element the user acted on inside it.
+ * @param {(event: CustomEvent) => void} [props.onBeforeOpen]
+ *   Called before the menu shows, with the cancelable event; `event.detail` holds `region`, `origin` and `trigger`.
+ *   Calling `event.preventDefault()` keeps the menu closed.
  * @param {string} [props.menuClassName]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  */
@@ -37,14 +45,22 @@ export default function AppContextMenu(props: {
         label?: string;
         icon?: string | import('react').ReactNode;
         image?: string;
+        hint?: string;
+        shortcut?: string;
+        checked?: boolean;
         to?: string;
         onClick?: () => void;
         danger?: boolean;
         disabled?: boolean;
         divider?: boolean;
+        searchable?: boolean;
+        searchPlaceholder?: string;
+        items?: object[];
     }[];
     /** CSS selector of the elements the menu serves. Without it, the menu serves `children`. */
     target?: string;
+    /** A CSS selector inside the region: a click or Enter on a match opens the menu under it. */
+    trigger?: string;
     children?: import('react').ReactNode;
     /**
      * Accessible name of the menu.
@@ -64,6 +80,7 @@ export default function AppContextMenu(props: {
         x: number;
         y: number;
     }) => void;
+    onBeforeOpen?: (event: CustomEvent) => void;
     /**
      * Extra classes on the menu panel.
      * @default ""

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

@@ -1,11 +1,15 @@
 /**
  * A due date that never wraps. An overdue date shows in danger with its title "Overdue since dd-MMM-yyyy"
- * and the danger glyph; a date within `soonDays` shows "N days left" in warning; no date shows the muted "Not set".
+ * and the danger glyph; a date within `soonDays` shows "N days left" in warning, or "Due today", "Due tomorrow"
+ * and "Due in N days" with `soonWording="due"`; no date shows the muted "Not set". `icon` draws the calendar
+ * glyph before the date in every dated state.
  * Dates are read in India Standard Time. The Razor `<app-due-date>` renders the same markup and classes.
  *
  * @param {object} props
  * @param {string|number|Date} [props.date]
  * @param {number} [props.soonDays]
+ * @param {"days"|"due"} [props.soonWording] `days` (default) reads "N days left"; `due` reads "Due today", "Due tomorrow" or "Due in N days".
+ * @param {boolean} [props.icon] Draws the calendar glyph before the date text.
  * @param {boolean} [props.overdue]
  * @param {string} [props.overdueLabel]
  * @param {string} [props.className]
@@ -15,6 +19,16 @@ export default function AppDueDate(props: {
     date?: string | number | Date;
     /** Within this many days of the date, the text reads "N days left" in warning. */
     soonDays?: number;
+    /**
+     * Within soonDays, "days" reads "N days left"; "due" reads "Due today", "Due tomorrow" or "Due in N days".
+     * @default "days"
+     */
+    soonWording?: "days" | "due";
+    /**
+     * Draws a calendar glyph before the date text in every dated state.
+     * @default false
+     */
+    icon?: boolean;
     /**
      * Set by the caller from its own rule. Done items are never overdue.
      * @default false

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

@@ -18,6 +18,7 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.title
+ * @param {import('react').ReactNode} [props.titleSlot] Rendered inside the heading in place of `title`, for a title with a badge or a link in it; the heading is then named by `title`.
  * @param {"h1"|"h2"|"h3"|"h4"|"h5"|"h6"} [props.as]
  * @param {import('react').ReactNode} [props.subtitle]
  * @param {import('react').ReactNode} [props.eyebrow]
@@ -41,6 +42,8 @@
 export default function AppPageHeader(props: {
     /** Rendered as the screen heading. */
     title: import('react').ReactNode;
+    /** Rendered inside the heading in place of title, for a title with a badge or a link in it. The heading is then named by title. */
+    titleSlot?: import('react').ReactNode;
     /**
      * The heading element for the title. Keep one h1 per page.
      * @default "h1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.101.5",
+  "version": "0.102.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -29,8 +29,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.101.5",
-    "@webority/ui-elements": "0.101.5"
+    "@webority/theme": "0.102.0",
+    "@webority/ui-elements": "0.102.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.28.0",
@@ -56,8 +56,8 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/canvas-kit": "0.101.5",
-    "@webority/tokens": "0.101.5"
+    "@webority/canvas-kit": "0.102.0",
+    "@webority/tokens": "0.102.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json && node ../../scripts/inject-meta-docs.mjs && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit && node ../canvas-kit/dist/cli.js guidance --config canvas-kit.json --out dist/guidance.json && node ../../scripts/sync-rcl-assets.mjs analytics",