@webority/ui-react 0.35.2 → 0.37.0

package/dist/components/AppKanban.js

@@ -8,15 +8,15 @@ import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { KANBAN_SUMMARY_FORMATS as f, KANBAN_TEXT as p, KANBAN_TONES as m, kanbanOverflow as ee, kanbanSummaryFormat as h, kanbanVisibleLimit as g, sumKanbanValues as _ } from "@webority/ui-elements/elements/kanban";
 //#region src/components/AppKanban.jsx
 var v = (e) => e.key ?? e.id, y = (e) => e.column, b = ["rupees", "paise"];
-function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions: w, getCardKey: T = v, getCardColumn: E = y, getCardValue: D, cardLabel: O, isCardLocked: k, onLocked: A, onMove: j, accept: M, filter: N, boardId: P, ariaLabel: F = "Board", emptyText: te = p.empty, readOnly: ne = !1, swipeHint: re = !1, summaryFormat: I, summaryUnit: L, className: R = "", id: z, ...B }) {
+function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions: w, getCardKey: T = v, getCardColumn: E = y, getCardValue: D, cardLabel: O, isCardLocked: k, onLocked: A, onMove: j, accept: M, filter: N, boardId: P, ariaLabel: te = "Board", emptyText: ne = p.empty, readOnly: re = !1, swipeHint: ie = !1, fill: F = !1, summaryFormat: I, summaryUnit: L, className: R = "", id: z, ...B }) {
 	t("AppKanban", B), e("AppKanban", "summaryFormat", I, f), e("AppKanban", "summaryUnit", L, b);
 	for (let t of x) e("AppKanban", "columns[].tone", t.tone, m);
-	let V = o(), H = z || `kanban-${V.replace(/[^a-zA-Z0-9_-]/g, "")}`, U = c(null), [W, G] = l(() => /* @__PURE__ */ new Map()), [K, q] = l(() => /* @__PURE__ */ new Set()), [J, Y] = l(() => /* @__PURE__ */ new Set()), ie = s(() => new Map(S.map((e) => [String(T(e)), e])), [S, T]), X = c(null);
+	let V = o(), H = z || `kanban-${V.replace(/[^a-zA-Z0-9_-]/g, "")}`, U = c(null), [W, G] = l(() => /* @__PURE__ */ new Map()), [K, q] = l(() => /* @__PURE__ */ new Set()), [J, Y] = l(() => /* @__PURE__ */ new Set()), ae = s(() => new Map(S.map((e) => [String(T(e)), e])), [S, T]), X = c(null);
 	X.current = {
 		accept: M,
 		onMove: j,
 		onLocked: A,
-		byKey: ie,
+		byKey: ae,
 		columns: x
 	};
 	let Z = I && f.includes(I) && (L == null || b.includes(L)) ? h(I, L) : null, Q = s(() => {
@@ -85,7 +85,7 @@ function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions:
 			e.removeEventListener("wui:kanban:move", t), e.removeEventListener("wui:kanban:locked", n), e.accept = void 0;
 		};
 	}, []);
-	let $ = (e) => !N || N(e) !== !1, ae = (e, t) => {
+	let $ = (e) => !N || N(e) !== !1, oe = (e, t) => {
 		K.has(e) && Y((e) => {
 			let n = new Set(e);
 			for (let e of t) n.delete(String(T(e)));
@@ -100,11 +100,12 @@ function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions:
 		id: H,
 		class: R ? `wui-kanban ${R}` : "wui-kanban",
 		role: "region",
-		"aria-label": F,
+		"aria-label": te,
 		"board-id": P || void 0,
 		"summary-format": Z ? I : void 0,
 		"summary-unit": Z && L ? L : void 0,
-		readonly: ne ? "" : void 0,
+		readonly: re ? "" : void 0,
+		fill: F ? "" : void 0,
 		controlled: "",
 		...B,
 		children: [
@@ -127,7 +128,7 @@ function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions:
 					})]
 				}, e.key))
 			}),
