dishui 0.0.97 → 0.0.104

package/dist/components/pro/Kanban/Kanban.js

@@ -0,0 +1,339 @@
+import e from "../../Card/index.js";
+import { cardsAt as t, createCardMove as n, getCardLocation as r, idText as i, idsEqual as a, locationEquals as o } from "./utils.js";
+/* empty css       */
+import s from "./Swimlanes.js";
+import { useKanbanDrag as c } from "./useKanbanDrag.js";
+import l, { useCallback as u, useEffect as d, useMemo as ee, useRef as te, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/pro/Kanban/Kanban.tsx
+var ne = {
+	loading: "Loading board",
+	empty: "No cards",
+	error: "Could not load the board.",
+	stale: "Outdated data",
+	retry: "Try again",
+	unnamedColumn: "Untitled column",
+	unnamedLane: "Untitled lane",
+	card: "card",
+	lift: "Lifted",
+	move: "Move with the arrow keys.",
+	drop: "Dropped",
+	cancel: "Move cancelled"
+}, g = e.Ticket;
+function _(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+function v(e, t) {
+	if (e !== void 0) return t.find((t) => String(t.id) === String(e))?.id ?? e;
+}
+function y(e, t) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : t;
+}
+function re(e) {
+	return /* @__PURE__ */ m(g, {
+		issueKey: e.issueKey ?? e.id,
+		title: e.title,
+		description: e.description,
+		status: e.status,
+		issueType: e.issueType,
+		assignees: e.assignees,
+		priority: e.priority,
+		labels: e.labels,
+		dueDate: e.dueDate,
+		estimate: e.estimate,
+		subtaskProgress: e.subtaskProgress,
+		disabled: e.disabled
+	});
+}
+function b({ columns: e, lanes: g, cards: b, onCardMove: S, renderCard: C, renderColumnHeader: w, renderLaneHeader: T, readOnly: E = !1, loading: D = !1, error: O, stale: ie = !1, empty: k, onRetry: A, labels: j, dragThreshold: M = 5, columnWidth: N = 280, height: P, collapsedLaneIds: F, defaultCollapsedLaneIds: I, onCollapsedLaneIdsChange: L, className: ae = "", style: R, ...oe }) {
+	let z = ee(() => ({
+		...ne,
+		...j
+	}), [j]), [B, V] = f(null), [H, U] = f(null), [se, W] = f(""), G = te(null), K = u((t, r) => {
+		let i = {
+			columnId: v(r.columnId, e),
+			laneId: g ? v(r.laneId, g) : void 0,
+			index: r.index
+		}, a = n(b, t, i);
+		a && !o(a.from, a.to) && S?.(a);
+	}, [
+		b,
+		e,
+		g,
+		S
+	]), q = c({
+		threshold: M,
+		disabled: E || !S,
+		onDrop: K
+	}), J = q.draggingId ?? B, Y = q.target ?? H, X = u((e = !0) => {
+		B !== null && (V(null), U(null), e && W(z.cancel), requestAnimationFrame(() => G.current?.focus()));
+	}, [B, z.cancel]);
+	d(() => {
+		let e = () => X(!1);
+		return window.addEventListener("blur", e), () => window.removeEventListener("blur", e);
+	}, [X]);
+	let Z = u((t) => {
+		let n = e.find((e) => a(e.id, t.columnId)), r = g?.find((e) => a(e.id, t.laneId));
+		return `${y(n?.title, z.unnamedColumn)}${r ? `, ${y(r.title, z.unnamedLane)}` : ""}, position ${t.index + 1}`;
+	}, [
+		e,
+		g,
+		z.unnamedColumn,
+		z.unnamedLane
+	]), Q = u((n) => {
+		if (B === null || !H) return;
+		let r = Math.max(0, e.findIndex((e) => a(e.id, H.columnId))), i = g ? Math.max(0, g.findIndex((e) => a(e.id, H.laneId))) : 0, o = r, s = i, c = H.index;
+		if (n === "ArrowLeft" && (o = Math.max(0, r - 1)), n === "ArrowRight" && (o = Math.min(e.length - 1, r + 1)), n === "ArrowUp" && (c > 0 ? --c : g && i > 0 && --s), n === "ArrowDown") {
+			let e = t(b.filter((e) => !a(e.id, B)), H.columnId, H.laneId).length;
+			c < e ? c += 1 : g && i < g.length - 1 && (s += 1);
+		}
+		let l = e[o]?.id ?? H.columnId, u = g?.[s]?.id;
+		if (o !== r || s !== i) {
+			let e = t(b.filter((e) => !a(e.id, B)), l, u).length;
+			c = Math.min(c, e);
+		}
+		let d = {
+			columnId: l,
+			laneId: u,
+			index: c
+		};
+		U(d), W(Z(d));
+	}, [
+		b,
+		e,
+		Z,
+		B,
+		H,
+		g
+	]), ce = u((e, t) => {
+		if (!(e.target !== e.currentTarget || t.disabled || E || !S)) {
+			if (e.key === "Escape") {
+				e.preventDefault(), X();
+				return;
+			}
+			if (e.key === " " || e.key === "Enter") {
+				if (e.preventDefault(), e.repeat) return;
+				if (B === null) {
+					let n = r(b, t.id);
+					if (!n) return;
+					G.current = e.currentTarget, V(t.id), U(n), W(`${z.lift} ${y(t.title, z.card)}. ${z.move}`);
+				} else a(B, t.id) && H && (K(t.id, H), V(null), U(null), W(`${z.drop} ${y(t.title, z.card)}. ${Z(H)}.`), requestAnimationFrame(() => G.current?.focus()));
+				return;
+			}
+			B !== null && [
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown"
+			].includes(e.key) && (e.preventDefault(), Q(e.key));
+		}
+	}, [
+		X,
+		b,
+		K,
+		Z,
+		B,
+		H,
+		z,
+		Q,
+		S,
+		E
+	]), $ = (e, n) => {
+		let r = t(b, e.id, n?.id), s = E || !!e.disabled || !!n?.disabled || !S, c = 0;
+		return /* @__PURE__ */ h("div", {
+			className: "dishui-kanban__column",
+			role: "group",
+			"aria-label": y(e.title, z.unnamedColumn),
+			"data-column-id": i(e.id),
+			"data-lane-id": i(n?.id),
+			"data-disabled": s || void 0,
+			children: [!g && /* @__PURE__ */ m("div", {
+				className: "dishui-kanban__column-header",
+				children: w ? w(e, r) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", { children: e.title }), /* @__PURE__ */ m("span", {
+					className: "dishui-kanban__count",
+					children: r.length
+				})] })
+			}), /* @__PURE__ */ h("div", {
+				className: "dishui-kanban__cards",
+				children: [
+					r.length === 0 && J === null && /* @__PURE__ */ m("span", {
+						className: "dishui-kanban__cell-empty",
+						children: z.empty
+					}),
+					/* @__PURE__ */ m(x, {
+						columnId: e.id,
+						laneId: n?.id,
+						index: 0,
+						active: o(Y, {
+							columnId: e.id,
+							laneId: n?.id,
+							index: 0
+						})
+					}),
+					r.map((t) => {
+						let r = J !== null && a(J, t.id), i = c;
+						r || (c += 1);
+						let u = s || !!t.disabled;
+						return /* @__PURE__ */ h(l.Fragment, { children: [/* @__PURE__ */ m("div", {
+							className: "dishui-kanban__card",
+							role: "button",
+							tabIndex: u ? -1 : 0,
+							"aria-disabled": u,
+							"aria-describedby": "dishui-kanban-instructions",
+							"data-kanban-disabled": u || void 0,
+							"data-dragging": r || void 0,
+							onPointerDown: (e) => q.onPointerDown(e, t.id),
+							onPointerMove: q.onPointerMove,
+							onPointerUp: q.onPointerUp,
+							onPointerCancel: q.onPointerCancel,
+							onLostPointerCapture: q.onLostPointerCapture,
+							onKeyDown: (e) => ce(e, t),
+							children: C ? C(t, {
+								dragging: r,
+								keyboardDragging: a(B ?? void 0, t.id),
+								disabled: u
+							}) : re(t)
+						}), !r && /* @__PURE__ */ m(x, {
+							columnId: e.id,
+							laneId: n?.id,
+							index: i + 1,
+							active: o(Y, {
+								columnId: e.id,
+								laneId: n?.id,
+								index: i + 1
+							})
+						})] }, String(t.id));
+					})
+				]
+			})]
+		}, `${i(n?.id)}:${i(e.id)}`);
+	}, le = {
+		...R,
+		height: _(P) ?? R?.height,
+		"--dishui-kanban-column-width": _(N)
+	};
+	return /* @__PURE__ */ h("div", {
+		...oe,
+		className: `dishui-kanban ${ae}`.trim(),
+		style: le,
+		"aria-busy": D || void 0,
+		children: [
+			/* @__PURE__ */ m("span", {
+				id: "dishui-kanban-instructions",
+				className: "dishui-kanban__sr-only",
+				children: "Press Space or Enter to lift and drop. Use arrow keys to choose a destination. Press Escape to cancel."
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "dishui-kanban__sr-only",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: se
+			}),
+			ie && /* @__PURE__ */ m("div", {
+				className: "dishui-kanban__stale",
+				role: "status",
+				children: z.stale
+			}),
+			D ? /* @__PURE__ */ h("div", {
+				className: "dishui-kanban__state",
+				role: "status",
+				children: [/* @__PURE__ */ m("span", { children: z.loading }), /* @__PURE__ */ h("div", {
+					className: "dishui-kanban__skeletons",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ m("i", {}),
+						/* @__PURE__ */ m("i", {}),
+						/* @__PURE__ */ m("i", {})
+					]
+				})]
+			}) : O ? /* @__PURE__ */ h("div", {
+				className: "dishui-kanban__state dishui-kanban__state--error",
+				role: "alert",
+				children: [
+					/* @__PURE__ */ m("strong", { children: z.error }),
+					/* @__PURE__ */ m("span", { children: O }),
+					A && /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: A,
+						children: z.retry
+					})
+				]
+			}) : e.length === 0 || b.length === 0 ? /* @__PURE__ */ m("div", {
+				className: "dishui-kanban__state dishui-kanban__state--empty",
+				children: k ?? z.empty
+			}) : /* @__PURE__ */ h("div", {
+				className: "dishui-kanban__scroll",
+				"data-dragging": J !== null || void 0,
+				children: [g && g.length > 0 && /* @__PURE__ */ m("div", {
+					className: "dishui-kanban__column-headers",
+					style: { gridTemplateColumns: `repeat(${e.length}, minmax(var(--dishui-kanban-column-width), 1fr))` },
+					children: e.map((e) => {
+						let t = b.filter((t) => a(t.columnId, e.id));
+						return /* @__PURE__ */ m("div", {
+							className: "dishui-kanban__column-header",
+							children: w ? w(e, t) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", { children: e.title }), /* @__PURE__ */ m("span", {
+								className: "dishui-kanban__count",
+								children: t.length
+							})] })
+						}, String(e.id));
+					})
+				}), g && g.length > 0 ? /* @__PURE__ */ m(s, {
+					lanes: g,
+					collapsedLaneIds: F,
+					defaultCollapsedLaneIds: I,
+					onCollapsedLaneIdsChange: L,
+					renderLaneHeader: (e, t) => {
+						let n = b.filter((t) => a(t.laneId, e.id));
+						return /* @__PURE__ */ h("button", {
+							className: "dishui-swimlane__toggle",
+							type: "button",
+							"aria-expanded": !t.collapsed,
+							onClick: t.toggle,
+							children: [
+								/* @__PURE__ */ m("span", {
+									className: "dishui-swimlane__chevron",
+									"aria-hidden": "true",
+									children: "▾"
+								}),
+								/* @__PURE__ */ m("span", {
+									className: "dishui-swimlane__header-content",
+									children: T ? T(e, n) : e.title
+								}),
+								/* @__PURE__ */ m("span", {
+									className: "dishui-kanban__count",
+									children: n.length
+								})
+							]
+						});
+					},
+					children: ({ lane: t }) => /* @__PURE__ */ m("div", {
+						className: "dishui-kanban__grid",
+						style: { gridTemplateColumns: `repeat(${e.length}, minmax(var(--dishui-kanban-column-width), 1fr))` },
+						children: e.map((e) => $(e, t))
+					})
+				}) : /* @__PURE__ */ m("div", {
+					className: "dishui-kanban__grid",
+					style: { gridTemplateColumns: `repeat(${e.length}, minmax(var(--dishui-kanban-column-width), 1fr))` },
+					children: e.map((e) => $(e))
+				})]
+			})
+		]
+	});
+}
+function x({ columnId: e, laneId: t, index: n, active: r }) {
+	return /* @__PURE__ */ m("div", {
+		className: "dishui-kanban__drop-zone",
+		"data-kanban-drop": "true",
+		"data-column-id": String(e),
+		"data-lane-id": t === void 0 ? "" : String(t),
+		"data-index": n,
+		"data-active": r || void 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ m("span", {})
+	});
+}
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=Kanban.js.map

