themelia-react-ui 2.0.1 → 2.0.2

package/dist/features/kanban.js

@@ -1,17 +1,18 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-l5LpDw2z.js";
-import { n } from "../buttons-SbIcm1HJ.js";
-import { s as r } from "../typography-DTRkE9zL.js";
-import { r as i } from "../tone-recipes-CPoExcTE.js";
-import { n as a } from "../action-menu-TzCoSlwL.js";
-import { createContext as o, forwardRef as s, useCallback as c, useContext as l, useEffect as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { DndContext as _, DragOverlay as v, KeyboardSensor as y, PointerSensor as b, useDroppable as x, useSensor as S, useSensors as C } from "@dnd-kit/core";
-import { SortableContext as w, useSortable as T, verticalListSortingStrategy as E } from "@dnd-kit/sortable";
-import { CSS as D } from "@dnd-kit/utilities";
+import { t } from "../utils-BRhFDwuU.js";
+import { n } from "../buttons-DPZekJFu.js";
+import { c as r } from "../typography-UTnveOEy.js";
+import { i } from "../tone-recipes-BPsRAvhu.js";
+import { i as a } from "../popover.recipes-D3j8R8Yp.js";
+import { n as o } from "../action-menu-CllU52Mm.js";
+import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { DndContext as v, DragOverlay as y, KeyboardSensor as b, PointerSensor as x, useDroppable as S, useSensor as C, useSensors as w } from "@dnd-kit/core";
+import { SortableContext as T, useSortable as E, verticalListSortingStrategy as D } from "@dnd-kit/sortable";
+import { CSS as O } from "@dnd-kit/utilities";
 //#region src/components/features/kanban/kanban-keyboard.ts
-function O(e, t, n) {
+function k(e, t, n) {
 	let r = Object.keys(e), i = r.indexOf(t.columnId);
 	if (n === "ArrowLeft" || n === "ArrowRight") {
 		let a = r[i + (n === "ArrowRight" ? 1 : -1)];
@@ -25,7 +26,7 @@ function O(e, t, n) {
 		index: Math.max(0, Math.min(e[t.columnId].length - 1, t.index + (n === "ArrowDown" ? 1 : -1)))
 	} : t;
 }
-function k(e, t, n, r, i) {
+function A(e, t, n, r, i) {
 	return (a, { currentCoordinates: o, context: s }) => {
 		if (![
 			"ArrowUp",
@@ -38,7 +39,7 @@ function k(e, t, n, r, i) {
 		let l = r.current ?? n(String(c.id));
 		if (!l) return;
 		a.preventDefault();
-		let u = O(e, l, a.code);
+		let u = k(e, l, a.code);
 		r.current = u, i?.(u);
 		let d = e[u.columnId][u.index], f = d === void 0 ? u.columnId : t(d), p = s.droppableRects.get(f), m = s.collisionRect;
 		return !p || !m ? o : {
@@ -49,8 +50,8 @@ function k(e, t, n, r, i) {
 }
 //#endregion
 //#region src/components/features/kanban/hooks/use-kanban.ts
-function A({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
-	let i = c((t) => {
+function j({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
+	let i = l((t) => {
 		for (let [r, i] of Object.entries(e)) {
 			let e = i.findIndex((e) => n(e) === t);
 			if (e >= 0) return {
@@ -59,7 +60,7 @@ function A({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
 				item: i[e]
 			};
 		}
-	}, [e, n]), a = c(({ itemId: n, toColumnId: a, toIndex: o }) => {
+	}, [e, n]), a = l(({ itemId: n, toColumnId: a, toIndex: o }) => {
 		let s = i(n);
 		if (!s || !Object.prototype.hasOwnProperty.call(e, a)) return;
 		let { columnId: c, index: l, item: u } = s, d = e[a], f = o === void 0 ? d.length : Math.max(0, Math.min(o, d.length));
@@ -85,28 +86,28 @@ function A({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
 		t,
 		r
 	]);
-	return f(() => ({
+	return p(() => ({
 		findItem: i,
 		move: a
 	}), [i, a]);
 }
 //#endregion
 //#region src/components/features/kanban/kanban-context.tsx
-var j = o(null), M = j.Provider;
-function N() {
-	let e = l(j);
+var M = s(null), N = M.Provider;
+function P() {
+	let e = u(M);
 	if (!e) throw Error("Kanban subcomponents must be rendered inside a <Kanban> root.");
 	return e;
 }
-var P = o(null), F = P.Provider;
-function I() {
-	let e = l(P);
+var F = s(null), I = F.Provider;
+function L() {
+	let e = u(F);
 	if (!e) throw Error("<KanbanItemHandle> / <KanbanItemActions> must be rendered inside a <KanbanItem>.");
 	return e;
 }
 //#endregion
 //#region src/components/features/kanban/kanban.strings.ts
-var L = {
+var R = {
 	announceDragStart: "Picked up item {name}.",
 	announceDragMove: "Moving {name} from {from} to {to}, position {position}.",
 	announceDragEnd: "Dropped {name} into {to}, position {position}.",
@@ -115,38 +116,38 @@ var L = {
 	boardAria: "Kanban board",
 	itemActionsAria: "Item actions"
 };
-function R(e, t) {
+function z(e, t) {
 	return Object.entries(t).reduce((e, [t, n]) => e.replace(RegExp(`\\{${t}\\}`, "g"), n), e);
 }
 //#endregion
 //#region src/components/features/kanban/kanban.tsx
-function z({ value: n, onValueChange: i, getItemValue: a, getItemLabel: o, getColumnLabel: s, onItemMove: l, itemActions: u, onItemClick: v, strings: x, className: w, children: T }) {
-	let E = e(L, x), { findItem: D, move: O } = A({
+function B({ value: n, onValueChange: i, getItemValue: a, getItemLabel: o, getColumnLabel: s, onItemMove: c, itemActions: u, onItemClick: d, strings: y, className: S, children: T }) {
+	let E = e(R, y), { findItem: D, move: O } = j({
 		value: n,
 		onValueChange: i,
 		getItemValue: a,
-		onItemMove: l
-	}), [j, N] = m(null), P = p(null), F = p(null);
-	d(() => {
-		if (j || !F.current) return;
+		onItemMove: c
+	}), [k, M] = h(null), P = m(null), F = m(null);
+	f(() => {
+		if (k || !F.current) return;
 		let e = Array.from(P.current?.querySelectorAll("[data-kanban-item-id]") ?? []).find((e) => e.dataset.kanbanItemId === F.current), t = e?.querySelector("[data-slot=\"kanban-item-handle\"]") ?? e;
 		t && (t.focus(), F.current = null);
-	}, [j, n]);
-	let I = p(null), z = p(null), [B, V] = m(null), H = p(null), U = f(() => k(n, a, D, H, V), [
+	}, [k, n]);
+	let I = m(null), L = m(null), [B, V] = h(null), H = m(null), U = p(() => A(n, a, D, H, V), [
 		n,
 		a,
 		D
-	]), W = C(S(b, { activationConstraint: { distance: 6 } }), S(y, { coordinateGetter: U })), G = f(() => j ? D(j)?.item ?? null : null, [j, D]), K = c((e) => {
+	]), W = w(C(x, { activationConstraint: { distance: 6 } }), C(b, { coordinateGetter: U })), G = p(() => k ? D(k)?.item ?? null : null, [k, D]), K = l((e) => {
 		let t = D(String(e.active.id));
 		I.current = t ? {
 			columnId: t.columnId,
 			index: t.index,
 			name: o?.(t.item) ?? String(e.active.id)
-		} : null, z.current = null, V(null), H.current = null, F.current = e.activatorEvent instanceof KeyboardEvent ? String(e.active.id) : null, N(String(e.active.id));
-	}, [D, o]), q = c((e) => {
-		N(null), V(null);
+		} : null, L.current = null, V(null), H.current = null, F.current = e.activatorEvent instanceof KeyboardEvent ? String(e.active.id) : null, M(String(e.active.id));
+	}, [D, o]), q = l((e) => {
+		M(null), V(null);
 		let { active: t, over: r } = e, i = H.current;
-		if (z.current = i, H.current = null, i) {
+		if (L.current = i, H.current = null, i) {
 			let e = D(String(t.id)), n = e?.columnId === i.columnId && e.index < i.index ? i.index + 1 : i.index;
 			O({
 				itemId: String(t.id),
@@ -169,26 +170,26 @@ function z({ value: n, onValueChange: i, getItemValue: a, getItemLabel: o, getCo
 		O,
 		n,
 		D
-	]), J = f(() => ({
+	]), J = p(() => ({
 		value: n,
 		onValueChange: i,
 		getItemValue: a,
-		activeId: j,
+		activeId: k,
 		activeItem: G,
 		findItem: D,
 		itemActions: u,
-		onItemClick: v
+		onItemClick: d
 	}), [
 		n,
 		i,
 		a,
-		j,
+		k,
 		G,
 		D,
 		u,
-		v
+		d
 	]), Y = (e, t) => {
-		let r = D(e), i = I.current, a = t ? D(t) : void 0, c = H.current ?? z.current ?? a ?? (t && n[t] ? {
+		let r = D(e), i = I.current, a = t ? D(t) : void 0, c = H.current ?? L.current ?? a ?? (t && n[t] ? {
 			columnId: t,
 			index: n[t].length
 		} : i), l = (e) => e ? s?.(e) ?? e : "";
@@ -199,63 +200,63 @@ function z({ value: n, onValueChange: i, getItemValue: a, getItemLabel: o, getCo
 			position: String((c?.index ?? 0) + 1)
 		};
 	};
-	return /* @__PURE__ */ h(M, {
+	return /* @__PURE__ */ g(N, {
 		value: J,
-		children: /* @__PURE__ */ h(_, {
+		children: /* @__PURE__ */ g(v, {
 			sensors: W,
 			onDragStart: K,
 			onDragEnd: q,
 			onDragCancel: () => {
-				H.current = null, V(null), N(null);
+				H.current = null, V(null), M(null);
 			},
 			accessibility: { announcements: {
 				onDragStart({ active: e }) {
-					return R(E.announceDragStart, Y(String(e.id)));
+					return z(E.announceDragStart, Y(String(e.id)));
 				},
 				onDragMove({ active: e, over: t }) {
-					if (!F.current) return R(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
+					if (!F.current) return z(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragOver({ active: e, over: t }) {
-					if (!F.current) return R(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
+					if (!F.current) return z(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragEnd({ active: e, over: t }) {
-					return R(E.announceDragEnd, Y(String(e.id), t ? String(t.id) : void 0));
+					return z(E.announceDragEnd, Y(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragCancel({ active: e }) {
-					return R(E.announceDragCancel, Y(String(e.id)));
+					return z(E.announceDragCancel, Y(String(e.id)));
 				}
 			} },
-			children: /* @__PURE__ */ g("div", {
+			children: /* @__PURE__ */ _("div", {
 				ref: P,
 				role: "application",
 				"aria-label": E.boardAria,
-				className: t("kanban--component", "w-full", w),
-				children: [T, /* @__PURE__ */ h("div", {
+				className: t("kanban--component", "w-full", S),
+				children: [T, /* @__PURE__ */ g("div", {
 					className: "kanban--keyboard-announcement sr-only",
 					role: "status",
 					"aria-live": "assertive",
 					"aria-atomic": "true",
-					children: /* @__PURE__ */ h(r, {
+					children: /* @__PURE__ */ g(r, {
 						tag: "span",
-						children: j && B ? R(E.announceDragMove, Y(j)) : ""
+						children: k && B ? z(E.announceDragMove, Y(k)) : ""
 					})
 				})]
 			})
 		})
 	});
 }
-z.displayName = "Kanban";
-function B({ className: e, style: n, children: r }) {
-	return /* @__PURE__ */ h("div", {
+B.displayName = "Kanban";
+function V({ className: e, style: n, children: r }) {
+	return /* @__PURE__ */ g("div", {
 		className: t("grid w-full gap-space-lg", e),
 		style: n,
 		children: r
 	});
 }
-B.displayName = "KanbanBoard";
-function V({ value: e, className: n, children: r }) {
-	let { setNodeRef: i, isOver: a } = x({ id: e });
-	return /* @__PURE__ */ h("div", {
+V.displayName = "KanbanBoard";
+function H({ value: e, className: n, children: r }) {
+	let { setNodeRef: i, isOver: a } = S({ id: e });
+	return /* @__PURE__ */ g("div", {
 		ref: i,
 		"data-slot": "kanban-column",
 		"data-column-id": e,
@@ -264,22 +265,22 @@ function V({ value: e, className: n, children: r }) {
 		children: r
 	});
 }
-V.displayName = "KanbanColumn";
-function H({ value: e, className: n, children: r }) {
-	let i = N(), a = (i.value[e] ?? []).map((e) => i.getItemValue(e));
-	return /* @__PURE__ */ h(w, {
+H.displayName = "KanbanColumn";
+function U({ value: e, className: n, children: r }) {
+	let i = P(), a = (i.value[e] ?? []).map((e) => i.getItemValue(e));
+	return /* @__PURE__ */ g(T, {
 		items: a,
-		strategy: E,
-		children: /* @__PURE__ */ h("div", {
+		strategy: D,
+		children: /* @__PURE__ */ g("div", {
 			"data-slot": "kanban-column-content",
 			className: t("flex flex-col gap-space-md", n),
 			children: r
 		})
 	});
 }
-H.displayName = "KanbanColumnContent";
-function U({ value: e, className: n, disabled: r = !1, onClick: i, children: a }) {
-	let o = N(), s = o.findItem(e), { attributes: l, listeners: u, setNodeRef: d, setActivatorNodeRef: p, transform: g, transition: _, isDragging: v } = T({
+U.displayName = "KanbanColumnContent";
+function W({ value: e, className: n, disabled: r = !1, onClick: i, children: a }) {
+	let o = P(), s = o.findItem(e), { attributes: c, listeners: u, setNodeRef: d, setActivatorNodeRef: f, transform: m, transition: _, isDragging: v } = E({
 		id: e,
 		disabled: r,
 		data: {
@@ -287,66 +288,66 @@ function U({ value: e, className: n, disabled: r = !1, onClick: i, children: a }
 			index: s?.index
 		}
 	}), y = {
-		transform: D.Transform.toString(g),
+		transform: O.Transform.toString(m),
 		transition: _,
 		opacity: v ? .4 : void 0
-	}, [b, x] = m(0), S = b > 0, C = c(() => (x((e) => e + 1), () => x((e) => Math.max(0, e - 1))), []), w = f(() => ({
+	}, [b, x] = h(0), S = b > 0, C = l(() => (x((e) => e + 1), () => x((e) => Math.max(0, e - 1))), []), w = p(() => ({
 		listeners: u,
-		attributes: l,
-		setActivatorNodeRef: p,
+		attributes: c,
+		setActivatorNodeRef: f,
 		registerHandle: C,
 		itemId: e,
 		item: s?.item ?? null
 	}), [
 		u,
-		l,
-		p,
+		c,
+		f,
 		C,
 		e,
 		s?.item
-	]), E = o.onItemClick, O = c((e) => {
+	]), T = o.onItemClick, D = l((e) => {
 		if (!e.target?.closest("[data-stop-item-click]")) {
 			if (i) {
 				i();
 				return;
 			}
-			E && s?.item !== void 0 && E(s.item);
+			T && s?.item !== void 0 && T(s.item);
 		}
 	}, [
 		i,
-		E,
+		T,
 		s?.item
-	]), k = !!(i || E);
-	return /* @__PURE__ */ h(F, {
+	]), k = !!(i || T);
+	return /* @__PURE__ */ g(I, {
 		value: w,
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ g("div", {
 			ref: d,
 			style: y,
 			"data-slot": "kanban-item",
 			"data-kanban-item-id": e,
 			"data-dragging": v ? "true" : void 0,
 			className: t("touch-none select-none", k && "cursor-pointer", n),
-			onClick: k ? O : void 0,
-			...S ? {} : l,
+			onClick: k ? D : void 0,
+			...S ? {} : c,
 			...S ? {} : u,
 			children: a
 		})
 	});
 }
-U.displayName = "KanbanItem";
-var W = s(function({ className: e, children: r }, i) {
-	let { setActivatorNodeRef: a, listeners: o, attributes: s, registerHandle: l } = I();
-	u(() => l(), [l]);
-	let d = c((e) => {
+W.displayName = "KanbanItem";
+var G = c(function({ className: e, children: r }, i) {
+	let { setActivatorNodeRef: a, listeners: o, attributes: s, registerHandle: c } = L();
+	d(() => c(), [c]);
+	let u = l((e) => {
 		a(e), typeof i == "function" ? i(e) : i && (i.current = e);
 	}, [a, i]);
-	return /* @__PURE__ */ h(n, {
+	return /* @__PURE__ */ g(n, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: "sm",
 		iconOnly: !0,
-		ref: d,
+		ref: u,
 		"data-slot": "kanban-item-handle",
 		"data-stop-item-click": !0,
 		onClick: (e) => e.stopPropagation(),
@@ -356,58 +357,58 @@ var W = s(function({ className: e, children: r }, i) {
 		children: r
 	});
 });
-W.displayName = "KanbanItemHandle";
-function G({ className: t, icon: n, ariaLabel: r }) {
-	let i = N(), o = I(), s = e(L, void 0), c = o.item, l = i.itemActions, u = f(() => !l || c == null ? [] : (typeof l == "function" ? l(c) : l).flatMap((e) => {
-		let t = typeof e.visible == "function" ? e.visible(c) : e.visible ?? !0;
+G.displayName = "KanbanItemHandle";
+function K({ className: t, icon: n, ariaLabel: r }) {
+	let i = P(), s = L(), c = e(R, void 0), l = s.item, u = i.itemActions, d = p(() => !u || l == null ? [] : (typeof u == "function" ? u(l) : u).flatMap((e) => {
+		let t = typeof e.visible == "function" ? e.visible(l) : e.visible ?? !0;
 		if (!t) return [];
-		let n = typeof e.disabled == "function" ? e.disabled(c) : e.disabled ?? !1;
+		let n = typeof e.disabled == "function" ? e.disabled(l) : e.disabled ?? !1;
 		return [{
 			...e,
 			visible: t,
 			disabled: n
 		}];
-	}), [l, c]);
-	if (c === null || u.length === 0) return null;
-	let d = u.map((e) => ({
+	}), [u, l]);
+	if (l === null || d.length === 0) return null;
+	let f = d.map((e) => ({
 		id: e.id,
 		label: e.label,
 		icon: e.icon,
 		disabled: e.disabled,
 		tone: e.tone,
 		buttonStyle: e.buttonStyle,
-		onClick: () => e.onClick(c)
+		onClick: () => e.onClick(l)
 	}));
-	return /* @__PURE__ */ h("span", {
+	return /* @__PURE__ */ g("span", {
 		className: "kanban-item-actions--component inline-flex",
 		"data-stop-item-click": !0,
 		onClick: (e) => e.stopPropagation(),
 		onPointerDown: (e) => e.stopPropagation(),
-		children: /* @__PURE__ */ h(a, {
-			actions: d,
+		children: /* @__PURE__ */ g(o, {
+			actions: f,
 			icon: n ?? void 0,
-			srText: r ?? s.itemActionsAria,
-			width: "w-44",
+			srText: r ?? c.itemActionsAria,
+			width: a.xs,
 			align: "end",
 			density: "table",
 			buttonProps: {
 				className: t,
 				"data-slot": "kanban-item-actions-trigger",
 				"data-stop-item-click": !0,
-				"aria-label": r ?? s.itemActionsAria
+				"aria-label": r ?? c.itemActionsAria
 			}
 		})
 	});
 }
-G.displayName = "KanbanItemActions";
-function K({ className: e, render: n }) {
-	let { activeItem: a, activeId: o, findItem: s } = N();
-	return /* @__PURE__ */ h(v, { children: o ? n ? n({
+K.displayName = "KanbanItemActions";
+function q({ className: e, render: n }) {
+	let { activeItem: a, activeId: o, findItem: s } = P();
+	return /* @__PURE__ */ g(y, { children: o ? n ? n({
 		item: a,
 		columnId: s(o)?.columnId ?? null
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ g("div", {
 		className: t("kanban-overlay--component pointer-events-none rounded-radius border-2 border-dashed p-surface shadow-lg", i.primary.edge, i.primary.wash, e),
-		children: /* @__PURE__ */ h(r, {
+		children: /* @__PURE__ */ g(r, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
@@ -416,8 +417,8 @@ function K({ className: e, render: n }) {
 		})
 	}) : null });
 }
-K.displayName = "KanbanOverlay";
+q.displayName = "KanbanOverlay";
 //#endregion
-export { z as Kanban, B as KanbanBoard, V as KanbanColumn, H as KanbanColumnContent, U as KanbanItem, G as KanbanItemActions, W as KanbanItemHandle, K as KanbanOverlay, L as defaultKanbanStrings, R as interpolateKanbanString, A as useKanban };
+export { B as Kanban, V as KanbanBoard, H as KanbanColumn, U as KanbanColumnContent, W as KanbanItem, K as KanbanItemActions, G as KanbanItemHandle, q as KanbanOverlay, R as defaultKanbanStrings, z as interpolateKanbanString, j as useKanban };
 
 //# sourceMappingURL=kanban.js.map