@webority/ui-react 0.104.1 → 0.106.0

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityWeb",
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.104.1"
+    "version": "0.106.0"
   },
   "rendererProtocolVersion": 12,
   "platform": "Web",
@@ -37,6 +37,12 @@
               "required": true,
               "description": "The body that opens and closes."
             },
+            {
+              "name": "count",
+              "type": "number",
+              "required": false,
+              "description": "A count chip after the title. Null shows none; 0 shows 0."
+            },
             {
               "name": "key",
               "type": "string",
@@ -71,6 +77,17 @@
           "type": "array",
           "required": false,
           "description": "The keys of the panes that start open. It replaces each item's own open flag and is read again when its content changes. Without multiple only the first key opens."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "bordered",
+            "flat"
+          ],
+          "required": false,
+          "description": "bordered (default) | flat: a text toggle with a leading chevron and an optional count chip, for a section header rather than a card of questions.",
+          "default": "bordered"
         }
       ],
       "itemsTakeAction": [],
@@ -2322,6 +2339,32 @@
               "required": false,
               "description": "Identifies the event."
             },
+            {
+              "name": "stack",
+              "type": "object",
+              "fields": [
+                {
+                  "name": "count",
+                  "type": "number",
+                  "required": true,
+                  "description": "How many more events the card stands for; a whole number above 0."
+                },
+                {
+                  "name": "label",
+                  "type": "string",
+                  "required": true,
+                  "description": "The link's tooltip and screen-reader name."
+                },
+                {
+                  "name": "url",
+                  "type": "url",
+                  "required": true,
+                  "description": "Where the `+count` link goes."
+                }
+              ],
+              "required": false,
+              "description": "Draws a `+count` link of its own inside the card, for a card that stands for several events."
+            },
             {
               "name": "start",
               "type": "string",
@@ -2362,7 +2405,7 @@
           "name": "eventsUrl",
           "type": "url",
           "required": false,
-          "description": "Called with `start` and `end` (IST days) whenever the visible period changes; answers a JSON list of events."
+          "description": "Called with `start`, `end` and `view` (month, week, day or list; IST days) whenever the visible period changes; answers a JSON list of events."
         },
         {
           "name": "firstDay",
@@ -4991,6 +5034,12 @@
           "description": "False leaves out the Reply action and the reply box; existing replies still show.",
           "default": true
         },
+        {
+          "name": "author",
+          "type": "string",
+          "required": false,
+          "description": "The name for the inline composer's avatar. Ignored when stacked."
+        },
         {
           "name": "className",
           "type": "string",
@@ -5197,12 +5246,29 @@
           "description": "Top-level comments, oldest first.",
           "default": []
         },
+        {
+          "name": "composer",
+          "type": "enum",
+          "enum": [
+            "inline",
+            "stacked"
+          ],
+          "required": false,
+          "description": "stacked: the box under the list. inline: one row with the author's avatar, the box and the post button.",
+          "default": "stacked"
+        },
         {
           "name": "composerPlaceholder",
           "type": "string",
           "required": false,
           "description": "The composer box's placeholder. Without it the standard placeholder asks for a comment and names @ mentions."
         },
+        {
+          "name": "composerRows",
+          "type": "number",
+          "required": false,
+          "description": "The composer box's rows. Without it, 3 stacked and 1 inline."
+        },
         {
           "name": "id",
           "type": "string",
@@ -5248,6 +5314,13 @@
           "required": false,
           "description": "The people the boxes offer after @."
         },
+        {
+          "name": "postLabel",
+          "type": "string",
+          "required": false,
+          "description": "The post button's text.",
+          "default": "Comment"
+        },
         {
           "name": "reactionChoices",
           "type": "array",
@@ -5587,6 +5660,17 @@
           ],
           "required": false,
           "description": "The status icon. Unset, it is delete when danger is set and info otherwise."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "default",
+            "plain"
+          ],
+          "required": false,
+          "description": "default keeps the status illustration and equal-width actions. plain drops the illustration, starts the text at the edge and sizes the actions small, right-aligned.",
+          "default": "default"
         }
       ],
       "itemsTakeAction": [],
@@ -7378,6 +7462,115 @@
         ]
       }
     },
