@webority/ui-react 0.102.3 → 0.104.0

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

@@ -21,6 +21,7 @@
  * @param {boolean} [props.disabled]
  * @param {'sm'|'md'|'lg'} [props.size]
  * @param {'inline'|'stacked'} [props.layout]
+ * @param {'filled'} [props.selectedStyle] `filled` fills the checked card's icon disc with primary.
  * @param {string} [props.className]
  */
 export default function AppChoiceCard(props: {
@@ -84,6 +85,8 @@ export default function AppChoiceCard(props: {
      * @default "inline"
      */
     layout?: 'inline' | 'stacked';
+    /** `filled` fills the checked card's icon disc with the primary colour and draws the glyph in the on-primary colour. Unset keeps the soft selected look. */
+    selectedStyle?: 'filled';
     /**
      * Extra class names added to the card.
      * @default ""

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

@@ -11,6 +11,7 @@
  * @param {import('react').ReactNode} props.children
  * @param {import('react').ReactNode} [props.count]
  * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {'soft'|'solid'} [props.variant]
  * @param {boolean} [props.disabled]
  * @param {string} [props.className]
  */
@@ -37,6 +38,11 @@ export default function AppChoiceChip(props: {
      * @default "md"
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Checked look: a soft primary tint (soft) or a primary fill with a translucent count (solid).
+     * @default "soft"
+     */
+    variant?: 'soft' | 'solid';
     /**
      * The chip dims and cannot be picked.
      * @default false

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

@@ -82,6 +82,9 @@ export type CommentThreadItem = {
  * @param {(query: string) => Promise<{ value: string, label: string, description?: string, src?: string }[]>} [props.loadPeople]
  *   Look people up instead of `people`.
  * @param {string[]} [props.reactionChoices]
+ * @param {boolean} [props.allowReplies] False leaves out the Reply action and the reply box; existing replies still show.
+ * @param {boolean} [props.allowReactions] False leaves out the reaction panel and the reaction chips.
+ * @param {string} [props.composerPlaceholder] The composer box's placeholder; without it the standard one.
  * @param {boolean} [props.readOnly]
  * @param {string} [props.label]
  * @param {string} [props.id]
@@ -113,6 +116,18 @@ export default function AppCommentThread(props: {
     }[]>;
     /** The reactions the panel offers. Without it the panel offers a thumbs up, heart, party, smile, eyes and folded hands. */
     reactionChoices?: string[];
+    /**
+     * False leaves out the Reply action and the reply box; existing replies still show.
+     * @default true
+     */
+    allowReplies?: boolean;
+    /**
+     * False leaves out the reaction panel and the reaction chips.
+     * @default true
+     */
+    allowReactions?: boolean;
+    /** The composer box's placeholder. Without it the standard placeholder asks for a comment and names @ mentions. */
+    composerPlaceholder?: string;
     /**
      * Show the thread without the box, actions or reacting.
      * @default false

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

@@ -12,10 +12,14 @@
  * @param {string} [props.icon]
  * @param {number} [props.iconSize]
  * @param {string} [props.toggleClassName]
+ * @param {"neutral"} [props.toggleVariant] A custom trigger that keeps the surrounding font and colour, with a
+ *   muted fill on hover and while open. Needs `trigger`.
+ * @param {"sm"|"md"|"lg"} [props.menuWidth] A fixed menu width (15, 20 or 25rem); long rows wrap instead of
+ *   widening the menu. Unset, the menu fits its rows.
  * @param {string} [props.label]
  * @param {"start"|"end"} [props.align]
  * @param {string} [props.ariaLabel]
- * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, shortcut?: string, divider?: boolean, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
+ * @param {{ key: string, label?: string, icon?: string|import('react').ReactNode, image?: string, to?: string, onClick?: () => void, danger?: boolean, disabled?: boolean, disabledReason?: string, shortcut?: string, divider?: boolean, header?: string, hiddenFrom?: 'sm'|'md'|'lg'|'xl' }[]} [props.items]
  * @param {string} [props.menuClassName]
  * @param {import('react').ElementType} [props.linkComponent] Component for `to` items (e.g. Link).
  * @param {import('react').ReactNode} [props.children] Rich menu content — renders inside the
@@ -37,6 +41,10 @@ export default function AppDropdown(props: {
     iconSize?: number;
     /** Class for the toggle button, replacing the default toggle look. */
     toggleClassName?: string;
+    /** neutral: a custom trigger that keeps the surrounding font and colour, with a muted fill on hover and while open. Needs trigger. */
+    toggleVariant?: "neutral";
+    /** A fixed menu width (15, 20 or 25rem); long rows wrap instead of widening the menu. Unset, the menu fits its rows. */
+    menuWidth?: "sm" | "md" | "lg";
     /** Tooltip and accessible name fallback for the toggle. */
     label?: string;
     /**
@@ -58,6 +66,8 @@ export default function AppDropdown(props: {
         to?: string;
         onClick?: () => void;
         danger?: boolean;
+        disabled?: boolean;
+        disabledReason?: string;
         shortcut?: string;
         divider?: boolean;
         header?: string;

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

@@ -10,6 +10,8 @@
  * @param {'default'|'danger'|'success'|'warning'} [props.tone]
  * @param {boolean} [props.dismissible]
  * @param {() => void} props.onClose
+ * @param {() => void} [props.onBack] Shows a back arrow before the title and runs this when it is pressed.
+ * @param {string} [props.backLabel] The back arrow's accessible name.
  * @param {import('react').ReactNode} [props.footer]
  * @param {'sm'|'md'|'lg'|'xl'|'fullscreen'|number} [props.size]
  * @param {'center'|'top'} [props.placement]
@@ -43,6 +45,12 @@ export default function AppModal(props: {
      */
     dismissible?: boolean;
     onClose: () => void;
+    onBack?: () => void;
+    /**
+     * The accessible name of the back arrow shown when onBack is set.
+     * @default "Back"
+     */
+    backLabel?: string;
     /** Content pinned at the bottom, usually the action buttons. */
     footer?: import('react').ReactNode;
     /**

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

@@ -37,6 +37,11 @@ declare const AppSelect: import("react").ForwardRefExoticComponent<{
      * @default "Search..."
      */
     searchPlaceholder?: string;
+    /**
+     * Text shown in the menu when a search matches nothing.
+     * @default "No matches"
+     */
+    emptyText?: string;
     /**
      * Show the search box in the menu.
      * @default false

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

@@ -1,6 +1,9 @@
 export type NavItemShape = {
     key?: string;
-    label: string;
+    /**
+     * Every row but a header row has one.
+     */
+    label?: string;
     /**
      * library icon name, or a node, so a
      * product with its own content-icon set (iconsax behind a product `Icon` seam) can use it.
@@ -31,6 +34,10 @@ export type NavItemShape = {
      * The badge's hover text, e.g. 3 invoices overdue.
      */
     badgeTitle?: string;
+    /**
+     * An ISO date (yyyy-MM-dd, India time). A green "New" pill shows after the label through that day, and none after it.
+     */
+    newUntil?: string;
     /**
      * A right-aligned secondary glyph (lock, external arrow, new dot).
      */
@@ -59,6 +66,10 @@ export type NavItemShape = {
      * Sub-items — the row becomes an expandable parent.
      */
     children?: NavItemShape[];
+    /**
+     * A sub-heading row in a group, drawn with no link. Shown only while a link follows it.
+     */
+    header?: string;
 };
 export type UserMenuShape = {
     /**
@@ -186,7 +197,8 @@ export type SearchShape = {
  * each item's `active` decides, as before.
  *
  * @param {object} props
- * @param {{ label?: string, items: NavItemShape[], after?: import('react').ReactNode }[]} [props.groups]
+ * @param {{ key?: string, label?: string, collapsible?: boolean, items: NavItemShape[], after?: import('react').ReactNode }[]} [props.groups]
+ *   A `collapsible` group with a `key` folds from its heading; its folded state is remembered in `foldedCookie`.
  * @param {import('react').ReactNode} [props.brand]
  * @param {import('react').ReactNode} [props.sidebarStart]
  * @param {import('react').ReactNode} [props.sidebarStartCompact]
@@ -207,6 +219,7 @@ export type SearchShape = {
  * @param {string} [props.currentPath]
  * @param {boolean} [props.rememberCollapsed]
  * @param {string} [props.collapsedCookie]
+ * @param {string} [props.foldedCookie]
  * @param {string} [props.tabBarLabel]
  * @param {string} [props.moreLabel]
  * @param {UserMenuShape} [props.userMenu]
@@ -220,7 +233,9 @@ export default function AppShell(props: {
      * @default []
      */
     groups?: {
+        key?: string;
         label?: string;
+        collapsible?: boolean;
         items: NavItemShape[];
         after?: import('react').ReactNode;
     }[];
@@ -280,6 +295,11 @@ export default function AppShell(props: {
      * @default "wui-shell-collapsed"
      */
     collapsedCookie?: string;
+    /**
+     * The cookie that remembers the folded collapsible groups, as their keys joined by dots.
+     * @default "wui-nav-folded"
+     */
+    foldedCookie?: string;
     /**
      * Accessible name of the phone tab bar.
      * @default "Quick navigation"

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

@@ -4,3 +4,9 @@ export declare const SHELL_COLLAPSED_COOKIE = "wui-shell-collapsed";
 export declare function readShellCollapsed(name?: string, doc?: Document): boolean | null;
 /** Remember the rail state for a year, site-wide; a frame without cookie access remembers nothing. */
 export declare function writeShellCollapsed(collapsed: any, name?: string, doc?: Document): void;
+/** Default cookie name for the folded foldable nav groups (AppShellTagHelper.FoldedCookie). */
+export declare const SHELL_FOLDED_COOKIE = "wui-nav-folded";
+/** The folded group keys from the cookie (joined by "."), or an empty set when absent or unreadable. */
+export declare function readNavFolded(name?: string, doc?: Document): Set<any>;
+/** Remember the folded group keys for a year, site-wide; a frame without cookie access remembers nothing. */
+export declare function writeNavFolded(keys: any, name?: string, doc?: Document): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.102.3",
+  "version": "0.104.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.102.3",
-    "@webority/ui-elements": "0.102.3"
+    "@webority/theme": "0.104.0",
+    "@webority/ui-elements": "0.104.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.102.3",
-    "@webority/tokens": "0.102.3"
+    "@webority/canvas-kit": "0.104.0",
+    "@webority/tokens": "0.104.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",