@nkootstra/block-kit 0.3.0 → 0.3.2

package/dist/index.js

@@ -6285,6 +6285,39 @@ const TIME_ZONE_LABELS = {
 function timeZoneLabel(timeZone) {
 	return TIME_ZONE_LABELS[timeZone] ?? timeZone;
 }
+/** A timestamp's wall-clock date ("2026-01-01") and time ("11:00") in `timeZone`. */
+function wallClock(ts, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}).formatToParts(/* @__PURE__ */ new Date(ts * 1e3));
+	const get = (type) => parts.find((p) => p.type === type)?.value ?? "00";
+	return {
+		date: `${get("year")}-${get("month")}-${get("day")}`,
+		time: `${get("hour")}:${get("minute")}`
+	};
+}
+/** The timestamp of a wall-clock date and time in `timeZone`. Around a daylight saving change it
+* resolves like JavaScript's `Date`: a time the clocks skip moves forward by the gap, and a time
+* they repeat takes its first occurrence. */
+function fromWallClock(date, time, timeZone) {
+	const asUtc = Date.parse(`${date}T${time}:00Z`) / 1e3;
+	const offsetAt = (ts) => {
+		const wall = wallClock(ts, timeZone);
+		return Date.parse(`${wall.date}T${wall.time}:00Z`) / 1e3 - ts;
+	};
+	const before = asUtc - offsetAt(asUtc - 86400);
+	const matches = [before, asUtc - offsetAt(asUtc + 86400)].filter((ts) => {
+		const wall = wallClock(ts, timeZone);
+		return wall.date === date && wall.time === time;
+	});
+	return matches.length > 0 ? Math.min(...matches) : before;
+}
 //#endregion
 //#region src/elements/inputBlockContext.ts
 /** True while rendering the element of an `input` block, where Slack lays some elements out differently. */
@@ -6470,16 +6503,6 @@ function DatePicker({ element, blockId }) {
 }
 //#endregion
 //#region src/elements/DateTimePicker.tsx
