@webority/ui-react 0.94.1 → 0.95.0

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.94.1"
+    "version": "0.95.0"
   },
   "rendererProtocolVersion": 7,
   "platform": "Web",
@@ -6247,6 +6247,12 @@
           "required": false,
           "description": "A column key: rows gather under a header row per value of it, in the order each value first appears, each header collapsing its rows and showing their count."
         },
+        {
+          "name": "headerTone",
+          "type": "string",
+          "required": false,
+          "description": "The column header band's colour, a CSS colour or a $color token the Canvas renderer resolves."
+        },
         {
           "name": "hiddenColumns",
           "type": "array",
@@ -6266,6 +6272,12 @@
           "required": false,
           "description": "Caps the table's height; the body scrolls inside it with the header pinned. Without it there is no scroll box for the header to stick to."
         },
+        {
+          "name": "pad",
+          "type": "number",
+          "required": false,
+          "description": "The inset around the table, in px; the wrapper's 20px is the default and flush wins over it."
+        },
         {
           "name": "pagination",
           "type": "object",
@@ -8813,11 +8825,39 @@
           "description": "side puts the title and description in a column beside the fields from lg up; below that it stacks.",
           "default": "stacked"
         },
+        {
+          "name": "rule",
+          "type": "enum",
+          "enum": [
+            "line",
+            "none"
+          ],
+          "required": false,
+          "description": "none drops the hairline between consecutive sections and keeps the space.",
+          "default": "line"
+        },
         {
           "name": "title",
           "type": "node",
           "required": false,
           "description": "Section heading (h3)."
+        },
+        {
+          "name": "titleFont",
+          "type": "enum",
+          "enum": [
+            "body",
+            "display"
+          ],
+          "required": false,
+          "description": "display sets the title in the display face; body keeps the text face.",
+          "default": "body"
+        },
+        {
+          "name": "titleSize",
+          "type": "number",
+          "required": false,
+          "description": "The title's font size in px; unset keeps the theme's 15px."
         }
       ],
       "itemsTakeAction": [],
@@ -16445,6 +16485,12 @@
           "required": false,
           "description": "A short label above the heading."
         },
+        {
+          "name": "inset",
+          "type": "number",
+          "required": false,
+          "description": "The section's side inset in px; unset keeps the container padding."
+        },
         {
           "name": "items",
           "type": "array",
@@ -16507,6 +16553,17 @@
           "required": true,
           "description": "The section's heading."
         },