package/dist/components/pro/Kanban/Kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kanban.js","names":[],"sources":["../../../../src/components/pro/Kanban/Kanban.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport Card from \"../../Card\";\nimport Swimlanes from \"./Swimlanes\";\nimport type {\n  KanbanCard,\n  KanbanColumn,\n  KanbanDragTarget,\n  KanbanId,\n  KanbanLane,\n  KanbanLabels,\n  KanbanLocation,\n  KanbanProps,\n} from \"./types\";\nimport { useKanbanDrag } from \"./useKanbanDrag\";\nimport { cardsAt, createCardMove, getCardLocation, idText, idsEqual, locationEquals } from \"./utils\";\nimport \"./styles.css\";\n\nconst DEFAULT_LABELS: Required<KanbanLabels> = {\n  loading: \"Loading board\",\n  empty: \"No cards\",\n  error: \"Could not load the board.\",\n  stale: \"Outdated data\",\n  retry: \"Try again\",\n  unnamedColumn: \"Untitled column\",\n  unnamedLane: \"Untitled lane\",\n  card: \"card\",\n  lift: \"Lifted\",\n  move: \"Move with the arrow keys.\",\n  drop: \"Dropped\",\n  cancel: \"Move cancelled\",\n};\n\nconst DefaultTicket = Card.Ticket;\n\nfunction cssSize(value: number | string | undefined): string | undefined {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nfunction resolveId(value: KanbanId | undefined, items: readonly { id: KanbanId }[]): KanbanId | undefined {\n  if (value === undefined) return undefined;\n  return items.find(item => String(item.id) === String(value))?.id ?? value;\n}\n\nfunction displayText(value: React.ReactNode, fallback: string): string {\n  return typeof value === \"string\" || typeof value === \"number\" ? String(value) : fallback;\n}\n\nfunction renderDefaultCard(card: KanbanCard) {\n  return (\n    <DefaultTicket\n      issueKey={card.issueKey ?? card.id}\n      title={card.title}\n      description={card.description}\n      status={card.status}\n      issueType={card.issueType}\n      assignees={card.assignees}\n      priority={card.priority}\n      labels={card.labels}\n      dueDate={card.dueDate}\n      estimate={card.estimate}\n      subtaskProgress={card.subtaskProgress}\n      disabled={card.disabled}\n    />\n  );\n}\n\nexport default function Kanban({\n  columns,\n  lanes,\n  cards,\n  onCardMove,\n  renderCard,\n  renderColumnHeader,\n  renderLaneHeader,\n  readOnly = false,\n  loading = false,\n  error,\n  stale = false,\n  empty,\n  onRetry,\n  labels: labelsInput,\n  dragThreshold = 5,\n  columnWidth = 280,\n  height,\n  collapsedLaneIds,\n  defaultCollapsedLaneIds,\n  onCollapsedLaneIdsChange,\n  className = \"\",\n  style,\n  ...rest\n}: KanbanProps) {\n  const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelsInput }), [labelsInput]);\n  const [keyboardCardId, setKeyboardCardId] = useState<KanbanId | null>(null);\n  const [keyboardTarget, setKeyboardTarget] = useState<KanbanLocation | null>(null);\n  const [announcement, setAnnouncement] = useState(\"\");\n  const keyboardCardRef = useRef<HTMLElement | null>(null);\n\n  const commitMove = useCallback((cardId: KanbanId, rawTarget: KanbanDragTarget) => {\n    const target: KanbanLocation = {\n      columnId: resolveId(rawTarget.columnId, columns) as KanbanId,\n      laneId: lanes ? resolveId(rawTarget.laneId, lanes) : undefined,\n      index: rawTarget.index,\n    };\n    const move = createCardMove(cards, cardId, target);\n    if (!move || locationEquals(move.from, move.to)) return;\n    onCardMove?.(move);\n  }, [cards, columns, lanes, onCardMove]);\n\n  const drag = useKanbanDrag({\n    threshold: dragThreshold,\n    disabled: readOnly || !onCardMove,\n    onDrop: commitMove,\n  });\n\n  const activeCardId = drag.draggingId ?? keyboardCardId;\n  const activeTarget = drag.target ?? keyboardTarget;\n\n  const cancelKeyboard = useCallback((announce = true) => {\n    if (keyboardCardId === null) return;\n    setKeyboardCardId(null);\n    setKeyboardTarget(null);\n    if (announce) setAnnouncement(labels.cancel);\n    requestAnimationFrame(() => keyboardCardRef.current?.focus());\n  }, [keyboardCardId, labels.cancel]);\n\n  useEffect(() => {\n    const onBlur = () => cancelKeyboard(false);\n    window.addEventListener(\"blur\", onBlur);\n    return () => window.removeEventListener(\"blur\", onBlur);\n  }, [cancelKeyboard]);\n\n  const describeLocation = useCallback((target: KanbanLocation) => {\n    const column = columns.find(item => idsEqual(item.id, target.columnId));\n    const lane = lanes?.find(item => idsEqual(item.id, target.laneId));\n    const columnName = displayText(column?.title, labels.unnamedColumn);\n    const laneName = lane ? `, ${displayText(lane.title, labels.unnamedLane)}` : \"\";\n    return `${columnName}${laneName}, position ${target.index + 1}`;\n  }, [columns, lanes, labels.unnamedColumn, labels.unnamedLane]);\n\n  const moveKeyboardTarget = useCallback((key: string) => {\n    if (keyboardCardId === null || !keyboardTarget) return;\n    const columnIndex = Math.max(0, columns.findIndex(column => idsEqual(column.id, keyboardTarget.columnId)));\n    const laneIndex = lanes ? Math.max(0, lanes.findIndex(lane => idsEqual(lane.id, keyboardTarget.laneId))) : 0;\n    let nextColumnIndex = columnIndex;\n    let nextLaneIndex = laneIndex;\n    let nextIndex = keyboardTarget.index;\n\n    if (key === \"ArrowLeft\") nextColumnIndex = Math.max(0, columnIndex - 1);\n    if (key === \"ArrowRight\") nextColumnIndex = Math.min(columns.length - 1, columnIndex + 1);\n    if (key === \"ArrowUp\") {\n      if (nextIndex > 0) nextIndex -= 1;\n      else if (lanes && laneIndex > 0) nextLaneIndex -= 1;\n    }\n    if (key === \"ArrowDown\") {\n      const count = cardsAt(cards.filter(card => !idsEqual(card.id, keyboardCardId)), keyboardTarget.columnId, keyboardTarget.laneId).length;\n      if (nextIndex < count) nextIndex += 1;\n      else if (lanes && laneIndex < lanes.length - 1) nextLaneIndex += 1;\n    }\n\n    const columnId = columns[nextColumnIndex]?.id ?? keyboardTarget.columnId;\n    const laneId = lanes?.[nextLaneIndex]?.id;\n    if (nextColumnIndex !== columnIndex || nextLaneIndex !== laneIndex) {\n      const targetCount = cardsAt(cards.filter(card => !idsEqual(card.id, keyboardCardId)), columnId, laneId).length;\n      nextIndex = Math.min(nextIndex, targetCount);\n    }\n    const next = { columnId, laneId, index: nextIndex };\n    setKeyboardTarget(next);\n    setAnnouncement(describeLocation(next));\n  }, [cards, columns, describeLocation, keyboardCardId, keyboardTarget, lanes]);\n\n  const onCardKeyDown = useCallback((event: React.KeyboardEvent<HTMLElement>, card: KanbanCard) => {\n    if (event.target !== event.currentTarget || card.disabled || readOnly || !onCardMove) return;\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      cancelKeyboard();\n      return;\n    }\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      if (event.repeat) return;\n      if (keyboardCardId === null) {\n        const from = getCardLocation(cards, card.id);\n        if (!from) return;\n        keyboardCardRef.current = event.currentTarget;\n        setKeyboardCardId(card.id);\n        setKeyboardTarget(from);\n        setAnnouncement(`${labels.lift} ${displayText(card.title, labels.card)}. ${labels.move}`);\n      } else if (idsEqual(keyboardCardId, card.id) && keyboardTarget) {\n        commitMove(card.id, keyboardTarget);\n        setKeyboardCardId(null);\n        setKeyboardTarget(null);\n        setAnnouncement(`${labels.drop} ${displayText(card.title, labels.card)}. ${describeLocation(keyboardTarget)}.`);\n        requestAnimationFrame(() => keyboardCardRef.current?.focus());\n      }\n      return;\n    }\n    if (keyboardCardId !== null && [\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      event.preventDefault();\n      moveKeyboardTarget(event.key);\n    }\n  }, [cancelKeyboard, cards, commitMove, describeLocation, keyboardCardId, keyboardTarget, labels, moveKeyboardTarget, onCardMove, readOnly]);\n\n\n  const renderCell = (column: KanbanColumn, lane?: KanbanLane) => {\n    const cellCards = cardsAt(cards, column.id, lane?.id);\n    const disabledCell = readOnly || !!column.disabled || !!lane?.disabled || !onCardMove;\n    let insertionIndex = 0;\n    return (\n      <div\n        className=\"dishui-kanban__column\"\n        key={`${idText(lane?.id)}:${idText(column.id)}`}\n        role=\"group\"\n        aria-label={displayText(column.title, labels.unnamedColumn)}\n        data-column-id={idText(column.id)}\n        data-lane-id={idText(lane?.id)}\n        data-disabled={disabledCell || undefined}\n      >\n        {!lanes && (\n          <div className=\"dishui-kanban__column-header\">\n            {renderColumnHeader ? renderColumnHeader(column, cellCards) : (\n              <><span>{column.title}</span><span className=\"dishui-kanban__count\">{cellCards.length}</span></>\n            )}\n          </div>\n        )}\n        <div className=\"dishui-kanban__cards\">\n          {cellCards.length === 0 && activeCardId === null && <span className=\"dishui-kanban__cell-empty\">{labels.empty}</span>}\n          <DropIndicator columnId={column.id} laneId={lane?.id} index={0} active={locationEquals(activeTarget, { columnId: column.id, laneId: lane?.id, index: 0 })} />\n          {cellCards.map(card => {\n            const isActive = activeCardId !== null && idsEqual(activeCardId, card.id);\n            const cardIndex = insertionIndex;\n            if (!isActive) insertionIndex += 1;\n            const cardDisabled = disabledCell || !!card.disabled;\n            return (\n              <React.Fragment key={String(card.id)}>\n                <div\n                  className=\"dishui-kanban__card\"\n                  role=\"button\"\n                  tabIndex={cardDisabled ? -1 : 0}\n                  aria-disabled={cardDisabled}\n                  aria-describedby=\"dishui-kanban-instructions\"\n                  data-kanban-disabled={cardDisabled || undefined}\n                  data-dragging={isActive || undefined}\n                  onPointerDown={event => drag.onPointerDown(event, card.id)}\n                  onPointerMove={drag.onPointerMove}\n                  onPointerUp={drag.onPointerUp}\n                  onPointerCancel={drag.onPointerCancel}\n                  onLostPointerCapture={drag.onLostPointerCapture}\n                  onKeyDown={event => onCardKeyDown(event, card)}\n                >\n                  {renderCard ? renderCard(card, { dragging: isActive, keyboardDragging: idsEqual(keyboardCardId ?? undefined, card.id), disabled: cardDisabled }) : renderDefaultCard(card)}\n                </div>\n                {!isActive && (\n                  <DropIndicator\n                    columnId={column.id}\n                    laneId={lane?.id}\n                    index={cardIndex + 1}\n                    active={locationEquals(activeTarget, { columnId: column.id, laneId: lane?.id, index: cardIndex + 1 })}\n                  />\n                )}\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    );\n  };\n\n  const boardStyle = {\n    ...style,\n    height: cssSize(height) ?? style?.height,\n    \"--dishui-kanban-column-width\": cssSize(columnWidth),\n  } as React.CSSProperties;\n\n  return (\n    <div {...rest} className={`dishui-kanban ${className}`.trim()} style={boardStyle} aria-busy={loading || undefined}>\n      <span id=\"dishui-kanban-instructions\" className=\"dishui-kanban__sr-only\">\n        Press Space or Enter to lift and drop. Use arrow keys to choose a destination. Press Escape to cancel.\n      </span>\n      <div className=\"dishui-kanban__sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{announcement}</div>\n\n      {stale && <div className=\"dishui-kanban__stale\" role=\"status\">{labels.stale}</div>}\n      {loading ? (\n        <div className=\"dishui-kanban__state\" role=\"status\">\n          <span>{labels.loading}</span>\n          <div className=\"dishui-kanban__skeletons\" aria-hidden=\"true\"><i /><i /><i /></div>\n        </div>\n      ) : error ? (\n        <div className=\"dishui-kanban__state dishui-kanban__state--error\" role=\"alert\">\n          <strong>{labels.error}</strong><span>{error}</span>\n          {onRetry && <button type=\"button\" onClick={onRetry}>{labels.retry}</button>}\n        </div>\n      ) : columns.length === 0 || cards.length === 0 ? (\n        <div className=\"dishui-kanban__state dishui-kanban__state--empty\">{empty ?? labels.empty}</div>\n      ) : (\n        <div className=\"dishui-kanban__scroll\" data-dragging={activeCardId !== null || undefined}>\n          {lanes && lanes.length > 0 && (\n            <div className=\"dishui-kanban__column-headers\" style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(var(--dishui-kanban-column-width), 1fr))` }}>\n              {columns.map(column => {\n                const columnCards = cards.filter(card => idsEqual(card.columnId, column.id));\n                return <div className=\"dishui-kanban__column-header\" key={String(column.id)}>{renderColumnHeader ? renderColumnHeader(column, columnCards) : <><span>{column.title}</span><span className=\"dishui-kanban__count\">{columnCards.length}</span></>}</div>;\n              })}\n            </div>\n          )}\n          {lanes && lanes.length > 0 ? (\n            <Swimlanes\n              lanes={lanes}\n              collapsedLaneIds={collapsedLaneIds}\n              defaultCollapsedLaneIds={defaultCollapsedLaneIds}\n              onCollapsedLaneIdsChange={onCollapsedLaneIdsChange}\n              renderLaneHeader={(lane, context) => {\n                const laneCards = cards.filter(card => idsEqual(card.laneId, lane.id));\n                return (\n                  <button className=\"dishui-swimlane__toggle\" type=\"button\" aria-expanded={!context.collapsed} onClick={context.toggle}>\n                    <span className=\"dishui-swimlane__chevron\" aria-hidden=\"true\">▾</span>\n                    <span className=\"dishui-swimlane__header-content\">{renderLaneHeader ? renderLaneHeader(lane, laneCards) : lane.title}</span>\n                    <span className=\"dishui-kanban__count\">{laneCards.length}</span>\n                  </button>\n                );\n              }}\n            >\n              {({ lane }) => <div className=\"dishui-kanban__grid\" style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(var(--dishui-kanban-column-width), 1fr))` }}>{columns.map(column => renderCell(column, lane))}</div>}\n            </Swimlanes>\n          ) : (\n            <div className=\"dishui-kanban__grid\" style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(var(--dishui-kanban-column-width), 1fr))` }}>{columns.map(column => renderCell(column))}</div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DropIndicator({ columnId, laneId, index, active }: KanbanLocation & { active: boolean }) {\n  return (\n    <div\n      className=\"dishui-kanban__drop-zone\"\n      data-kanban-drop=\"true\"\n      data-column-id={String(columnId)}\n      data-lane-id={laneId === undefined ? \"\" : String(laneId)}\n      data-index={index}\n      data-active={active || undefined}\n      aria-hidden=\"true\"\n    ><span /></div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/pro/Kanban/Swimlanes.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { KanbanLane, SwimlanesProps } from "./types";
+export default function Swimlanes<TLane extends KanbanLane = KanbanLane>({ lanes, children, renderLaneHeader, collapsedLaneIds, defaultCollapsedLaneIds, onCollapsedLaneIdsChange, collapsible, empty, className, laneClassName, ...rest }: SwimlanesProps<TLane>): React.JSX.Element;

