@schukai/monster 5.1.1 → 5.2.0

package/test/cases/components/time/month-calendar.mjs

@@ -4,16 +4,66 @@ import { ATTRIBUTE_ERRORMESSAGE } from "../../../../source/dom/constants.mjs";
 
 describe("MonthCalendar date configuration", () => {
 	let MonthCalendar;
+	let MonthCalendarStyleSheet;
 	before(async () => {
 		await initJSDOM();
 		({ MonthCalendar } = await import(
 			"../../../../source/components/time/month-calendar.mjs"
 		));
+		({ MonthCalendarStyleSheet } = await import(
+			"../../../../source/components/time/stylesheet/month-calendar.mjs"
+		));
 	});
 	afterEach(() => document.getElementById("mocks").replaceChildren());
 	const updates = () => new Promise((resolve) => setTimeout(resolve, 30));
 	const currentDays = (calendar) =>
 		calendar.getOption("calendarDays").filter((day) => day.isCurrentMonth);
+	const createPointerEvent = (type, options) => {
+		const event = new window.MouseEvent(type, {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			clientX: options.clientX,
+			clientY: options.clientY,
+		});
+		Object.defineProperties(event, {
+			pointerId: { value: options.pointerId ?? 1 },
+			pointerType: { value: options.pointerType ?? "touch" },
+		});
+		return event;
+	};
+	const createAppointmentCalendar = async ({ showWeekend = true } = {}) => {
+		const calendar = document.createElement("monster-month-calendar");
+		calendar.setOptions({
+			startDate: "2026-10-01",
+			features: { showWeekend, appointmentMove: true },
+		});
+		document.getElementById("mocks").append(calendar);
+		await updates();
+		await updates();
+		await updates();
+		const columns = showWeekend ? 7 : 5;
+		const cells = calendar.shadowRoot.querySelector(
+			'[data-monster-role="cells"]',
+		);
+		cells.getBoundingClientRect = () => ({
+			left: 0,
+			top: 0,
+			right: columns * 100,
+			bottom: 600,
+			width: columns * 100,
+			height: 600,
+		});
+		calendar.shadowRoot.querySelector(
+			'[data-monster-role="control"]',
+		).getBoundingClientRect = () => ({ width: columns * 100 });
+		calendar.shadowRoot
+			.querySelectorAll('[data-monster-role="day-cell"]')
+			.forEach((cell) => {
+				cell.getBoundingClientRect = () => ({ height: 1000, width: 100 });
+			});
+		return calendar;
+	};
 	it("applies JSON options and refreshes the rendered grid after setOption", async () => {
 		const mocks = document.getElementById("mocks");
 		mocks.innerHTML =
@@ -55,7 +105,8 @@ describe("MonthCalendar date configuration", () => {
 		const weekdayGrid = calendar.shadowRoot.querySelector(
 			'[data-monster-role="weekdays"]',
 		);
-		const hiddenWeekendColumns = getComputedStyle(weekdayGrid).gridTemplateColumns;
+		const hiddenWeekendColumns =
+			getComputedStyle(weekdayGrid).gridTemplateColumns;
 		if (hiddenWeekendColumns !== "none")
 			expect(hiddenWeekendColumns.split(" ")).to.have.length(5);
 
@@ -68,7 +119,8 @@ describe("MonthCalendar date configuration", () => {
 				.querySelector('[data-monster-role="control"]')
 				.style.getPropertyValue("--monster-month-calendar-columns"),
 		).to.equal("7");
-		const visibleWeekendColumns = getComputedStyle(weekdayGrid).gridTemplateColumns;
+		const visibleWeekendColumns =
+			getComputedStyle(weekdayGrid).gridTemplateColumns;
 		if (visibleWeekendColumns !== "none")
 			expect(visibleWeekendColumns.split(" ")).to.have.length(7);
 	});
@@ -263,4 +315,342 @@ describe("MonthCalendar date configuration", () => {
 		await updates();
 		expect(calendar.getOption("calendarDays")).to.equal(days);
 	});
+
+	describe("appointment moving issue #605", () => {
+		const appointments = [
+			{
+				id: "release",
+				label: "Release window",
+				startDate: "2026-10-05",
+				endDate: "2026-10-08",
+				color: "rgb(30, 90, 160)",
+			},
+			{
+				id: "review",
+				label: "Review",
+				startDate: "2026-10-06",
+				endDate: "2026-10-07",
+				color: "rgb(180, 120, 20)",
+			},
+			{
+				id: "migration",
+				label: "Migration",
+				startDate: "2026-10-05",
+				endDate: "2026-10-12",
+				color: "rgb(90, 40, 130)",
+			},
+		];
+
+		const renderAppointments = async (calendar, data = appointments) => {
+			calendar.setOption(
+				"data",
+				data.map((appointment) => ({ ...appointment })),
+			);
+			await updates();
+			await updates();
+		};
+
+		it("keeps appointment moving opt-in and generates its interaction states", () => {
+			const calendar = document.createElement("monster-month-calendar");
+			expect(calendar.getOption("features.appointmentMove")).to.equal(false);
+			const generatedStyle = [...MonthCalendarStyleSheet.cssRules]
+				.map((rule) => rule.cssText)
+				.join("\n");
+			expect(generatedStyle).to.include("data-monster-dragging");
+			expect(generatedStyle).to.include("data-monster-drop-target");
+		});
+
+		it("moves a whole multi-day appointment with a cancelable public event", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+			expect(segment.draggable).to.equal(true);
+			expect(segment.tabIndex).to.equal(0);
+
+			let detail;
+			calendar.addEventListener("monster-appointment-move", (event) => {
+				detail = event.detail;
+			});
+			for (const key of [" ", "ArrowRight", "Enter"]) {
+				segment.dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+			await updates();
+
+			expect(detail.appointmentId).to.equal("release");
+			expect(detail.dayDelta).to.equal(1);
+			expect(detail.inputType).to.equal("keyboard");
+			expect(detail.source).to.deep.include({
+				startDate: "2026-10-05",
+				endDate: "2026-10-08",
+			});
+			expect(detail.target).to.deep.include({
+				startDate: "2026-10-06",
+				endDate: "2026-10-09",
+			});
+			expect(calendar.getOption("data.0.startDate")).to.equal("2026-10-06");
+			expect(calendar.getOption("data.0.endDate")).to.equal("2026-10-09");
+		});
+
+		it("keeps local data unchanged when a consumer cancels the move", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="1"]',
+			);
+			calendar.addEventListener("monster-appointment-move", (event) => {
+				event.preventDefault();
+			});
+			for (const key of [" ", "ArrowRight", "Enter"]) {
+				segment.dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+
+			expect(calendar.getOption("data.1.startDate")).to.equal("2026-10-06");
+			expect(calendar.getOption("data.1.endDate")).to.equal("2026-10-07");
+		});
+
+		it("cancels a keyboard move without emitting an event", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar, [
+				{
+					id: "single-day",
+					label: "Single day",
+					startDate: "2026-10-06",
+					endDate: "2026-10-06",
+					color: "rgb(30, 90, 160)",
+				},
+			]);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+			let moveEvents = 0;
+			calendar.addEventListener("monster-appointment-move", () => {
+				moveEvents++;
+			});
+			for (const key of [" ", "ArrowRight", "Escape"]) {
+				segment.dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+
+			expect(moveEvents).to.equal(0);
+			expect(calendar.getOption("data.0.startDate")).to.equal("2026-10-06");
+			expect(segment.hasAttribute("data-monster-dragging")).to.equal(false);
+		});
+
+		it("does not expose move interactions while disabled", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar, [appointments[0]]);
+			calendar.setOption("disabled", true);
+			await updates();
+			await updates();
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+
+			expect(segment.draggable).to.equal(false);
+			expect(segment.tabIndex).to.equal(-1);
+		});
+
+		it("rejects moves that would push an appointment outside the calendar", async () => {
+			const calendar = await createAppointmentCalendar();
+			const calendarDays = calendar.getOption("calendarDays");
+			const startDate = calendarDays.at(-2).day;
+			const endDate = calendarDays.at(-1).day;
+			await renderAppointments(calendar, [
+				{
+					id: "range-end",
+					label: "Range end",
+					startDate,
+					endDate,
+					color: "rgb(30, 90, 160)",
+				},
+			]);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+			let moveEvents = 0;
+			calendar.addEventListener("monster-appointment-move", () => {
+				moveEvents++;
+			});
+			for (const key of [" ", "ArrowRight", "Enter"]) {
+				segment.dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+
+			expect(moveEvents).to.equal(0);
+			expect(calendar.getOption("data.0.startDate")).to.equal(startDate);
+			expect(calendar.getOption("data.0.endDate")).to.equal(endDate);
+		});
+
+		it("uses visible weekdays as keyboard targets while preserving calendar duration", async () => {
+			const calendar = await createAppointmentCalendar({ showWeekend: false });
+			await renderAppointments(calendar, [
+				{
+					id: "weekend",
+					label: "Weekend deployment",
+					startDate: "2026-10-02",
+					endDate: "2026-10-05",
+					color: "rgb(30, 90, 160)",
+				},
+			]);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-segment-start="2026-10-02"]',
+			);
+			let detail;
+			calendar.addEventListener("monster-appointment-move", (event) => {
+				detail = event.detail;
+			});
+			for (const key of [" ", "ArrowRight", "Enter"]) {
+				segment.dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+
+			expect(detail.dayDelta).to.equal(3);
+			expect(calendar.getOption("data.0.startDate")).to.equal("2026-10-05");
+			expect(calendar.getOption("data.0.endDate")).to.equal("2026-10-08");
+		});
+
+		it("supports touch-style pointer movement between day cells", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar, [appointments[0]]);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+			let detail;
+			calendar.addEventListener("monster-appointment-move", (event) => {
+				detail = event.detail;
+			});
+			segment.dispatchEvent(
+				createPointerEvent("pointerdown", { clientX: 50, clientY: 150 }),
+			);
+			segment.dispatchEvent(
+				createPointerEvent("pointermove", { clientX: 250, clientY: 150 }),
+			);
+			segment.dispatchEvent(
+				createPointerEvent("pointerup", { clientX: 250, clientY: 150 }),
+			);
+
+			expect(detail.inputType).to.equal("pointer");
+			expect(detail.dayDelta).to.equal(2);
+			expect(calendar.getOption("data.0.startDate")).to.equal("2026-10-07");
+			expect(calendar.getOption("data.0.endDate")).to.equal("2026-10-10");
+		});
+
+		it("supports native mouse drag and drop without exposing the shadow tree", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar, [appointments[0]]);
+			const segment = calendar.shadowRoot.querySelector(
+				'[data-monster-appointment-index="0"]',
+			);
+			const dataTransfer = {
+				effectAllowed: "none",
+				dropEffect: "none",
+				setData() {},
+			};
+			const dragStart = new window.MouseEvent("dragstart", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				clientX: 50,
+				clientY: 150,
+			});
+			Object.defineProperty(dragStart, "dataTransfer", { value: dataTransfer });
+			segment.dispatchEvent(dragStart);
+
+			for (const type of ["dragover", "drop"]) {
+				const event = new window.MouseEvent(type, {
+					bubbles: true,
+					cancelable: true,
+					composed: true,
+					clientX: 150,
+					clientY: 150,
+				});
+				Object.defineProperty(event, "dataTransfer", { value: dataTransfer });
+				calendar.shadowRoot
+					.querySelector('[data-monster-day="2026-10-06"]')
+					.dispatchEvent(event);
+			}
+
+			expect(dataTransfer.effectAllowed).to.equal("move");
+			expect(dataTransfer.dropEffect).to.equal("move");
+			expect(calendar.getOption("data.0.startDate")).to.equal("2026-10-06");
+			expect(calendar.getOption("data.0.endDate")).to.equal("2026-10-09");
+		});
+
+		it("reflows overlapping segments into deterministic non-colliding rows", async () => {
+			const calendar = await createAppointmentCalendar();
+			await renderAppointments(calendar);
+			const startsOnMonday = [0, 2].map((index) =>
+				calendar.shadowRoot.querySelector(
+					`[data-monster-appointment-index="${index}"][data-monster-segment-start="2026-10-05"]`,
+				),
+			);
+			expect(startsOnMonday.every(Boolean)).to.equal(true);
+			expect(
+				new Set(startsOnMonday.map((segment) => segment.style.top)).size,
+			).to.equal(2);
+
+			const migrationSegments = calendar.shadowRoot.querySelectorAll(
+				'[data-monster-appointment-index="2"]',
+			);
+			expect(migrationSegments).to.have.length(2);
+			expect(migrationSegments[0].style.top).to.equal(
+				migrationSegments[1].style.top,
+			);
+
+			for (const key of [" ", "ArrowRight", "Enter"]) {
+				startsOnMonday[0].dispatchEvent(
+					new window.KeyboardEvent("keydown", {
+						key,
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+					}),
+				);
+			}
+			await updates();
+			await updates();
+			const overlapping = [0, 1, 2].map((index) =>
+				calendar.shadowRoot.querySelector(
+					`[data-monster-appointment-index="${index}"]`,
+				),
+			);
+			expect(
+				new Set(overlapping.map((segment) => segment.style.top)).size,
+			).to.equal(3);
+		});
+	});
 });

package/test/cases/dom/early-options-contract.mjs

@@ -26,7 +26,8 @@ describe("Early options source contract (#596)", () => {
 			1,
 		);
 	});
-	it("has no statically resolved early options access in library getters", () => {
+	it("has no statically resolved early options access in library getters", function () {
+		this.timeout(10_000);
 		const root = new URL("../../../", import.meta.url);
 		const files = globSync("source/**/*.mjs", { cwd: root }).sort();
 		assert.ok(files.length > 300);