-function toISODate(ts) {
-	return (/* @__PURE__ */ new Date(ts * 1e3)).toISOString().slice(0, 10);
-}
-function toHM(ts) {
-	const d = /* @__PURE__ */ new Date(ts * 1e3);
-	return `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;
-}
-function combine(date, time) {
-	return Math.floor((/* @__PURE__ */ new Date(`${date}T${time}:00Z`)).getTime() / 1e3);
-}
 /** Slack's Builder splits a datetimepicker's closed control into a date box ("January 1st,
 * 2026") and a separate time box ("11:00 AM"), rather than one combined string. */
 function formatDate(ts, timeZone) {
@@ -6488,7 +6511,7 @@ function formatDate(ts, timeZone) {
 		month: "long",
 		day: "numeric",
 		year: "numeric",
-		timeZone: timeZone ?? "UTC"
+		timeZone
 	}).formatToParts(d);
 	const month = parts.find((p) => p.type === "month")?.value ?? "";
 	const day = Number(parts.find((p) => p.type === "day")?.value ?? "1");
@@ -6499,7 +6522,7 @@ function formatTime$1(ts, timeZone) {
 	return (/* @__PURE__ */ new Date(ts * 1e3)).toLocaleString("en-US", {
 		hour: "numeric",
 		minute: "2-digit",
-		timeZone: timeZone ?? "UTC"
+		timeZone
 	});
 }
 function DateTimePicker({ element, blockId }) {
@@ -6507,8 +6530,10 @@ function DateTimePicker({ element, blockId }) {
 	const { ask, dialog } = useConfirm(element.confirm);
 	const [value, setValueState] = useState(element.initial_date_time);
 	const [open, setOpen] = useState(false);
-	const [draftDate, setDraftDate] = useState(element.initial_date_time ? toISODate(element.initial_date_time) : void 0);
-	const [draftTime, setDraftTime] = useState(element.initial_date_time ? toHM(element.initial_date_time) : "12:00");
+	const zone = timeZone ?? "UTC";
+	const initial = element.initial_date_time !== void 0 ? wallClock(element.initial_date_time, zone) : void 0;
+	const [draftDate, setDraftDate] = useState(initial?.date);
+	const [draftTime, setDraftTime] = useState(initial?.time ?? "12:00");
 	const rootRef = useRef(null);
 	const focusRef = useFocusOnLoad(element);
 	const actionId = element.action_id ?? "";
@@ -6521,7 +6546,7 @@ function DateTimePicker({ element, blockId }) {
 	async function apply() {
 		if (!draftDate) return;
 		if (!await ask()) return;
-		const ts = combine(draftDate, draftTime);
+		const ts = fromWallClock(draftDate, draftTime, zone);
 		setValueState(ts);
 		setOpen(false);
 		setValue(blockId, actionId, {
@@ -6552,7 +6577,7 @@ function DateTimePicker({ element, blockId }) {
 							/* @__PURE__ */ jsx(CalendarIcon, { className: "sbk-datetimepicker__icon" }),
 							/* @__PURE__ */ jsx("span", {
 								className: value !== void 0 ? "sbk-datetimepicker__value" : "sbk-datetimepicker__placeholder",
-								children: value !== void 0 ? formatDate(value, timeZone) : "Select a date"
+								children: value !== void 0 ? formatDate(value, zone) : "Select a date"
 							}),
 							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datetimepicker__chevron" })
 						]
@@ -6567,13 +6592,13 @@ function DateTimePicker({ element, blockId }) {
 							/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-datetimepicker__icon" }),
 							/* @__PURE__ */ jsx("span", {
 								className: value !== void 0 ? "sbk-datetimepicker__value" : "sbk-datetimepicker__placeholder",
-								children: value !== void 0 ? formatTime$1(value, timeZone) : "Select a time"
+								children: value !== void 0 ? formatTime$1(value, zone) : "Select a time"
 							}),
 							/* @__PURE__ */ jsx(ChevronDownIcon, { className: "sbk-datetimepicker__chevron" })
 						]
 					}), /* @__PURE__ */ jsxs("p", {
 						className: "sbk-datetimepicker__timezone",
-						children: ["Time zone: ", timeZoneLabel(timeZone ?? "UTC")]
+						children: ["Time zone: ", timeZoneLabel(zone)]
 					})]
 				})]
 			}),
@@ -9872,6 +9897,24 @@ function DotIcon({ status }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0" })
 	});
 }
+/** How a status reads aloud. The icons are hidden from assistive technology, so this stands in. */
+const STATUS_LABELS = {
+	complete: "complete",
+	in_progress: "in progress",
+	pending: "pending",
+	error: "failed"
+};
+/**
+* A status as text that only screen readers get, set after a title (", in progress"), so a toggle
+* or task header is announced with the state its icon shows. An unknown status says nothing.
+*/
+function StatusText({ status }) {
+	const label = STATUS_LABELS[status];
+	return label ? /* @__PURE__ */ jsx("span", {
+		className: "sbk-visually-hidden",
+		children: `, ${label}`
+	}) : null;
+}
 /** The glyph on a toggle bar (the plan's or a task_card's): check, warning or spinner. */
 function StatusIcon({ status }) {
 	if (status === "complete") return /* @__PURE__ */ jsx(CheckCircleIcon, {});
@@ -9898,7 +9941,8 @@ function aggregateStatus(statuses) {
 /**
 * One step of the plan. As in Slack, a thin line joins each step's icon to the next, its details
 * start open, and the title is a button that hides and shows them instantly; a task with nothing
-* to reveal gets a disabled header and no caret.
+* to reveal gets the same header as plain text, with no caret. The status, shown as an icon, is
+* also in the header as text for screen readers.
 */
 function TaskRow({ task }) {
 	const [open, setOpen] = useState(true);
@@ -9919,21 +9963,28 @@ function TaskRow({ task }) {
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "sbk-plan__task-content",
-			children: [/* @__PURE__ */ jsxs("button", {
+			children: [expandable ? /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "sbk-plan__task-header",
 				"aria-expanded": open,
-				"aria-disabled": expandable ? void 0 : true,
-				onClick: () => {
-					if (expandable) setOpen((value) => !value);
-				},
+				onClick: () => setOpen((value) => !value),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-title",
+						children: task.title
+					}),
+					/* @__PURE__ */ jsx(StatusText, { status: task.status }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-caret",
+						children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "sbk-plan__task-header",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sbk-plan__task-title",
 					children: task.title
-				}), expandable ? /* @__PURE__ */ jsx("span", {
-					className: "sbk-plan__task-caret",
-					children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
-				}) : null]
+				}), /* @__PURE__ */ jsx(StatusText, { status: task.status })]
 			}), open && expandable ? /* @__PURE__ */ jsxs("div", {
 				className: "sbk-plan__task-body",
 				children: [
@@ -9982,6 +10033,7 @@ function Plan({ block }) {
 						className: "sbk-plan__pill-title",
 						children: block.title
 					}),
+					/* @__PURE__ */ jsx(StatusText, { status }),
 					/* @__PURE__ */ jsx("span", {
 						className: "sbk-plan__pill-chevron",
 						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
@@ -10395,33 +10447,35 @@ function TaskCard({ block }) {
 	const [expanded, setExpanded] = useState(false);
 	const sources = Array.isArray(block.sources) ? block.sources : [];
 	const expandable = Boolean(block.details || block.output || sources.length > 0);
+	const pillContent = /* @__PURE__ */ jsxs("span", {
+		className: "sbk-task-card__pill-content",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-icon",
+				children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-title",
+				children: block.title
+			}),
+			/* @__PURE__ */ jsx(StatusText, { status: block.status }),
+			expandable ? /* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-chevron",
+				children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
+			}) : null
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-task-card",
-		children: [/* @__PURE__ */ jsx("button", {
+		children: [expandable ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "sbk-task-card__pill",
 			"aria-expanded": expanded,
-			"aria-disabled": expandable ? void 0 : true,
-			onClick: () => {
-				if (expandable) setExpanded((value) => !value);
-			},
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "sbk-task-card__pill-content",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-icon",
-						children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-title",
-						children: block.title
-					}),
-					expandable ? /* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-chevron",
-						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
-					}) : null
-				]
-			})
+			onClick: () => setExpanded((value) => !value),
+			children: pillContent
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "sbk-task-card__pill",
+			children: pillContent
 		}), /* @__PURE__ */ jsx(Collapse, {
 			open: expanded,
 			children: /* @__PURE__ */ jsxs("div", {