package/dist/components/pro/Kanban/Swimlanes.js

@@ -0,0 +1,60 @@
+import { idsEqual as e } from "./utils.js";
+/* empty css       */
+import { useCallback as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/pro/Kanban/Swimlanes.tsx
+var a = [];
+function o({ lanes: o, children: s, renderLaneHeader: c, collapsedLaneIds: l, defaultCollapsedLaneIds: u = a, onCollapsedLaneIdsChange: d, collapsible: f = !0, empty: p = "No lanes", className: m = "", laneClassName: h = "", ...g }) {
+	let _ = l !== void 0, [v, y] = n(u), b = (_ ? l : v).filter((t) => o.some((n) => e(n.id, t))), x = t((t) => {
+		let n = b.some((n) => e(n, t)) ? b.filter((n) => !e(n, t)) : [...b, t];
+		_ || y(n), d?.(n);
+	}, [
+		b,
+		_,
+		d
+	]);
+	return /* @__PURE__ */ r("div", {
+		...g,
+		className: `dishui-swimlanes ${m}`.trim(),
+		children: o.length === 0 ? /* @__PURE__ */ r("div", {
+			className: "dishui-swimlanes__empty",
+			children: p
+		}) : o.map((t) => {
+			let n = b.some((n) => e(n, t.id)), a = {
+				lane: t,
+				collapsed: n,
+				toggle: () => x(t.id)
+			};
+			return /* @__PURE__ */ i("section", {
+				className: `dishui-swimlane ${h}`.trim(),
+				"data-lane-id": String(t.id),
+				"data-collapsed": n || void 0,
+				children: [/* @__PURE__ */ r("header", {
+					className: "dishui-swimlane__header",
+					children: c ? c(t, a) : /* @__PURE__ */ i("button", {
+						className: "dishui-swimlane__toggle",
+						type: "button",
+						disabled: !f,
+						"aria-expanded": !n,
+						"aria-controls": `dishui-swimlane-${String(t.id)}`,
+						onClick: a.toggle,
+						children: [/* @__PURE__ */ r("span", {
+							className: "dishui-swimlane__chevron",
+							"aria-hidden": "true",
+							children: "▾"
+						}), /* @__PURE__ */ r("span", { children: t.title })]
+					})
+				}), /* @__PURE__ */ r("div", {
+					id: `dishui-swimlane-${String(t.id)}`,
+					className: "dishui-swimlane__content",
+					hidden: n,
+					children: typeof s == "function" ? s(a) : s
+				})]
+			}, String(t.id));
+		})
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=Swimlanes.js.map

package/dist/components/pro/Kanban/Swimlanes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swimlanes.js","names":[],"sources":["../../../../src/components/pro/Kanban/Swimlanes.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport type { KanbanId, KanbanLane, SwimlanesProps } from \"./types\";\nimport { idsEqual } from \"./utils\";\nimport \"./styles.css\";\n\nconst EMPTY_IDS: KanbanId[] = [];\n\nexport default function Swimlanes<TLane extends KanbanLane = KanbanLane>({\n  lanes,\n  children,\n  renderLaneHeader,\n  collapsedLaneIds,\n  defaultCollapsedLaneIds = EMPTY_IDS,\n  onCollapsedLaneIdsChange,\n  collapsible = true,\n  empty = \"No lanes\",\n  className = \"\",\n  laneClassName = \"\",\n  ...rest\n}: SwimlanesProps<TLane>) {\n  const controlled = collapsedLaneIds !== undefined;\n  const [internalIds, setInternalIds] = useState<KanbanId[]>(defaultCollapsedLaneIds);\n  const sourceIds = controlled ? collapsedLaneIds : internalIds;\n  const collapsedIds = sourceIds.filter(id => lanes.some(lane => idsEqual(lane.id, id)));\n\n  const toggleLane = useCallback((id: KanbanId) => {\n    const next = collapsedIds.some(item => idsEqual(item, id))\n      ? collapsedIds.filter(item => !idsEqual(item, id))\n      : [...collapsedIds, id];\n    if (!controlled) setInternalIds(next);\n    onCollapsedLaneIdsChange?.(next);\n  }, [collapsedIds, controlled, onCollapsedLaneIdsChange]);\n\n  return (\n    <div {...rest} className={`dishui-swimlanes ${className}`.trim()}>\n      {lanes.length === 0 ? <div className=\"dishui-swimlanes__empty\">{empty}</div> : lanes.map(lane => {\n        const collapsed = collapsedIds.some(id => idsEqual(id, lane.id));\n        const context = { lane, collapsed, toggle: () => toggleLane(lane.id) };\n        return (\n          <section\n            className={`dishui-swimlane ${laneClassName}`.trim()}\n            key={String(lane.id)}\n            data-lane-id={String(lane.id)}\n            data-collapsed={collapsed || undefined}\n          >\n            <header className=\"dishui-swimlane__header\">\n              {renderLaneHeader ? renderLaneHeader(lane, context) : (\n                <button\n                  className=\"dishui-swimlane__toggle\"\n                  type=\"button\"\n                  disabled={!collapsible}\n                  aria-expanded={!collapsed}\n                  aria-controls={`dishui-swimlane-${String(lane.id)}`}\n                  onClick={context.toggle}\n                >\n                  <span className=\"dishui-swimlane__chevron\" aria-hidden=\"true\">▾</span>\n                  <span>{lane.title}</span>\n                </button>\n              )}\n            </header>\n            <div id={`dishui-swimlane-${String(lane.id)}`} className=\"dishui-swimlane__content\" hidden={collapsed}>\n              {typeof children === \"function\" ? children(context) : children}\n            </div>\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAwB,CAAC;AAE/B,SAAwB,EAAiD,EACvE,UACA,aACA,qBACA,qBACA,6BAA0B,GAC1B,6BACA,iBAAc,IACd,WAAQ,YACR,eAAY,IACZ,mBAAgB,IAChB,GAAG,KACqB;CACxB,IAAM,IAAa,MAAqB,KAAA,GAClC,CAAC,GAAa,KAAkB,EAAqB,CAAuB,GAE5E,KADY,IAAa,IAAmB,EAAA,CACnB,QAAO,MAAM,EAAM,MAAK,MAAQ,EAAS,EAAK,IAAI,CAAE,CAAC,CAAC,GAE/E,IAAa,GAAa,MAAiB;EAC/C,IAAM,IAAO,EAAa,MAAK,MAAQ,EAAS,GAAM,CAAE,CAAC,IACrD,EAAa,QAAO,MAAQ,CAAC,EAAS,GAAM,CAAE,CAAC,IAC/C,CAAC,GAAG,GAAc,CAAE;EAExB,AADK,KAAY,EAAe,CAAI,GACpC,IAA2B,CAAI;CACjC,GAAG;EAAC;EAAc;EAAY;CAAwB,CAAC;CAEvD,OACE,kBAAC,OAAD;EAAK,GAAI;EAAM,WAAW,oBAAoB,IAAY,KAAK;EAC5D,UAAA,EAAM,WAAW,IAAI,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAW,CAAA,IAAI,EAAM,KAAI,MAAQ;GAC/F,IAAM,IAAY,EAAa,MAAK,MAAM,EAAS,GAAI,EAAK,EAAE,CAAC,GACzD,IAAU;IAAE;IAAM;IAAW,cAAc,EAAW,EAAK,EAAE;GAAE;GACrE,OACE,kBAAC,WAAD;IACE,WAAW,mBAAmB,IAAgB,KAAK;IAEnD,gBAAc,OAAO,EAAK,EAAE;IAC5B,kBAAgB,KAAa,KAAA;IAJ/B,UAAA,CAME,kBAAC,UAAD;KAAQ,WAAU;KACf,UAAA,IAAmB,EAAiB,GAAM,CAAO,IAChD,kBAAC,UAAD;MACE,WAAU;MACV,MAAK;MACL,UAAU,CAAC;MACX,iBAAe,CAAC;MAChB,iBAAe,mBAAmB,OAAO,EAAK,EAAE;MAChD,SAAS,EAAQ;MANnB,UAAA,CAQE,kBAAC,QAAD;OAAM,WAAU;OAA2B,eAAY;OAAO,UAAA;MAAO,CAAA,GACrE,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CAClB;;IAEJ,CAAA,GACR,kBAAC,OAAD;KAAK,IAAI,mBAAmB,OAAO,EAAK,EAAE;KAAK,WAAU;KAA2B,QAAQ;KACzF,UAAA,OAAO,KAAa,aAAa,EAAS,CAAO,IAAI;IACnD,CAAA,CACE;GAtBF,GAAA,OAAO,EAAK,EAAE,CAsBZ;EAEb,CAAC;CACE,CAAA;AAET"}

package/dist/components/pro/Kanban/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Kanban } from "./Kanban";
+export { default as Swimlanes } from "./Swimlanes";
+export { useKanbanDrag } from "./useKanbanDrag";
+export { moveKanbanCard, cardsAt, getCardLocation, createCardMove } from "./utils";
+export * from "./types";

package/dist/components/pro/Kanban/types.d.ts

@@ -0,0 +1,103 @@
+import type React from "react";
+import type { CardTicketAssignee, CardTicketIssueType, CardTicketLabel, CardTicketPriority, CardTicketStatus, CardTicketSubtaskProgress } from "../../Card";
+export type KanbanId = string | number;
+export interface KanbanColumn {
+    id: KanbanId;
+    title: React.ReactNode;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface KanbanLane {
+    id: KanbanId;
+    title: React.ReactNode;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface KanbanCard {
+    id: KanbanId;
+    columnId: KanbanId;
+    laneId?: KanbanId;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    issueKey?: React.ReactNode;
+    status?: CardTicketStatus | React.ReactNode;
+    issueType?: CardTicketIssueType | React.ReactNode;
+    assignees?: CardTicketAssignee[];
+    priority?: CardTicketPriority;
+    labels?: Array<CardTicketLabel | React.ReactNode>;
+    dueDate?: React.ReactNode;
+    estimate?: React.ReactNode;
+    subtaskProgress?: CardTicketSubtaskProgress;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface KanbanLocation {
+    columnId: KanbanId;
+    laneId?: KanbanId;
+    index: number;
+}
+export interface KanbanCardMove {
+    card: KanbanCard;
+    from: KanbanLocation;
+    to: KanbanLocation;
+    cards: KanbanCard[];
+}
+export interface KanbanRenderContext {
+    dragging: boolean;
+    keyboardDragging: boolean;
+    disabled: boolean;
+}
+export interface KanbanLabels {
+    loading?: string;
+    empty?: string;
+    error?: string;
+    stale?: string;
+    retry?: string;
+    unnamedColumn?: string;
+    unnamedLane?: string;
+    card?: string;
+    lift?: string;
+    move?: string;
+    drop?: string;
+    cancel?: string;
+}
+export interface KanbanProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onError"> {
+    columns: KanbanColumn[];
+    lanes?: KanbanLane[];
+    cards: KanbanCard[];
+    onCardMove?: (move: KanbanCardMove) => void;
+    renderCard?: (card: KanbanCard, context: KanbanRenderContext) => React.ReactNode;
+    renderColumnHeader?: (column: KanbanColumn, cards: KanbanCard[]) => React.ReactNode;
+    renderLaneHeader?: (lane: KanbanLane, cards: KanbanCard[]) => React.ReactNode;
+    readOnly?: boolean;
+    loading?: boolean;
+    error?: React.ReactNode;
+    stale?: boolean;
+    empty?: React.ReactNode;
+    onRetry?: () => void;
+    labels?: KanbanLabels;
+    dragThreshold?: number;
+    columnWidth?: number | string;
+    height?: number | string;
+    collapsedLaneIds?: KanbanId[];
+    defaultCollapsedLaneIds?: KanbanId[];
+    onCollapsedLaneIdsChange?: (ids: KanbanId[]) => void;
+}
+export interface SwimlaneRenderContext<TLane> {
+    lane: TLane;
+    collapsed: boolean;
+    toggle: () => void;
+}
+export interface SwimlanesProps<TLane extends KanbanLane = KanbanLane> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    lanes: TLane[];
+    children?: React.ReactNode | ((context: SwimlaneRenderContext<TLane>) => React.ReactNode);
+    renderLaneHeader?: (lane: TLane, context: SwimlaneRenderContext<TLane>) => React.ReactNode;
+    collapsedLaneIds?: KanbanId[];
+    defaultCollapsedLaneIds?: KanbanId[];
+    onCollapsedLaneIdsChange?: (ids: KanbanId[]) => void;
+    collapsible?: boolean;
+    empty?: React.ReactNode;
+    laneClassName?: string;
+}
+export interface KanbanDragTarget extends KanbanLocation {
+}

package/dist/components/pro/Kanban/useKanbanDrag.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { KanbanDragTarget, KanbanId } from "./types";
+export interface UseKanbanDragOptions {
+    threshold?: number;
+    disabled?: boolean;
+    onDrop: (cardId: KanbanId, target: KanbanDragTarget) => void;
+}
+export declare function useKanbanDrag({ threshold, disabled, onDrop }: UseKanbanDragOptions): {
+    draggingId: KanbanId | null;
+    target: KanbanDragTarget | null;
+    onPointerDown: (event: React.PointerEvent<HTMLElement>, cardId: KanbanId) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerCancel: () => void;
+    onLostPointerCapture: () => void;
+    cancelDrag: () => void;
+};

package/dist/components/pro/Kanban/useKanbanDrag.js

@@ -0,0 +1,69 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/pro/Kanban/useKanbanDrag.ts
+function i(e, t) {
+	let n = document.elementFromPoint(e, t), r = n?.closest(".dishui-kanban");
+	if (!r) return null;
+	let i = n?.closest("[data-kanban-drop]"), a = i?.closest("[data-disabled='true']") ? null : i;
+	if (!a) {
+		let n = Infinity;
+		r.querySelectorAll("[data-kanban-drop]").forEach((r) => {
+			if (r.closest("[data-disabled='true']")) return;
+			let i = r.getBoundingClientRect(), o = e < i.left ? i.left - e : e > i.right ? e - i.right : 0, s = Math.abs(t - (i.top + i.bottom) / 2), c = o * o + s * s;
+			c < n && (n = c, a = r);
+		});
+	}
+	let o = a?.dataset.columnId, s = a?.dataset.laneId, c = Number(a?.dataset.index);
+	return o === void 0 || !Number.isFinite(c) ? null : {
+		columnId: o,
+		laneId: s || void 0,
+		index: c
+	};
+}
+function a({ threshold: a = 5, disabled: o = !1, onDrop: s }) {
+	let [c, l] = r(null), [u, d] = r(null), f = n(null), p = n(!1), m = n(null), h = e(() => {
+		let e = f.current;
+		f.current = null, p.current = !1, m.current = null, l(null), d(null), e?.element.hasPointerCapture(e.pointerId) && e.element.releasePointerCapture(e.pointerId);
+	}, []), g = e((e, t) => {
+		if (o || e.button !== 0 || e.currentTarget.closest("[data-kanban-disabled='true']")) return;
+		let n = e.currentTarget;
+		f.current = {
+			cardId: t,
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			element: n
+		}, n.setPointerCapture(e.pointerId);
+	}, [o]), _ = e((e) => {
+		let t = f.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		let n = Math.hypot(e.clientX - t.startX, e.clientY - t.startY);
+		if (!p.current && n < Math.max(4, Math.min(6, a))) return;
+		e.preventDefault(), p.current || (p.current = !0, l(t.cardId));
+		let r = i(e.clientX, e.clientY);
+		m.current = r, d(r);
+	}, [a]), v = e((e) => {
+		let t = f.current;
+		t && t.pointerId === e.pointerId && (p.current && m.current && s(t.cardId, m.current), h());
+	}, [h, s]);
+	return t(() => {
+		let e = () => h(), t = (e) => {
+			e.key === "Escape" && h();
+		};
+		return window.addEventListener("blur", e), window.addEventListener("keydown", t), () => {
+			window.removeEventListener("blur", e), window.removeEventListener("keydown", t), h();
+		};
+	}, [h]), {
+		draggingId: c,
+		target: u,
+		onPointerDown: g,
+		onPointerMove: _,
+		onPointerUp: v,
+		onPointerCancel: h,
+		onLostPointerCapture: h,
+		cancelDrag: h
+	};
+}
+//#endregion
+export { a as useKanbanDrag };
+
+//# sourceMappingURL=useKanbanDrag.js.map