-			re && /* @__PURE__ */ d("p", {
+			ie && /* @__PURE__ */ d("p", {
 				className: "wui-kanban-hint",
 				"aria-hidden": "true",
 				children: [/* @__PURE__ */ u(n, {
@@ -237,14 +238,14 @@ function x({ columns: x = [], cards: S = [], renderCard: C, renderColumnActions:
 								"aria-controls": `${t}-body`,
 								"aria-expanded": c ? "true" : "false",
 								hidden: c ? a.length <= s : l.size === 0,
-								onClick: () => ae(e.key, r),
+								onClick: () => oe(e.key, r),
 								children: c ? p.fewer : p.more(l.size)
 							}),
 							/* @__PURE__ */ u("p", {
 								className: "wui-kanban-empty",
 								"data-wui-empty": "",
 								hidden: a.length > 0,
-								children: e.emptyText ?? te
+								children: e.emptyText ?? ne
 							})
 						]
 					}, e.key);

package/dist/components/AppShell.js

@@ -235,34 +235,35 @@ function C({ tab: e, linkComponent: t }) {
 		children: i
 	});
 }
-function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
-	let a = Array.isArray(e.children) && e.children.length > 0, o = a && e.children.some((e) => e.active), [c, l] = d(o);
+function w({ item: e, linkComponent: t, onNavigate: r, depth: i = 0 }) {
+	let a = i > 0, o = i > 1 ? { "--wui-nav-depth": i } : void 0, c = Array.isArray(e.children) && e.children.length > 0, l = c && e.children.some((e) => e.active), [u, h] = d(l);
 	s(() => {
-		o && !c && l(!0);
-	}, [o, c]);
-	let u = typeof e.label == "string" ? e.label : void 0, h = !i && e.icon && /* @__PURE__ */ p("span", {
+		l && !u && h(!0);
+	}, [l, u]);
+	let g = typeof e.label == "string" ? e.label : void 0, _ = !a && e.icon && /* @__PURE__ */ p("span", {
 		className: "app-nav-icon",
 		children: typeof e.icon == "string" ? /* @__PURE__ */ p(n, {
 			name: e.icon,
 			size: 22
 		}) : e.icon
-	}), g = e.badge != null && /* @__PURE__ */ p("span", {
+	}), v = e.badge != null && /* @__PURE__ */ p("span", {
 		className: `app-nav-badge${e.badgeTone ? ` tone-${e.badgeTone}` : ""}`,
 		children: e.badge
 	});
-	if (a) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
+	if (c) return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("button", {
 		type: "button",
-		className: `app-nav-item has-children${o ? " active" : ""}`,
-		"aria-expanded": c,
-		"data-label": u,
-		onClick: () => l((e) => !e),
+		className: `app-nav-item${a ? " app-nav-subitem" : ""} has-children${l ? " active" : ""}`,
+		style: o,
+		"aria-expanded": u,
+		"data-label": g,
+		onClick: () => h((e) => !e),
 		children: [
-			h,
+			_,
 			/* @__PURE__ */ p("span", {
 				className: "app-nav-text",
 				children: e.label
 			}),
-			g,
+			v,
 			/* @__PURE__ */ p("span", {
 				className: "app-nav-caret",
 				children: /* @__PURE__ */ p(n, {
@@ -272,26 +273,26 @@ function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
 			})
 		]
 	}), /* @__PURE__ */ p("div", {
-		className: `app-nav-sub${c ? " expanded" : ""}`,
-		inert: !c,
-		"aria-hidden": !c || void 0,
+		className: `app-nav-sub${u ? " expanded" : ""}`,
+		inert: !u,
+		"aria-hidden": !u || void 0,
 		children: /* @__PURE__ */ p("div", {
 			className: "app-nav-sub-inner",
 			children: e.children.map((e) => /* @__PURE__ */ p(w, {
 				item: e,
 				linkComponent: t,
 				onNavigate: r,
-				sub: !0
+				depth: i + 1
 			}, e.key ?? e.href))
 		})
 	})] });
-	let _ = `app-nav-item${i ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, v = /* @__PURE__ */ m(f, { children: [
-		h,
+	let y = `app-nav-item${a ? " app-nav-subitem" : ""}${e.active ? " active" : ""}`, b = /* @__PURE__ */ m(f, { children: [
+		_,
 		/* @__PURE__ */ p("span", {
 			className: "app-nav-text",
 			children: e.label
 		}),
-		g,
+		v,
 		e.trailingIcon && /* @__PURE__ */ p("span", {
 			className: "app-nav-trailing",
 			children: typeof e.trailingIcon == "string" ? /* @__PURE__ */ p(n, {
@@ -299,21 +300,23 @@ function w({ item: e, linkComponent: t, onNavigate: r, sub: i = !1 }) {
 				size: 16
 			}) : e.trailingIcon
 		})
-	] }), y = e.active ? "page" : void 0;
+	] }), x = e.active ? "page" : void 0;
 	return t ? /* @__PURE__ */ p(t, {
-		className: _,
+		className: y,
+		style: o,
 		to: e.href,
-		"aria-current": y,
-		"data-label": u,
+		"aria-current": x,
+		"data-label": g,
 		onClick: r,
-		children: v
+		children: b
 	}) : /* @__PURE__ */ p("a", {
-		className: _,
+		className: y,
+		style: o,
 		href: e.href,
-		"aria-current": y,
-		"data-label": u,
+		"aria-current": x,
+		"data-label": g,
 		onClick: r,
-		children: v
+		children: b
 	});
 }
 function T() {

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

@@ -49,13 +49,18 @@
  * @param {string} [props.emptyText='Nothing here'] Text of an empty column.
  * @param {boolean} [props.readOnly=false] No card can move.
  * @param {boolean} [props.swipeHint=false] On phones, a "Swipe sideways or tap a column" line under the switcher.
+ * @param {boolean} [props.fill=false] From md up, the board fits the screen: it is the viewport's height
+ *   less `--wui-kanban-fill-offset` (240px by default; set it on the board for the page around it), and
+ *   each column's cards scroll inside the column under its fixed head, so a long column never scrolls
+ *   the page. While a card is carried, a column's list scrolls when the pointer nears its top or
+ *   bottom. Phones keep the one-column layout, scrolling the page.
  * @param {'number'|'currency'|'compact'} [props.summaryFormat] Each column's summary becomes the sum
  *   of its visible cards' `getCardValue`, in this format.
  * @param {'rupees'|'paise'} [props.summaryUnit='rupees'] The unit of the card values.
  * @param {string} [props.className]
  * @param {string} [props.id] The board's id; the column, body and help ids derive from it. Generated when omitted.
  */
-export default function AppKanban({ columns, cards, renderCard, renderColumnActions, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, swipeHint, summaryFormat, summaryUnit, className, id, ...rest }: {
+export default function AppKanban({ columns, cards, renderCard, renderColumnActions, getCardKey, getCardColumn, getCardValue, cardLabel, isCardLocked, onLocked, onMove, accept, filter, boardId, ariaLabel, emptyText, readOnly, swipeHint, fill, summaryFormat, summaryUnit, className, id, ...rest }: {
     columns: {
         key: string;
         title: string;
@@ -95,6 +100,7 @@ export default function AppKanban({ columns, cards, renderCard, renderColumnActi
     emptyText?: string;
     readOnly?: boolean;
     swipeHint?: boolean;
+    fill?: boolean;
     summaryFormat?: 'number' | 'currency' | 'compact';
     summaryUnit?: 'rupees' | 'paise';
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.35.2",
+  "version": "0.37.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.35.2",
-    "@webority/ui-elements": "0.35.2"
+    "@webority/theme": "0.37.0",
+    "@webority/ui-elements": "0.37.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0",