+        {
+          "name": "titleFont",
+          "type": "enum",
+          "enum": [
+            "body",
+            "display"
+          ],
+          "required": false,
+          "description": "The heading's face: display for the brand face, body for the text face.",
+          "default": "display"
+        },
         {
           "name": "variant",
           "type": "enum",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.94.1",
+  "version": "0.95.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 7,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.94.1"
+    "version": "0.95.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "9c6f939afa496593a26f60024c23a59a8c606c525c20087897c51294002ef86a",
-      "bytes": 834742
+      "sha256": "6d67f97e3c91f45b4fb41be886bbf585a291578ea21385067c5339523f7f7320",
+      "bytes": 836515
     },
     "kit.js": {
-      "sha256": "435ea4d05f3d5ff31fc5d4c21d6c5c3f0af91250a6c6f02ed34a15b98451e5c5",
-      "bytes": 10845504
+      "sha256": "092a8160e2557bdb8d82c61d1a2729d06b629ce83d3c070cec50f84eef744e9b",
+      "bytes": 10847993
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppDataTable.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{AppSkeletonRows as a}from"./AppSkeleton.js";import o from"./AppTablePagination.js";import{attachRowDrag as s,attachScrollEdges as c,syncTargets as ee}from"@webority/ui-elements/helpers";import{Children as l,Fragment as te,useEffect as u,useLayoutEffect as d,useMemo as ne,useRef as f,useState as p}from"react";import{Fragment as re,jsx as m,jsxs as h}from"react/jsx-runtime";import{COLUMN_MAX_WIDTH as ie,COLUMN_MIN_WIDTH as ae,DATA_TABLE_TEXT as oe,PIN_AT_VAR as se,PIN_SIDES as ce,ROW_HEIGHTS as le,ROW_MOVE_LIMIT as ue,ROW_SAVE_ERROR_CLASS as de,groupCount as fe,groupItems as pe,measureRows as me,pinAtValue as he,pinClasses as ge,planPins as _e,playRowMoves as ve,rowOrderChanged as ye,saveOutcomeText as be,settledRows as xe,virtualRange as Se}from"@webority/ui-elements/elements/data-table";var Ce=[`comfortable`,`cozy`,`compact`],we=[`auto`,`fixed`],g=()=>{try{return process.env.NODE_ENV!==`production`}catch{return!0}},_=new Set;function v(e,n){_.has(e)||!g()||(_.add(e),t(`[@webority/ui-react] <AppDataTable> ${n}`))}var Te=100,Ee=e=>e.id,De=(e,t,n)=>{let r=!!t?.(e),i=r?``:n?.(e)||``;return{state:r?`saving`:i?`error`:null,message:i}};function Oe(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function ke(e){return e==null||e===``?`-`:Array.isArray(e)?l.toArray(e):typeof e==`boolean`?String(e):e}function Ae(e){if(!e||!(e.total>0))return!1;let t=e.pageSizes?.length?e.pageSizes:[e.pageSize];return e.total>Math.min(...t)}function y(t){let{columns:l,rows:g,rowKey:_=Ee,sort:y,onSort:je,loading:b=!1,skeletonRows:Me=5,empty:Ne=`No records found.`,emptyFiltered:Pe,sourceCount:Fe,rowActions:x,rowActionsLabel:Ie,pagination:S,ariaLabel:Le,className:Re=``,wrapperClassName:ze=``,selectable:C=!1,selectedIds:w,isRowSelectable:T,onToggleRow:E,onToggleAll:Be,onSelectRange:Ve,renderExpanded:He,density:D=`comfortable`,tableLayout:Ue=`auto`,striped:We=!1,flush:Ge=!1,rowDrag:O=!1,maxHeight:k,stickyFirstColumn:Ke=!1,stickyActions:qe=!1,stackOnMobile:A=!1,hiddenColumns:Je,rowStatus:Ye,rowHref:j,onRowClick:Xe,activeRowKey:Ze,resizableColumns:M=!1,viewKey:Qe,groupBy:N,groupLabel:$e,virtual:P=!1,rowSaving:F,rowSaveError:I,...et}=t;r(`AppDataTable`,et);let tt=Je?.length?new Set(Je):null;l=tt?l.filter(e=>!(e.hideable&&tt.has(e.key))):l,n(`AppDataTable`,`density`,D,Ce),n(`AppDataTable`,`tableLayout`,Ue,we);for(let e of l)n(`AppDataTable`,`column.pin`,e.pin,ce);let nt=[`table table-ledger`,D===`cozy`||D===`compact`?`wui-table-${D}`:``,We?`wui-table-striped`:``,Ke?`wui-table-sticky-first`:``,qe?`wui-table-sticky-actions`:``,A?`wui-table-stack`:``,Re].filter(Boolean).join(` `),L=typeof He==`function`,[rt,it]=p(()=>new Set),at=e=>it(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),ot=l.some(e=>typeof e.footer==`function`),R=typeof j==`function`||typeof Xe==`function`,st=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),ct=(e,t)=>{if(st(t)||(Xe&&Xe(e),!j))return;let n=j(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},z=k!==void 0,lt=[`table-wrap`,z?`wui-table-scroll`:``,Ge?`wui-table-flush`:``,ze].filter(Boolean).join(` `),ut=z?{maxHeight:k}:void 0,B=Math.max(1,l.length+ +!!x+ +!!C+ +!!L),dt=l.some(e=>e.pin===`start`||e.pin===`end`),V=dt||M||!!N||P,H=+!!L+ +!!C,ft=dt?_e([...L?[`lead`]:[],...C?[`lead`]:[],...l.map(e=>e.pin===`start`||e.pin===`end`?e.pin:null),...x?[null]:[]]):[],U=(e,t=``)=>{let n=ft[e];return n?{className:`${t.trim()} ${ge(n)}`.trim(),style:{[se]:he(n.side,n.ordinal)}}:{className:t,style:void 0}},pt=(e,t)=>ft[e]?{...t,...U(e).style}:t,mt=l.length-1+ +!!x;Qe&&!M&&v(`view-key`,"`viewKey` remembers resized widths: add `resizableColumns`."),P&&!z&&v(`virtual-height`,"`virtual` needs `maxHeight`: without a scroll box every row renders."),P&&(L||A)&&v(`virtual-shape`,"`virtual` takes rows of one height, so it is off with `renderExpanded` or `stackOnMobile`."),!P&&g?.length>500&&v(`rows-without-virtual`,`renders more than 500 rows without virtual: add virtual with maxHeight, or page the data.`);let W=P&&z&&!L&&!A&&!b&&g?.length>0,G=(e,t)=>!T||!!T(e,t),ht=C&&g?g.reduce((e,t,n)=>e+ +!!G(t,n),0):0,K=C&&g?g.reduce((e,t,n)=>e+(G(t,n)&&w?.has(_(t,n))?1:0),0):0,gt=ht>0&&K===ht,_t=K>0&&!gt,vt=e=>{e&&(e.indeterminate=_t)},yt=f(null),bt=(e,t)=>{let n=yt.current;yt.current=e;let r=t&&n!==null?g.findIndex((e,t)=>_(e,t)===n):-1,i=g.findIndex((t,n)=>_(t,n)===e);if(r<0||i<0||r===i){E?.(e);return}let a=!w?.has(e),o=Math.min(r,i),s=g.slice(o,Math.max(r,i)+1).map((e,t)=>[e,o+t]).filter(([e,t])=>G(e,t)).map(([e,t])=>_(e,t)).filter(e=>(w?.has(e)||!1)!==a);if(Ve)Ve(s,a);else for(let e of s)E?.(e)},xt=e=>{if(!T){Be?.(e);return}(g||[]).forEach((t,n)=>{let r=_(t,n);G(t,n)&&(w?.has(r)||!1)!==e&&E?.(r)})},[St,Ct]=p(()=>new Set),wt=e=>Ct(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),q=ne(()=>{let e=(g||[]).map((e,t)=>({row:e,i:t}));return N?pe(e,({row:e})=>String(e[N]??``)).flatMap(e=>[{group:e,open:!St.has(e.key)},...St.has(e.key)?[]:e.items]):e},[g,N,St]),J=f(null),Tt=f(null);u(()=>{let e=J.current;if(!e)return;let t=e=>{let t=e.target.closest?.(`.u-name`);t&&!t.title&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)&&(t.title=t.textContent.trim())},n=e=>{let t=e.target.closest?.(`tbody > tr[aria-rowindex]`)?.getAttribute(`aria-rowindex`);Tt.current=t?Number(t)-2:null},r=t=>{e.contains(t.relatedTarget)||(Tt.current=null)};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t),e.addEventListener(`focusin`,n),e.addEventListener(`focusout`,r);let i=c(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),e.removeEventListener(`focusin`,n),e.removeEventListener(`focusout`,r),i()}},[V]),u(()=>{if(!O||!J.current)return;let e=s(J.current);return ee(document),e},[O,V]);let Et=f(!1);u(()=>{!Et.current&&(Et.current=!0,K===0)||J.current?.querySelector(`table`)?.dispatchEvent(new CustomEvent(`selectionchange`,{bubbles:!0,detail:{selected:K,total:g?.length??0,keys:g?g.flatMap((e,t)=>{let n=_(e,t);return G(e,t)&&w?.has(n)?[String(n)]:[]}):[]}}))},[C,K]);let[Dt,Ot]=p({top:0,height:0}),[Y,kt]=p(le[D]??le.comfortable);u(()=>{let e=J.current;if(!W||!e)return;let t=0,n=()=>{t=0;let n=e.querySelector(`:scope > table > thead`)?.getBoundingClientRect().height||0,r={top:Math.max(0,e.scrollTop-n),height:e.clientHeight};Ot(e=>e.top===r.top&&e.height===r.height?e:r)},r=()=>{t||=requestAnimationFrame(n)};e.addEventListener(`scroll`,r,{passive:!0});let i=typeof ResizeObserver<`u`?new ResizeObserver(r):null;return i?.observe(e),n(),()=>{e.removeEventListener(`scroll`,r),i?.disconnect(),t&&cancelAnimationFrame(t)}},[W,V]),d(()=>{if(!W)return;let e=(J.current?.querySelector(`:scope > table > tbody > tr:not(.wui-virtual-spacer, .wui-group-row)`))?.getBoundingClientRect().height;e>0&&Math.abs(e-Y)>.5&&kt(e)},[D,g?.length,P,W]);let X={start:0,end:q.length,before:0,after:0};if(W){X=Se({scrollTop:Dt.top,viewport:Dt.height||Number.parseFloat(k)||0,rowHeight:Y,count:q.length});let e=Tt.current;e!==null&&e>=0&&e<q.length&&(e<X.start&&X.start-e<=Te&&(X={...X,start:e,before:e*Y}),e>=X.end&&e-X.end<Te&&(X={...X,end:e+1,after:(q.length-e-1)*Y}))}let At=f(null),Z=f(null),jt=f(null),Mt=!P&&!b&&g?.length>0&&g.length<=ue;d(()=>{let e=At.current;if(!Mt||!e){Z.current=null,jt.current=null;return}let t=g.map((e,t)=>_(e,t));ye(jt.current,t)&&ve(e.rows,Z.current),Z.current=me(e.rows),jt.current=t});let Nt=typeof F==`function`||typeof I==`function`,Pt=f(null),Ft=f(null);u(()=>{if(!Nt){Ft.current=null;return}let e=l[0]?.key,t=new Map;(g||[]).forEach((n,r)=>{let i=e===void 0?void 0:n[e],a=typeof i==`string`||typeof i==`number`?String(i):``;t.set(_(n,r),{...De(n,F,I),label:a})});let n=be(xe(Ft.current,t));Ft.current=t,n&&Pt.current&&(Pt.current.textContent=n)},[g,F,I,_]);let It=Pe!==void 0&&(Fe===void 0||Fe>0)?Pe:Ne,Lt=({group:e,open:t},n)=>{let r=e.items[0].row[N],a=e.items.map(e=>e.row);return m(`tr`,{className:`wui-group-row`,"data-group-key":e.key,"aria-rowindex":W?n+2:void 0,children:m(`th`,{className:`wui-group-cell`,scope:`rowgroup`,colSpan:B,children:h(`button`,{type:`button`,className:`wui-group-toggle`,"aria-expanded":t,onClick:()=>wt(e.key),children:[m(i,{name:`chevron-down`,size:16}),m(`span`,{className:`wui-group-label`,children:$e?$e(r,a):ke(r)}),m(`span`,{className:`wui-group-count`,"aria-hidden":`true`,children:fe(e.items.length)}),m(`span`,{className:`visually-hidden wui-group-rows`,children:`, ${oe.rows(e.items.length)}`})]})})},`group:${e.key}`)},Rt=({row:e,i:t},n)=>{let r=_(e,t),a=L&&rt.has(r),o=Ze!=null&&String(Ze)===String(r),s=String(r).replace(/[^a-z0-9]/gi,`_`),c=U(0,`wui-expand-cell`),ee=U(+!!L,`wui-select-cell`),u=Nt?De(e,F,I):null,d=G(e,t);return h(te,{children:[h(`tr`,{className:[C&&d&&w?.has(r)?`is-selected`:``,R?`wui-row-link`:``,o?`wui-row-active`:``].filter(Boolean).join(` `)||void 0,"aria-current":o?`true`:void 0,"aria-rowindex":W?n+2:void 0,"aria-busy":u?.state===`saving`?`true`:void 0,"data-wui-save-state":u?.state||void 0,"data-status":Ye?.(e)||void 0,"data-href":j?.(e)||void 0,"data-row-key":O?String(r):void 0,tabIndex:R?0:void 0,onClick:R?t=>ct(e,t):void 0,onAuxClick:R&&j?t=>t.button===1&&ct(e,t):void 0,onKeyDown:R?t=>{t.key===`Enter`&&t.target===t.currentTarget&&ct(e,t)}:void 0,children:[L&&m(`td`,{className:c.className,style:c.style,children:m(`button`,{type:`button`,className:`wui-expand-toggle${a?` is-open`:``}`,"aria-expanded":a,"aria-controls":a?`${s}-expanded`:void 0,"aria-label":a?`Collapse row`:`Expand row`,onClick:()=>at(r),children:m(i,{name:`chevron-down`,size:16})})}),C&&m(`td`,{className:ee.className,style:ee.style,children:m(`input`,{type:`checkbox`,className:`wui-check`,checked:d&&(w?.has(r)||!1),disabled:!d,onChange:e=>bt(r,e.nativeEvent.shiftKey),onMouseDown:e=>{e.shiftKey&&e.preventDefault()},"aria-label":`Select row`})}),l.map((t,n)=>h(`td`,{className:U(H+n,(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+Oe(t.align)+(t.cellClassName?` ${t.cellClassName}`:``)).className,style:pt(H+n,t.cellStyle),"data-label":A&&typeof t.label==`string`?t.label:void 0,children:[t.render?t.render(e):ke(e[t.key]),n===0&&u?.state===`error`&&m(`span`,{className:de,children:u.message})]},t.key)),x&&m(`td`,{children:m(`div`,{className:`u-row-actions`,children:x(e)})})]}),a&&m(`tr`,{className:`wui-row-expanded`,children:m(`td`,{id:`${s}-expanded`,colSpan:B,children:He(e)})})]},r)},zt=(e,t)=>e.group?Lt(e,t):Rt(e,t),Bt=(e,t)=>W?m(`tr`,{className:`wui-virtual-spacer`,"aria-hidden":`true`,hidden:t===0,children:m(`td`,{colSpan:B,style:{height:t}})},e):null,Q=U(0,`wui-expand-cell`),$=U(+!!L,`wui-select-cell`);return h(re,{children:[h(V?`wui-data-table`:`div`,{ref:J,...V?{class:lt,resizable:M?``:void 0,"view-key":Qe||void 0,"data-wui-row-drag":O?``:void 0}:{className:lt,"data-wui-row-drag":O?``:void 0},style:ut,tabIndex:0,...e(`AppDataTable`,t),...et,children:[h(`table`,{className:nt,"aria-label":Le,"aria-rowcount":W?q.length+1:void 0,style:Ue===`fixed`?{tableLayout:`fixed`}:void 0,children:[m(`thead`,{children:h(`tr`,{"aria-rowindex":W?1:void 0,children:[L&&m(`th`,{className:Q.className,style:Q.style,children:m(`span`,{className:`visually-hidden`,children:`Expand`})}),C&&m(`th`,{className:$.className,style:$.style,children:m(`input`,{ref:vt,type:`checkbox`,className:`wui-check`,checked:gt,onChange:e=>xt(e.target.checked),"aria-label":`Select all rows`})}),l.map((e,t)=>{let n=!!(e.sortable&&je),r=y&&y.key===e.key,a=e.align===`num`||e.align===`end`,o=n&&m(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:m(i,{name:`chevrons-up-down`,size:14})}),s=M&&t!==mt,c=e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0;return h(`th`,{className:U(H+t,(n?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+(e.grow?`wui-col-grow `:``)+(s?`wui-col-resizable `:``)+Oe(e.align)).className,style:pt(H+t,c),"data-key":V?e.key:void 0,"aria-label":s&&typeof e.label==`string`?e.label:void 0,"data-pin":e.pin===`start`||e.pin===`end`?e.pin:void 0,tabIndex:n?0:void 0,"aria-sort":r?y.dir===`asc`?`ascending`:`descending`:n?`none`:void 0,onClick:n?()=>je(e.key):void 0,onKeyDown:n?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),je(e.key))}:void 0,children:[a&&o,e.label,!a&&o,s&&m(`span`,{className:`wui-col-resize`,role:`separator`,"aria-orientation":`vertical`,"aria-valuemin":ae,"aria-valuemax":ie,tabIndex:0,"aria-label":oe.resize(typeof e.label==`string`?e.label:e.key)})]},e.key)}),x&&(Ie?m(`th`,{className:`wui-cell-end`,children:Ie}):m(`th`,{className:`wui-cell-end`,children:m(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),m(`tbody`,{ref:At,children:b?m(a,{rows:Me,cols:B}):g?.length?h(re,{children:[Bt(`before`,X.before),q.slice(X.start,X.end).map((e,t)=>zt(e,X.start+t)),Bt(`after`,X.after)]}):null}),ot&&!b&&g?.length>0&&m(`tfoot`,{children:h(`tr`,{children:[L&&m(`td`,{className:Q.className,style:Q.style}),C&&m(`td`,{className:$.className,style:$.style}),l.map((e,t)=>m(`td`,{className:U(H+t,(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+Oe(e.align)).className,style:pt(H+t,void 0),children:e.footer?e.footer(g):null},e.key)),x&&m(`td`,{})]})})]}),!b&&!g?.length&&m(`div`,{className:`tbl-empty-block`,children:typeof It==`string`?m(`div`,{className:`tbl-empty-plain`,children:It}):It})]}),Ae(S)&&m(o,{page:S.page,totalPages:S.totalPages,pageSize:S.pageSize,onPageChange:S.setPage,onPageSizeChange:S.setPageSize,pageSizes:S.pageSizes,mode:S.mode}),Nt&&m(`div`,{ref:Pt,className:`visually-hidden`,role:`status`,"aria-live":`polite`,"data-wui-table-status":``})]})}export{y as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import{devWarn as t}from"../lib/devWarn.js";import n from"./warnInvalidValue.js";import r from"./warnUnknownProps.js";import i from"./AppIcon.js";import{AppSkeletonRows as a}from"./AppSkeleton.js";import o from"./AppTablePagination.js";import{attachRowDrag as s,attachScrollEdges as c,syncTargets as l}from"@webority/ui-elements/helpers";import{Children as u,Fragment as ee,useEffect as d,useLayoutEffect as f,useMemo as te,useRef as p,useState as m}from"react";import{Fragment as ne,jsx as h,jsxs as g}from"react/jsx-runtime";import{COLUMN_MAX_WIDTH as re,COLUMN_MIN_WIDTH as ie,DATA_TABLE_TEXT as ae,PIN_AT_VAR as oe,PIN_SIDES as se,ROW_HEIGHTS as ce,ROW_MOVE_LIMIT as le,ROW_SAVE_ERROR_CLASS as ue,groupCount as de,groupItems as fe,measureRows as pe,pinAtValue as me,pinClasses as he,planPins as ge,playRowMoves as _e,rowOrderChanged as ve,saveOutcomeText as ye,settledRows as be,virtualRange as xe}from"@webority/ui-elements/elements/data-table";var Se=[`comfortable`,`cozy`,`compact`],Ce=[`auto`,`fixed`],_=()=>{try{return process.env.NODE_ENV!==`production`}catch{return!0}},v=new Set;function y(e,n){v.has(e)||!_()||(v.add(e),t(`[@webority/ui-react] <AppDataTable> ${n}`))}var we=100,Te=e=>e.id,Ee=(e,t,n)=>{let r=!!t?.(e),i=r?``:n?.(e)||``;return{state:r?`saving`:i?`error`:null,message:i}};function b(e){return e===`end`?`wui-cell-end`:e===`num`?`num`:e===`center`?`text-center`:``}function De(e){return e==null||e===``?`-`:Array.isArray(e)?u.toArray(e):typeof e==`boolean`?String(e):e}function Oe(e){if(!e||!(e.total>0))return!1;let t=e.pageSizes?.length?e.pageSizes:[e.pageSize];return e.total>Math.min(...t)}function x(t){let{columns:u,rows:_,rowKey:v=Te,sort:x,onSort:S,loading:C=!1,skeletonRows:ke=5,empty:Ae=`No records found.`,emptyFiltered:je,sourceCount:Me,rowActions:w,rowActionsLabel:Ne,pagination:T,ariaLabel:Pe,className:Fe=``,wrapperClassName:Ie=``,selectable:E=!1,selectedIds:D,isRowSelectable:O,onToggleRow:Le,onToggleAll:Re,onSelectRange:ze,renderExpanded:Be,density:k=`comfortable`,tableLayout:Ve=`auto`,striped:He=!1,flush:Ue=!1,pad:We,headerTone:Ge,rowDrag:A=!1,maxHeight:Ke,stickyFirstColumn:qe=!1,stickyActions:Je=!1,stackOnMobile:j=!1,hiddenColumns:Ye,rowStatus:Xe,rowHref:M,onRowClick:Ze,activeRowKey:Qe,resizableColumns:N=!1,viewKey:$e,groupBy:P,groupLabel:et,virtual:F=!1,rowSaving:I,rowSaveError:L,...tt}=t;r(`AppDataTable`,tt);let{style:nt,...rt}=tt,it=Ye?.length?new Set(Ye):null;u=it?u.filter(e=>!(e.hideable&&it.has(e.key))):u,n(`AppDataTable`,`density`,k,Se),n(`AppDataTable`,`tableLayout`,Ve,Ce);for(let e of u)n(`AppDataTable`,`column.pin`,e.pin,se);let at=[`table table-ledger`,k===`cozy`||k===`compact`?`wui-table-${k}`:``,He?`wui-table-striped`:``,qe?`wui-table-sticky-first`:``,Je?`wui-table-sticky-actions`:``,j?`wui-table-stack`:``,Fe].filter(Boolean).join(` `),R=typeof Be==`function`,[ot,st]=m(()=>new Set),ct=e=>st(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),lt=u.some(e=>typeof e.footer==`function`),z=typeof M==`function`||typeof Ze==`function`,ut=e=>!!e.target.closest(`a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown`),dt=(e,t)=>{if(ut(t)||(Ze&&Ze(e),!M))return;let n=M(e);n&&(t.ctrlKey||t.metaKey||t.button===1?window.open(n,`_blank`,`noopener`):window.location.assign(n))},B=Ke!==void 0,ft=[`table-wrap`,B?`wui-table-scroll`:``,Ue?`wui-table-flush`:``,Ie].filter(Boolean).join(` `),pt={maxHeight:B?Ke:void 0,"--wui-table-pad":We!=null&&!Ue?`${We}px`:void 0,"--wui-table-header-bg":Ge??void 0},mt=Object.values(pt).some(e=>e!==void 0)||nt!==void 0?{...pt,...nt}:void 0,V=Math.max(1,u.length+ +!!w+ +!!E+ +!!R),ht=u.some(e=>e.pin===`start`||e.pin===`end`),H=ht||N||!!P||F,U=+!!R+ +!!E,gt=ht?ge([...R?[`lead`]:[],...E?[`lead`]:[],...u.map(e=>e.pin===`start`||e.pin===`end`?e.pin:null),...w?[null]:[]]):[],W=(e,t=``)=>{let n=gt[e];return n?{className:`${t.trim()} ${he(n)}`.trim(),style:{[oe]:me(n.side,n.ordinal)}}:{className:t,style:void 0}},_t=(e,t)=>gt[e]?{...t,...W(e).style}:t,vt=u.length-1+ +!!w;$e&&!N&&y(`view-key`,"`viewKey` remembers resized widths: add `resizableColumns`."),F&&!B&&y(`virtual-height`,"`virtual` needs `maxHeight`: without a scroll box every row renders."),F&&(R||j)&&y(`virtual-shape`,"`virtual` takes rows of one height, so it is off with `renderExpanded` or `stackOnMobile`."),!F&&_?.length>500&&y(`rows-without-virtual`,`renders more than 500 rows without virtual: add virtual with maxHeight, or page the data.`);let G=F&&B&&!R&&!j&&!C&&_?.length>0,K=(e,t)=>!O||!!O(e,t),yt=E&&_?_.reduce((e,t,n)=>e+ +!!K(t,n),0):0,q=E&&_?_.reduce((e,t,n)=>e+(K(t,n)&&D?.has(v(t,n))?1:0),0):0,bt=yt>0&&q===yt,xt=q>0&&!bt,St=e=>{e&&(e.indeterminate=xt)},Ct=p(null),wt=(e,t)=>{let n=Ct.current;Ct.current=e;let r=t&&n!==null?_.findIndex((e,t)=>v(e,t)===n):-1,i=_.findIndex((t,n)=>v(t,n)===e);if(r<0||i<0||r===i){Le?.(e);return}let a=!D?.has(e),o=Math.min(r,i),s=_.slice(o,Math.max(r,i)+1).map((e,t)=>[e,o+t]).filter(([e,t])=>K(e,t)).map(([e,t])=>v(e,t)).filter(e=>(D?.has(e)||!1)!==a);if(ze)ze(s,a);else for(let e of s)Le?.(e)},Tt=e=>{if(!O){Re?.(e);return}(_||[]).forEach((t,n)=>{let r=v(t,n);K(t,n)&&(D?.has(r)||!1)!==e&&Le?.(r)})},[Et,Dt]=m(()=>new Set),Ot=e=>Dt(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n}),J=te(()=>{let e=(_||[]).map((e,t)=>({row:e,i:t}));return P?fe(e,({row:e})=>String(e[P]??``)).flatMap(e=>[{group:e,open:!Et.has(e.key)},...Et.has(e.key)?[]:e.items]):e},[_,P,Et]),Y=p(null),kt=p(null);d(()=>{let e=Y.current;if(!e)return;let t=e=>{let t=e.target.closest?.(`.u-name`);t&&!t.title&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)&&(t.title=t.textContent.trim())},n=e=>{let t=e.target.closest?.(`tbody > tr[aria-rowindex]`)?.getAttribute(`aria-rowindex`);kt.current=t?Number(t)-2:null},r=t=>{e.contains(t.relatedTarget)||(kt.current=null)};e.addEventListener(`mouseover`,t),e.addEventListener(`focusin`,t),e.addEventListener(`focusin`,n),e.addEventListener(`focusout`,r);let i=c(e);return()=>{e.removeEventListener(`mouseover`,t),e.removeEventListener(`focusin`,t),e.removeEventListener(`focusin`,n),e.removeEventListener(`focusout`,r),i()}},[H]),d(()=>{if(!A||!Y.current)return;let e=s(Y.current);return l(document),e},[A,H]);let At=p(!1);d(()=>{!At.current&&(At.current=!0,q===0)||Y.current?.querySelector(`table`)?.dispatchEvent(new CustomEvent(`selectionchange`,{bubbles:!0,detail:{selected:q,total:_?.length??0,keys:_?_.flatMap((e,t)=>{let n=v(e,t);return K(e,t)&&D?.has(n)?[String(n)]:[]}):[]}}))},[E,q]);let[jt,Mt]=m({top:0,height:0}),[X,Nt]=m(ce[k]??ce.comfortable);d(()=>{let e=Y.current;if(!G||!e)return;let t=0,n=()=>{t=0;let n=e.querySelector(`:scope > table > thead`)?.getBoundingClientRect().height||0,r={top:Math.max(0,e.scrollTop-n),height:e.clientHeight};Mt(e=>e.top===r.top&&e.height===r.height?e:r)},r=()=>{t||=requestAnimationFrame(n)};e.addEventListener(`scroll`,r,{passive:!0});let i=typeof ResizeObserver<`u`?new ResizeObserver(r):null;return i?.observe(e),n(),()=>{e.removeEventListener(`scroll`,r),i?.disconnect(),t&&cancelAnimationFrame(t)}},[G,H]),f(()=>{if(!G)return;let e=(Y.current?.querySelector(`:scope > table > tbody > tr:not(.wui-virtual-spacer, .wui-group-row)`))?.getBoundingClientRect().height;e>0&&Math.abs(e-X)>.5&&Nt(e)},[k,_?.length,F,G]);let Z={start:0,end:J.length,before:0,after:0};if(G){Z=xe({scrollTop:jt.top,viewport:jt.height||Number.parseFloat(Ke)||0,rowHeight:X,count:J.length});let e=kt.current;e!==null&&e>=0&&e<J.length&&(e<Z.start&&Z.start-e<=we&&(Z={...Z,start:e,before:e*X}),e>=Z.end&&e-Z.end<we&&(Z={...Z,end:e+1,after:(J.length-e-1)*X}))}let Pt=p(null),Ft=p(null),It=p(null),Lt=!F&&!C&&_?.length>0&&_.length<=le;f(()=>{let e=Pt.current;if(!Lt||!e){Ft.current=null,It.current=null;return}let t=_.map((e,t)=>v(e,t));ve(It.current,t)&&_e(e.rows,Ft.current),Ft.current=pe(e.rows),It.current=t});let Rt=typeof I==`function`||typeof L==`function`,zt=p(null),Bt=p(null);d(()=>{if(!Rt){Bt.current=null;return}let e=u[0]?.key,t=new Map;(_||[]).forEach((n,r)=>{let i=e===void 0?void 0:n[e],a=typeof i==`string`||typeof i==`number`?String(i):``;t.set(v(n,r),{...Ee(n,I,L),label:a})});let n=ye(be(Bt.current,t));Bt.current=t,n&&zt.current&&(zt.current.textContent=n)},[_,I,L,v]);let Vt=je!==void 0&&(Me===void 0||Me>0)?je:Ae,Ht=({group:e,open:t},n)=>{let r=e.items[0].row[P],a=e.items.map(e=>e.row);return h(`tr`,{className:`wui-group-row`,"data-group-key":e.key,"aria-rowindex":G?n+2:void 0,children:h(`th`,{className:`wui-group-cell`,scope:`rowgroup`,colSpan:V,children:g(`button`,{type:`button`,className:`wui-group-toggle`,"aria-expanded":t,onClick:()=>Ot(e.key),children:[h(i,{name:`chevron-down`,size:16}),h(`span`,{className:`wui-group-label`,children:et?et(r,a):De(r)}),h(`span`,{className:`wui-group-count`,"aria-hidden":`true`,children:de(e.items.length)}),h(`span`,{className:`visually-hidden wui-group-rows`,children:`, ${ae.rows(e.items.length)}`})]})})},`group:${e.key}`)},Ut=({row:e,i:t},n)=>{let r=v(e,t),a=R&&ot.has(r),o=Qe!=null&&String(Qe)===String(r),s=String(r).replace(/[^a-z0-9]/gi,`_`),c=W(0,`wui-expand-cell`),l=W(+!!R,`wui-select-cell`),d=Rt?Ee(e,I,L):null,f=K(e,t);return g(ee,{children:[g(`tr`,{className:[E&&f&&D?.has(r)?`is-selected`:``,z?`wui-row-link`:``,o?`wui-row-active`:``].filter(Boolean).join(` `)||void 0,"aria-current":o?`true`:void 0,"aria-rowindex":G?n+2:void 0,"aria-busy":d?.state===`saving`?`true`:void 0,"data-wui-save-state":d?.state||void 0,"data-status":Xe?.(e)||void 0,"data-href":M?.(e)||void 0,"data-row-key":A?String(r):void 0,tabIndex:z?0:void 0,onClick:z?t=>dt(e,t):void 0,onAuxClick:z&&M?t=>t.button===1&&dt(e,t):void 0,onKeyDown:z?t=>{t.key===`Enter`&&t.target===t.currentTarget&&dt(e,t)}:void 0,children:[R&&h(`td`,{className:c.className,style:c.style,children:h(`button`,{type:`button`,className:`wui-expand-toggle${a?` is-open`:``}`,"aria-expanded":a,"aria-controls":a?`${s}-expanded`:void 0,"aria-label":a?`Collapse row`:`Expand row`,onClick:()=>ct(r),children:h(i,{name:`chevron-down`,size:16})})}),E&&h(`td`,{className:l.className,style:l.style,children:h(`input`,{type:`checkbox`,className:`wui-check`,checked:f&&(D?.has(r)||!1),disabled:!f,onChange:e=>wt(r,e.nativeEvent.shiftKey),onMouseDown:e=>{e.shiftKey&&e.preventDefault()},"aria-label":`Select row`})}),u.map((t,n)=>g(`td`,{className:W(U+n,(n===0?`wui-name-cell `:``)+(t.nowrap?`text-nowrap `:``)+b(t.align)+(t.cellClassName?` ${t.cellClassName}`:``)).className,style:_t(U+n,t.cellStyle),"data-label":j&&typeof t.label==`string`?t.label:void 0,children:[t.render?t.render(e):De(e[t.key]),n===0&&d?.state===`error`&&h(`span`,{className:ue,children:d.message})]},t.key)),w&&h(`td`,{children:h(`div`,{className:`u-row-actions`,children:w(e)})})]}),a&&h(`tr`,{className:`wui-row-expanded`,children:h(`td`,{id:`${s}-expanded`,colSpan:V,children:Be(e)})})]},r)},Wt=(e,t)=>e.group?Ht(e,t):Ut(e,t),Gt=(e,t)=>G?h(`tr`,{className:`wui-virtual-spacer`,"aria-hidden":`true`,hidden:t===0,children:h(`td`,{colSpan:V,style:{height:t}})},e):null,Q=W(0,`wui-expand-cell`),$=W(+!!R,`wui-select-cell`);return g(ne,{children:[g(H?`wui-data-table`:`div`,{ref:Y,...H?{class:ft,resizable:N?``:void 0,"view-key":$e||void 0,"data-wui-row-drag":A?``:void 0}:{className:ft,"data-wui-row-drag":A?``:void 0},style:mt,tabIndex:0,...e(`AppDataTable`,t),...rt,children:[g(`table`,{className:at,"aria-label":Pe,"aria-rowcount":G?J.length+1:void 0,style:Ve===`fixed`?{tableLayout:`fixed`}:void 0,children:[h(`thead`,{children:g(`tr`,{"aria-rowindex":G?1:void 0,children:[R&&h(`th`,{className:Q.className,style:Q.style,children:h(`span`,{className:`visually-hidden`,children:`Expand`})}),E&&h(`th`,{className:$.className,style:$.style,children:h(`input`,{ref:St,type:`checkbox`,className:`wui-check`,checked:bt,onChange:e=>Tt(e.target.checked),"aria-label":`Select all rows`})}),u.map((e,t)=>{let n=!!(e.sortable&&S),r=x&&x.key===e.key,a=e.align===`num`||e.align===`end`,o=n&&h(`span`,{className:`sort-icon${a?` wui-sort-lead`:``}`,children:h(i,{name:`chevrons-up-down`,size:14})}),s=N&&t!==vt,c=e.width||e.minWidth?{width:e.width,minWidth:e.minWidth}:void 0;return g(`th`,{className:W(U+t,(n?`sortable `:``)+(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+(e.grow?`wui-col-grow `:``)+(s?`wui-col-resizable `:``)+b(e.align)).className,style:_t(U+t,c),"data-key":H?e.key:void 0,"aria-label":s&&typeof e.label==`string`?e.label:void 0,"data-pin":e.pin===`start`||e.pin===`end`?e.pin:void 0,tabIndex:n?0:void 0,"aria-sort":r?x.dir===`asc`?`ascending`:`descending`:n?`none`:void 0,onClick:n?()=>S(e.key):void 0,onKeyDown:n?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),S(e.key))}:void 0,children:[a&&o,e.label,!a&&o,s&&h(`span`,{className:`wui-col-resize`,role:`separator`,"aria-orientation":`vertical`,"aria-valuemin":ie,"aria-valuemax":re,tabIndex:0,"aria-label":ae.resize(typeof e.label==`string`?e.label:e.key)})]},e.key)}),w&&(Ne?h(`th`,{className:`wui-cell-end`,children:Ne}):h(`th`,{className:`wui-cell-end`,children:h(`span`,{className:`visually-hidden`,children:`Actions`})}))]})}),h(`tbody`,{ref:Pt,children:C?h(a,{rows:ke,cols:V}):_?.length?g(ne,{children:[Gt(`before`,Z.before),J.slice(Z.start,Z.end).map((e,t)=>Wt(e,Z.start+t)),Gt(`after`,Z.after)]}):null}),lt&&!C&&_?.length>0&&h(`tfoot`,{children:g(`tr`,{children:[R&&h(`td`,{className:Q.className,style:Q.style}),E&&h(`td`,{className:$.className,style:$.style}),u.map((e,t)=>h(`td`,{className:W(U+t,(t===0?`wui-name-cell `:``)+(e.nowrap?`text-nowrap `:``)+b(e.align)).className,style:_t(U+t,void 0),children:e.footer?e.footer(_):null},e.key)),w&&h(`td`,{})]})})]}),!C&&!_?.length&&h(`div`,{className:`tbl-empty-block`,children:typeof Vt==`string`?h(`div`,{className:`tbl-empty-plain`,children:Vt}):Vt})]}),Oe(T)&&h(o,{page:T.page,totalPages:T.totalPages,pageSize:T.pageSize,onPageChange:T.setPage,onPageSizeChange:T.setPageSize,pageSizes:T.pageSizes,mode:T.mode}),Rt&&h(`div`,{ref:zt,className:`visually-hidden`,role:`status`,"aria-live":`polite`,"data-wui-table-status":``})]})}export{x as default};

package/dist/components/AppFormSection.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`stacked`,`side`],o=[`top`,`start`],s=[`comfortable`,`compact`],c=[2,3,4];function l(l){let{children:u,title:d,description:f,layout:p=`stacked`,labels:m=`top`,density:h=`comfortable`,headingLevel:g=3,className:_=``,...v}=l;n(`AppFormSection`,v),t(`AppFormSection`,`layout`,p,a),t(`AppFormSection`,`labels`,m,o),t(`AppFormSection`,`density`,h,s),t(`AppFormSection`,`headingLevel`,g,c);let y=c.includes(g)?`h${g}`:`h3`;return i(`section`,{className:[`form-section`,p===`side`?`wui-form-side`:``,m===`start`?`wui-form-labels-start`:``,h===`compact`?`wui-form-compact`:``,_].filter(Boolean).join(` `),...e(`AppFormSection`,l),...v,children:[(d!=null||f!=null)&&i(`div`,{className:`form-section-head`,children:[d!=null&&r(y,{className:`form-section-title`,children:d}),f!=null&&r(`p`,{className:`form-section-desc`,children:f})]}),r(`div`,{className:`form-section-body`,children:u})]})}export{l as default};
+import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnInvalidValue.js";import n from"./warnUnknownProps.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";var a=[`stacked`,`side`],o=[`top`,`start`],s=[`comfortable`,`compact`],c=[2,3,4],l=[`body`,`display`],u=[`line`,`none`];function d(d){let{children:f,title:p,description:m,layout:h=`stacked`,labels:g=`top`,density:_=`comfortable`,headingLevel:v=3,titleFont:y=`body`,titleSize:b,rule:x=`line`,className:S=``,...C}=d;n(`AppFormSection`,C);let{style:w,...T}=C;t(`AppFormSection`,`layout`,h,a),t(`AppFormSection`,`labels`,g,o),t(`AppFormSection`,`density`,_,s),t(`AppFormSection`,`headingLevel`,v,c),t(`AppFormSection`,`titleFont`,y,l),t(`AppFormSection`,`rule`,x,u);let E=c.includes(v)?`h${v}`:`h3`;return i(`section`,{className:[`form-section`,h===`side`?`wui-form-side`:``,g===`start`?`wui-form-labels-start`:``,_===`compact`?`wui-form-compact`:``,y===`display`?`wui-form-title-display`:``,x===`none`?`wui-form-rule-none`:``,S].filter(Boolean).join(` `),style:b==null&&w===void 0?void 0:{"--wui-form-title-size":b==null?void 0:`${b}px`,...w},...e(`AppFormSection`,d),...T,children:[(p!=null||m!=null)&&i(`div`,{className:`form-section-head`,children:[p!=null&&r(E,{className:`form-section-title`,children:p}),m!=null&&r(`p`,{className:`form-section-desc`,children:m})]}),r(`div`,{className:`form-section-body`,children:f})]})}export{d as default};

package/dist/components/AppSectionFeatures.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 i,{SECTION_ALIGNS as a,SECTION_HEADINGS as o,SECTION_VARIANTS as s,itemHeading as c,sectionHeading as l}from"../lib/sectionShell.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=[`grid`,`rows`];function p(p){let{title:m,items:h=[],layout:g=`grid`,as:_=`h2`,eyebrow:v,subtitle:y,align:b=`center`,variant:x=`default`,className:S=``,...C}=p;n(`AppSectionFeatures`,C),t(`AppSectionFeatures`,`layout`,g,f),t(`AppSectionFeatures`,`as`,_,o),t(`AppSectionFeatures`,`align`,b,a),t(`AppSectionFeatures`,`variant`,x,s);let w=l(_,`h2`),T=c(w);return u(i,{component:`AppSectionFeatures`,kind:`features`,title:m,as:w,eyebrow:v,subtitle:y,align:b,variant:x,extraClass:g===`rows`?`wui-section-features-rows`:``,className:S,rest:{...e(`AppSectionFeatures`,p),...C},children:h.length>0&&u(`ul`,{className:`wui-section-features-list`,children:h.map(e=>d(`li`,{className:`wui-section-feature`,children:[e.media!=null&&u(`div`,{className:`wui-section-media`,children:e.media}),d(`div`,{className:`wui-section-feature-body`,children:[e.icon&&u(`span`,{className:`wui-section-feature-icon`,children:u(r,{name:e.icon,size:24})}),u(T,{className:`wui-section-feature-title`,children:e.title}),e.description!=null&&e.description!==``&&u(`div`,{className:`wui-section-feature-text`,children:e.description})]})]},e.key??e.title))})})}export{p 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 i,{SECTION_ALIGNS as a,SECTION_HEADINGS as o,SECTION_TITLE_FONTS as s,SECTION_VARIANTS as c,itemHeading as l,sectionHeading as u}from"../lib/sectionShell.js";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`grid`,`rows`];function m(m){let{title:h,items:g=[],layout:_=`grid`,as:v=`h2`,eyebrow:y,subtitle:b,align:x=`center`,variant:S=`default`,titleFont:C=`display`,inset:w,className:T=``,...E}=m;n(`AppSectionFeatures`,E),t(`AppSectionFeatures`,`layout`,_,p),t(`AppSectionFeatures`,`as`,v,o),t(`AppSectionFeatures`,`align`,x,a),t(`AppSectionFeatures`,`variant`,S,c),t(`AppSectionFeatures`,`titleFont`,C,s);let D=u(v,`h2`),O=l(D);return d(i,{component:`AppSectionFeatures`,kind:`features`,title:h,as:D,eyebrow:y,subtitle:b,align:x,variant:S,titleFont:C,inset:w,extraClass:_===`rows`?`wui-section-features-rows`:``,className:T,rest:{...e(`AppSectionFeatures`,m),...E},children:g.length>0&&d(`ul`,{className:`wui-section-features-list`,children:g.map(e=>f(`li`,{className:`wui-section-feature`,children:[e.media!=null&&d(`div`,{className:`wui-section-media`,children:e.media}),f(`div`,{className:`wui-section-feature-body`,children:[e.icon&&d(`span`,{className:`wui-section-feature-icon`,children:d(r,{name:e.icon,size:24})}),d(O,{className:`wui-section-feature-title`,children:e.title}),e.description!=null&&e.description!==``&&d(`div`,{className:`wui-section-feature-text`,children:e.description})]})]},e.key??e.title))})})}export{m as default};

package/dist/guidance.json

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

package/dist/lib/sectionShell.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";var n=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],r=[`start`,`center`],i=[`default`,`muted`],a=[`neutral`,`primary`,`success`,`warning`,`danger`,`info`];function o(e,t){return n.includes(e)?e:t}function s(e){return n[Math.min(n.indexOf(e)+1,5)]}function c({className:t,src:n,alt:r,width:i,height:a}){return e(`img`,{className:t,src:n,alt:r,width:i,height:a,loading:`lazy`,decoding:`async`})}function l({component:n,kind:r,title:i,as:o,eyebrow:s,subtitle:c,align:l,variant:u,eyebrowTone:d,actions:f,extraClass:p,className:m,rest:h,children:g}){if(i==null||i===``)throw Error(`${n} needs a title: every section opens with its heading.`);let _=o,v=h.id?`${h.id}-title`:void 0,y=a.includes(d);return e(`section`,{className:[`wui-section`,`wui-section-${r}`,l===`center`?`wui-section-center`:``,u===`muted`?`wui-section-muted`:``,p,m].filter(Boolean).join(` `),"aria-labelledby":v,...h,children:t(`div`,{className:`wui-section-inner`,children:[t(`div`,{className:`wui-section-head`,children:[s!=null&&s!==``&&e(`div`,{className:y?`wui-section-eyebrow wui-section-eyebrow-pill wui-section-eyebrow-${d}`:`wui-section-eyebrow`,children:s}),e(_,{className:`wui-section-title`,id:v,children:i}),c!=null&&c!==``&&e(`p`,{className:`wui-section-subtitle`,children:c}),f!=null&&f!==!1&&e(`div`,{className:`wui-section-actions`,children:f})]}),g]})})}export{r as SECTION_ALIGNS,a as SECTION_EYEBROW_TONES,n as SECTION_HEADINGS,i as SECTION_VARIANTS,c as SectionImage,l as default,s as itemHeading,o as sectionHeading};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";var n=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],r=[`start`,`center`],i=[`default`,`muted`],a=[`neutral`,`primary`,`success`,`warning`,`danger`,`info`],o=[`display`,`body`];function s(e,t){return n.includes(e)?e:t}function c(e){return n[Math.min(n.indexOf(e)+1,5)]}function l({className:t,src:n,alt:r,width:i,height:a}){return e(`img`,{className:t,src:n,alt:r,width:i,height:a,loading:`lazy`,decoding:`async`})}function u({component:n,kind:r,title:i,as:o,eyebrow:s,subtitle:c,align:l,variant:u,eyebrowTone:d,titleFont:f,inset:p,actions:m,extraClass:h,className:g,rest:_,children:v}){if(i==null||i===``)throw Error(`${n} needs a title: every section opens with its heading.`);let y=o,b=_.id?`${_.id}-title`:void 0,x=a.includes(d),{style:S,...C}=_,w=p==null&&S===void 0?void 0:{"--wui-section-inset":p==null?void 0:`${p}px`,...S};return e(`section`,{className:[`wui-section`,`wui-section-${r}`,l===`center`?`wui-section-center`:``,u===`muted`?`wui-section-muted`:``,h,g].filter(Boolean).join(` `),style:w,"aria-labelledby":b,...C,children:t(`div`,{className:`wui-section-inner`,children:[t(`div`,{className:`wui-section-head`,children:[s!=null&&s!==``&&e(`div`,{className:x?`wui-section-eyebrow wui-section-eyebrow-pill wui-section-eyebrow-${d}`:`wui-section-eyebrow`,children:s}),e(y,{className:f===`body`?`wui-section-title wui-section-title-body`:`wui-section-title`,id:b,children:i}),c!=null&&c!==``&&e(`p`,{className:`wui-section-subtitle`,children:c}),m!=null&&m!==!1&&e(`div`,{className:`wui-section-actions`,children:m})]}),v]})})}export{r as SECTION_ALIGNS,a as SECTION_EYEBROW_TONES,n as SECTION_HEADINGS,o as SECTION_TITLE_FONTS,i as SECTION_VARIANTS,l as SectionImage,u as default,c as itemHeading,s as sectionHeading};

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

@@ -26,6 +26,8 @@
  * @param {'auto'|'fixed'} [props.tableLayout]
  * @param {boolean} [props.striped]
  * @param {boolean} [props.flush]
+ * @param {number} [props.pad] The inset around the table in px; flush wins over it.
+ * @param {string} [props.headerTone] The column header band's colour, a CSS colour or a $color token.
  * @param {boolean} [props.rowDrag]
  * @param {string|number} [props.maxHeight]
  * @param {string[]} [props.hiddenColumns]
@@ -153,6 +155,10 @@ export default function AppDataTable(props: {
      * @default false
      */
     flush?: boolean;
+    /** The inset around the table, in px; the wrapper's 20px is the default and flush wins over it. */
+    pad?: number;
+    /** The column header band's colour, a CSS colour or a $color token the Canvas renderer resolves. */
+    headerTone?: string;
     /**
      * Rows drag onto page elements marked data-wui-drop-target; a ticked row drags the whole selection. Fires wui:row-drop with keys and target on the wrapper.
      * @default false

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

@@ -14,6 +14,9 @@
  * @param {'top'|'start'} [props.labels]
  * @param {'comfortable'|'compact'} [props.density]
  * @param {2|3|4} [props.headingLevel]
+ * @param {'body'|'display'} [props.titleFont]
+ * @param {number} [props.titleSize] The title's font size in px.
+ * @param {'line'|'none'} [props.rule] The hairline between consecutive sections.
  * @param {string} [props.className]
  */
 export default function AppFormSection(props: {
@@ -42,6 +45,18 @@ export default function AppFormSection(props: {
      * @default 3
      */
     headingLevel?: 2 | 3 | 4;
+    /**
+     * display sets the title in the display face; body keeps the text face.
+     * @default "body"
+     */
+    titleFont?: 'body' | 'display';
+    /** The title's font size in px; unset keeps the theme's 15px. */
+    titleSize?: number;
+    /**
+     * none drops the hairline between consecutive sections and keeps the space.
+     * @default "line"
+     */
+    rule?: 'line' | 'none';
     /** Extra class names added to the root element. */
     className?: string;
 }): import("react").JSX.Element;

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

@@ -15,6 +15,8 @@
  * @param {import('react').ReactNode} [props.subtitle]
  * @param {"start"|"center"} [props.align]
  * @param {"default"|"muted"} [props.variant]
+ * @param {"display"|"body"} [props.titleFont]
+ * @param {number} [props.inset] The section's side inset in px.
  * @param {string} [props.className]
  */
 export default function AppSectionFeatures(props: {
@@ -55,6 +57,13 @@ export default function AppSectionFeatures(props: {
      * @default "default"
      */
     variant?: "default" | "muted";
+    /**
+     * The heading's face: display for the brand face, body for the text face.
+     * @default "display"
+     */
+    titleFont?: "display" | "body";
+    /** The section's side inset in px; unset keeps the container padding. */
+    inset?: number;
     /**
      * Extra class names for the root element.
      * @default ""

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

@@ -2,6 +2,7 @@ export declare const SECTION_HEADINGS: string[];
 export declare const SECTION_ALIGNS: string[];
 export declare const SECTION_VARIANTS: string[];
 export declare const SECTION_EYEBROW_TONES: string[];
+export declare const SECTION_TITLE_FONTS: string[];
 /** The heading tag for the section title: `as` when it is a heading, otherwise the section's default. */
 export declare function sectionHeading(as: any, fallback: any): any;
 /** The level under a section title, for an item's title (h2 gives h3; h6 stays h6). */
@@ -27,7 +28,7 @@ export declare function SectionImage({ className, src, alt, width, height }: {
  * a generated one would differ from Razor's on every render.
  * @internal not exported from the package barrel
  */
-export default function SectionShell({ component, kind, title, as, eyebrow, subtitle, align, variant, eyebrowTone, actions, extraClass, className, rest, children, }: {
+export default function SectionShell({ component, kind, title, as, eyebrow, subtitle, align, variant, eyebrowTone, titleFont, inset, actions, extraClass, className, rest, children, }: {
     actions: any;
     align: any;
     as: any;
@@ -37,9 +38,11 @@ export default function SectionShell({ component, kind, title, as, eyebrow, subt
     extraClass: any;
     eyebrow: any;
     eyebrowTone: any;
+    inset: any;
     kind: any;
     rest: any;
     subtitle: any;
     title: any;
+    titleFont: any;
     variant: any;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.94.1",
+  "version": "0.95.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.94.1",
-    "@webority/ui-elements": "0.94.1"
+    "@webority/theme": "0.95.0",
+    "@webority/ui-elements": "0.95.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.26.0",
@@ -56,8 +56,8 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/tokens": "0.94.1",
-    "@webority/canvas-kit": "0.94.1"
+    "@webority/canvas-kit": "0.95.0",
+    "@webority/tokens": "0.95.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",