+    {
+      "name": "AppDetailPane",
+      "marker": "AppDetailPane",
+      "acceptsChildren": true,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes on the pane.",
+          "default": ""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "The accessible name of the pane region."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "description": "Shows the pane. Closed, the pane is hidden and takes no room. The caller owns it and closes it in onClose.",
+          "default": false
+        },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "required": false,
+          "description": "Keeps the pane in view under the top bar while the list beside it scrolls.",
+          "default": true
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "A person keeps working in a list and reads the details of one item beside it.",
+          "Choosing an item should not change page, and the list must stay where it is."
+        ],
+        "whenNot": [
+          {
+            "text": "The items form a queue the person works through one by one.",
+            "instead": "AppSplitView"
+          },
+          {
+            "text": "The detail is an overlay that covers the page.",
+            "instead": "AppDrawer"
+          },
+          {
+            "text": "The detail is a short task that interrupts the flow.",
+            "instead": "AppModal"
+          }
+        ],
+        "do": [
+          {
+            "note": "The pane sits beside the list it details. Escape inside it calls onClose.",
+            "example": [
+              {
+                "component": "AppDetailPane",
+                "props": {
+                  "label": "Request details",
+                  "open": true
+                },
+                "children": [
+                  {
+                    "component": "p",
+                    "children": "Expense claim: client travel. Dev Patel, Sales."
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "dont": [
+          {
+            "note": "Use a detail pane to cover the page or hold a multi-step task; use AppDrawer or AppModal for that.",
+            "example": [
+              {
+                "component": "AppDetailPane",
+                "props": {
+                  "label": "New leave request",
+                  "open": true
+                },
+                "children": [
+                  {
+                    "component": "p",
+                    "children": "Step 1 of 3: choose the leave type."
+                  },
+                  {
+                    "component": "AppButton",
+                    "props": {
+                      "variant": "outline",
+                      "size": "sm"
+                    },
+                    "children": "Next"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "a11y": [
+          "The pane is a region named by label. Escape inside it calls onClose.",
+          "A closed pane is hidden from assistive technology, so it is not read while it is closed."
+        ]
+      }
+    },
     {
       "name": "AppDrawer",
       "marker": "AppDrawer",
@@ -7453,10 +7646,11 @@
           "enum": [
             "lg",
             "md",
-            "sm"
+            "sm",
+            "xl"
           ],
           "required": false,
-          "description": "The side drawer's width: 360, 480 or 640 px.",
+          "description": "The side drawer's width: 360, 480, 640 or 720 px.",
           "default": "md"
         },
         {
@@ -8457,6 +8651,13 @@
           "description": "Accepted file types (the accept attribute). Widen it, for example image/*,application/pdf, and non-image files show a file-type icon instead of a thumbnail.",
           "default": ".jpg,.jpeg,.png"
         },
+        {
+          "name": "buttonLabel",
+          "type": "string",
+          "required": false,
+          "description": "The button form's text.",
+          "default": "Add file"
+        },
         {
           "name": "className",
           "type": "string",
@@ -8538,6 +8739,17 @@
           "type": "any",
           "required": false,
           "description": "The chosen file or files: a File, an object with a url and an optional name, an array of those, or null."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "enum": [
+            "button",
+            "dropzone"
+          ],
+          "required": false,
+          "description": "dropzone is the tall drop target. button is a small outline button that opens the file dialog, with no preview and no list.",
+          "default": "dropzone"
         }
       ],
       "itemsTakeAction": [],
@@ -8626,6 +8838,59 @@
         ]
       }
     },
+    {
+      "name": "AppFileTiles",
+      "marker": "AppFileTiles",
+      "acceptsChildren": false,
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra class names added to the list.",
+          "default": ""
+        },
+        {
+          "name": "files",
+          "type": "any",
+          "required": false,
+          "description": "The files, each { key, name, href, sizeBytes, meta }. name's extension makes the type tile; href makes the tile a link; sizeBytes is the size in bytes; meta is text after the size.",
+          "default": []
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "Accessible name of the list."
+        }
+      ],
+      "itemsTakeAction": [],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "usage": {
+        "when": [
+          "A few files attached to a record that the person reads rather than edits.",
+          "Files that open or download from the page, each shown with its type and size."
+        ],
+        "whenNot": [
+          {
+            "text": "The person picks or uploads the files.",
+            "instead": "AppFileAttachment"
+          },
+          {
+            "text": "One file to read in the page.",
+            "instead": "AppFileViewer"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The list takes its accessible name from label.",
+          "The type tile is hidden from assistive technology; the file name carries the meaning.",
+          "A file with an href is a link; a file without one is plain text."
+        ]
+      }
+    },
     {
       "name": "AppFileViewer",
       "marker": "AppFileViewer",
@@ -12165,6 +12430,12 @@
           "required": false,
           "description": "Content pinned at the bottom, usually the action buttons."
         },
+        {
+          "name": "headerActions",
+          "type": "node",
+          "required": false,
+          "description": "Actions drawn beside the title, before the close button, such as Previous and Next. Not drawn while hideHeader is set."
+        },
         {
           "name": "headerIcon",
           "type": "icon",
@@ -12766,6 +13037,116 @@
         ]
       }
     },
+    {
+      "name": "AppNavList",
+      "marker": "AppNavList",
+      "acceptsChildren": false,
+      "props": [
+        {
+          "name": "items",
+          "type": "array",
+          "itemFields": [
+            {
+              "name": "active",
+              "type": "boolean",
+              "required": false,
+              "description": "Marks the current row."
+            },
+            {
+              "name": "count",
+              "type": "number",
+              "required": false,
+              "description": "A count on the right; hidden at zero."
+            },
+            {
+              "name": "divider",
+              "type": "boolean",
+              "required": false,
+              "description": "Draws a hairline instead of a row."
+            },
+            {
+              "name": "dotTone",
+              "type": "enum",
+              "enum": [
+                "danger",
+                "info",
+                "neutral",
+                "primary",
+                "success",
+                "warning"
+              ],
+              "required": false,
+              "description": "A 10 px coloured dot in place of the icon."
+            },
+            {
+              "name": "icon",
+              "type": "icon",
+              "required": false,
+              "description": "An icon drawn before the text. Not together with dotTone."
+            },
+            {
+              "name": "key",
+              "type": "stringOrNumber",
+              "required": true,
+              "description": "The row's key; not shown."
+            },
+            {
+              "name": "label",
+              "type": "node",
+              "required": false,
+              "description": "The row text."
+            },
+            {
+              "name": "to",
+              "type": "string",
+              "required": false,
+              "description": "Where the row links."
+            }
+          ],
+          "required": false,
+          "description": "The rows, top to bottom. A row with a target is a link; without one it is a button. A divider item draws a hairline between groups.",
+          "default": []
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "description": "The accessible name of the navigation landmark."
+        }
+      ],
+      "itemsTakeAction": [
+        "items"
+      ],
+      "takesAction": [],
+      "source": "@webority/ui-react",
+      "role": "navigation",
+      "usage": {
+        "when": [
+          "A page has a short rail of destinations or groups, each with a count, beside its content.",
+          "The rows pick one current destination, and some rows are coloured by a status dot."
+        ],
+        "whenNot": [
+          {
+            "text": "A site's top navigation with dropdown panels.",
+            "instead": "AppNavigationMenu"
+          },
+          {
+            "text": "A signed-in app's sidebar of destinations.",
+            "instead": "AppSidebarMenu"
+          },
+          {
+            "text": "A choice between several values in a form.",
+            "instead": "AppRadioGroup"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "The rows sit in a navigation landmark named by label, and the current row is marked with aria-current page.",
+          "A dot is decorative: the row's label carries the meaning, so the dot is hidden from assistive tech."
+        ]
+      }
+    },
     {
       "name": "AppNavigationMenu",
       "marker": "AppNavigationMenu",
@@ -13628,6 +14009,17 @@
           "required": false,
           "description": "A count, status, or short description."
         },
+        {
+          "name": "subtitlePlacement",
+          "type": "enum",
+          "enum": [
+            "below",
+            "inline"
+          ],
+          "required": false,
+          "description": "Where the subtitle sits: under the title, or on the title line after it. Size bar ignores it.",
+          "default": "below"
+        },
         {
           "name": "title",
           "type": "node",
@@ -19883,6 +20275,13 @@
           "required": true,
           "description": "Names the list for assistive tech; also used in announcements when an item moves between lists."
         },
+        {
+          "name": "bordered",
+          "type": "boolean",
+          "required": false,
+          "description": "False draws no border, fill or padding around each item.",
+          "default": true
+        },
         {
           "name": "className",
           "type": "string",
@@ -19910,6 +20309,17 @@
           "description": "Drag only from the handle. Without it an item can also be dragged from its body (links, buttons and inputs inside it keep working).",
           "default": false
         },
+        {
+          "name": "handleDisplay",
+          "type": "enum",
+          "enum": [
+            "always",
+            "hover"
+          ],
+          "required": false,
+          "description": "always shows every handle; hover shows it on item hover, handle focus, while lifted, and always on touch screens. Hover also turns the handle on.",
+          "default": "always"
+        },
         {
           "name": "items",
           "type": "array",
@@ -21547,7 +21957,7 @@
           "name": "pageSizes",
           "type": "array",
           "required": false,
-          "description": "The page sizes the menu offers. It offers 5, 10, 25 and 50 when left out."
+          "description": "The page sizes the menu offers. It offers 5, 10, 25 and 50 when left out. The current pageSize is added when it is not in the list."
         },
         {
           "name": "showPageSize",
@@ -25026,6 +25436,8 @@
       "on-scrim",
       "on-success",
       "on-success-strong",
+      "on-surface-dark",
+      "on-surface-dark-muted",
       "on-warning",
       "on-warning-strong",
       "primary",
@@ -25049,6 +25461,8 @@
       "success-text",
       "success-text-on-soft",
       "surface",
+      "surface-dark",
+      "surface-dark-border",
       "surface-inverse",
       "surface-inverse-elevated",
       "surface-inverse-raised",
@@ -25181,6 +25595,8 @@
       "on-scrim": "Ink on a scrim, such as the text of an overlay.",
       "on-success": "Ink on a solid success fill.",
       "on-success-strong": "Ink on a deep success fill.",
+      "on-surface-dark": "Text and icons on a surface-dark band.",
+      "on-surface-dark-muted": "Secondary text on a surface-dark band.",
       "on-warning": "Ink on a solid warning fill.",
       "on-warning-strong": "Ink on a deep warning fill.",
       "primary": "Primary fill for buttons, selected states and borders.",
@@ -25204,6 +25620,8 @@
       "success-text": "Success colour as text on a page or a soft success tint.",
       "success-text-on-soft": "Success text on its own soft tint, such as an alert heading.",
       "surface": "Card and panel surface.",
+      "surface-dark": "Band that stays dark in light and dark mode, such as a site footer or a dark hero.",
+      "surface-dark-border": "Hairline border or divider on a surface-dark band.",
       "surface-inverse": "Inverse band on a page, such as a dark footer or an inverse toast.",
       "surface-inverse-elevated": "A floating or highlighted surface two layers up on an inverse band.",
       "surface-inverse-raised": "A card or panel one layer up on an inverse band.",
@@ -25477,6 +25895,14 @@
         "light": "#ffffff",
         "dark": "#0f0f0f"
       },
+      "on-surface-dark": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      },
+      "on-surface-dark-muted": {
+        "light": "#babdc7",
+        "dark": "#babdc7"
+      },
       "on-warning": {
         "light": "#ffffff",
         "dark": "#0f0f1a"
@@ -25569,6 +25995,14 @@
         "light": "#ffffff",
         "dark": "#181b23"
       },
+      "surface-dark": {
+        "light": "#071437",
+        "dark": "#071437"
+      },
+      "surface-dark-border": {
+        "light": "#2a3553",
+        "dark": "#2a3553"
+      },
       "surface-inverse": {
         "light": "#071437",
         "dark": "#e6e8ee"

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-web",
-  "version": "0.104.1",
+  "version": "0.106.0",
   "platform": "Web",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 12,
   "library": {
     "name": "@webority/ui-react",
-    "version": "0.104.1"
+    "version": "0.106.0"
   },
   "files": {
     "manifest.json": {
-      "sha256": "d12442e56cb94b638de89630fd2525976020e0351ec4a6844011bd23ea7433c5",
-      "bytes": 856258
+      "sha256": "efb71f83ae259eb8d7b1c9108727f8d55b70a6171395b464dddc3670cd38e586",
+      "bytes": 870484
     },
     "kit.js": {
-      "sha256": "0d592747ae4031546a0d852ea735e00cf49f71870e90f5f923029b24f7cc76fe",
-      "bytes": 10887627
+      "sha256": "5f53206bead098d17b3ffb5df8c45274011f0f237de665e33297c6d0b869410c",
+      "bytes": 10909277
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/dist/components/AppAccordion.js

@@ -1 +1 @@
-import{wuiMarkerAttributes as e}from"../lib/wuiMarker.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{useEffect as r,useId as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(e,t,n){if(Array.isArray(n)){let e=n.map(String);return new Set(t?e:e.slice(0,1))}let r=e.map((e,t)=>({item:e,key:e.key??String(t)})).filter(({item:e})=>e.open).map(({key:e})=>e);return new Set(t?r:r.slice(0,1))}function l(l){let{items:u=[],multiple:d=!1,openItems:f,id:p,className:m=``,...h}=l;t(`AppAccordion`,h);let g=i(),_=p||g,[v,y]=a(()=>c(u,d,f)),b=Array.isArray(f)?f.map(String).join(`\0`):null;r(()=>{b!==null&&y(c(u,d,f))},[b,d]);let x=(e,t)=>e.key??String(t),S=e=>{y(t=>{let n=new Set(d?t:[]);return t.has(e)?n.delete(e):n.add(e),n})};return o(`div`,{className:`faq-list${m?` ${m}`:``}`,...e(`AppAccordion`,l),...h,children:u.map((e,t)=>{let r=x(e,t),i=v.has(r),a=`${_}-${t}`,c=`${a}-q`;return s(`div`,{className:`faq-item${i?` open`:``}`,children:[s(`button`,{type:`button`,className:`faq-q`,id:c,"aria-expanded":i,"aria-controls":a,onClick:()=>S(r),children:[e.title,o(`span`,{className:`faq-q-icon`,children:o(n,{name:`chevron-down`,size:18})})]}),o(`section`,{className:`faq-a-wrap`,id:a,"aria-labelledby":c,inert:!i,"aria-hidden":!i||void 0,children:o(`div`,{className:`faq-a-inner`,children:e.content})})]},r)})})}export{l 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{useEffect as i,useId as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=[`bordered`,`flat`];function u(e,t,n){if(Array.isArray(n)){let e=n.map(String);return new Set(t?e:e.slice(0,1))}let r=e.map((e,t)=>({item:e,key:e.key??String(t)})).filter(({item:e})=>e.open).map(({key:e})=>e);return new Set(t?r:r.slice(0,1))}function d(d){let{items:f=[],multiple:p=!1,openItems:m,variant:h=`bordered`,id:g,className:_=``,...v}=d;n(`AppAccordion`,v),t(`AppAccordion`,`variant`,h,l);let y=h===`flat`,b=s(`span`,{className:`faq-q-icon`,children:s(r,{name:`chevron-down`,size:18})}),x=a(),S=g||x,[C,w]=o(()=>u(f,p,m)),T=Array.isArray(m)?m.map(String).join(`\0`):null;i(()=>{T!==null&&w(u(f,p,m))},[T,p]);let E=(e,t)=>e.key??String(t),D=e=>{w(t=>{let n=new Set(p?t:[]);return t.has(e)?n.delete(e):n.add(e),n})};return s(`div`,{className:`faq-list${y?` wui-accordion-flat`:``}${_?` ${_}`:``}`,...e(`AppAccordion`,d),...v,children:f.map((e,t)=>{let n=E(e,t),r=C.has(n),i=`${S}-${t}`,a=`${i}-q`;return c(`div`,{className:`faq-item${r?` open`:``}`,children:[c(`button`,{type:`button`,className:`faq-q`,id:a,"aria-expanded":r,"aria-controls":i,onClick:()=>D(n),children:[y?b:null,e.title,e.count==null?null:s(`span`,{className:`wui-accordion-count`,children:e.count}),y?null:b]}),s(`section`,{className:`faq-a-wrap`,id:i,"aria-labelledby":a,inert:!r,"aria-hidden":!r||void 0,children:s(`div`,{className:`faq-a-inner`,children:e.content})})]},n)})})}export{d as default};