@nkootstra/block-kit 0.3.1 → 0.3.3

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. */
@@ -6292,6 +6325,19 @@ const InputBlockContext = createContext(false);
 function useInInputBlock() {
 	return useContext(InputBlockContext);
 }
+/** The id of the error shown under an `input` block's element, while it has one. */
+const InputErrorContext = createContext(void 0);
+/**
+* Props for the element's focusable control: an `input` block with an error marks it invalid,
+* which also gives it Slack's red focus ring, and describes it with the error text.
+*/
+function useInvalidProps() {
+	const errorId = useContext(InputErrorContext);
+	return errorId ? {
+		"aria-invalid": true,
+		"aria-describedby": errorId
+	} : {};
+}
 //#endregion
 //#region src/elements/Popover.tsx
 /** Space between the anchor and the popover, as in Slack's menus. */
@@ -6386,6 +6432,7 @@ function DatePicker({ element, blockId }) {
 	const [open, setOpen] = useState(false);
 	const rootRef = useRef(null);
 	const inputRef = useFocusOnLoad(element);
+	const invalid = useInvalidProps();
 	const loadFocus = useRef(element.focus_on_load === true);
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
@@ -6439,6 +6486,7 @@ function DatePicker({ element, blockId }) {
 						placeholder: element.placeholder?.text ?? "Select a date",
 						"aria-haspopup": "dialog",
 						"aria-expanded": open,
+						...invalid,
 						ref: inputRef,
 						onFocus: () => {
 							if (loadFocus.current) loadFocus.current = false;
@@ -6470,16 +6518,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 +6526,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 +6537,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 +6545,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 +6561,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 +6592,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 +6607,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)]
 					})]
 				})]
 			}),
@@ -7072,6 +7112,7 @@ function RichTextInput({ element, blockId }) {
 	const { setValue, dispatch } = useBlockKit();
 	const ref = useRef(null);
 	useFocusOnLoad(element, ref);
+	const invalid = useInvalidProps();
 	const actionId = element.action_id ?? "";
 	const initialText = fromRichText(element.initial_value);
 	useEffect(() => {
@@ -7102,6 +7143,7 @@ function RichTextInput({ element, blockId }) {
 			suppressContentEditableWarning: true,
 			role: "textbox",
 			"aria-multiline": "true",
+			...invalid,
 			"aria-label": element.placeholder?.text ?? actionId,
 			"data-placeholder": element.placeholder?.text,
 			onInput,
@@ -7184,6 +7226,7 @@ function Select({ element, blockId }) {
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	useFocusOnLoad(element, triggerRef);
+	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const remote = source === "external" && loadOptions !== void 0;
 	const minQueryLength = element.min_query_length ?? DEFAULT_MIN_QUERY_LENGTH;
@@ -7342,6 +7385,7 @@ function Select({ element, blockId }) {
 				onClick: () => setOpen((o) => !o),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
+				...invalid,
 				children: [multi ? items.length > 0 ? /* @__PURE__ */ jsx("span", {
 					className: "sbk-select__chips",
 					children: items.map((item) => /* @__PURE__ */ jsxs("span", {
@@ -7361,6 +7405,12 @@ function Select({ element, blockId }) {
 								e.stopPropagation();
 								removeItem(item.id);
 							},
+							onKeyDown: (e) => {
+								if (e.key !== "Enter" && e.key !== " ") return;
+								e.preventDefault();
+								e.stopPropagation();
+								removeItem(item.id);
+							},
 							children: /* @__PURE__ */ jsx(CloseIcon, {})
 						})]
 					}, item.id))
@@ -7471,6 +7521,7 @@ function TextInput({ element, blockId }) {
 	const { setValue, dispatch, surface } = useBlockKit();
 	const sizeClass = surface === "message" ? "" : " sbk-text-input--medium";
 	const [value, setLocalValue] = useState(element.initial_value ?? "");
+	const invalid = useInvalidProps();
 	const focusRef = useFocusOnLoad(element);
 	const actionId = element.action_id ?? "";
 	const dispatchEnabled = element.__dispatchAction === true;
@@ -7514,7 +7565,8 @@ function TextInput({ element, blockId }) {
 		placeholder,
 		onKeyDown,
 		ref: focusRef,
-		"aria-label": element.action_id
+		"aria-label": element.action_id,
+		...invalid
 	};
 	const leadingIcon = element.type === "email_text_input" ? /* @__PURE__ */ jsx(EmailIcon, { className: "sbk-text-input__icon" }) : element.type === "url_text_input" ? /* @__PURE__ */ jsx(LinkGlyphIcon, { className: "sbk-text-input__icon" }) : null;
 	if (element.multiline) return /* @__PURE__ */ jsx("textarea", {
@@ -7558,6 +7610,7 @@ function TimePicker({ element, blockId }) {
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	useFocusOnLoad(element, triggerRef);
+	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
@@ -7609,6 +7662,7 @@ function TimePicker({ element, blockId }) {
 				onClick: () => setOpen((o) => !o),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
+				...invalid,
 				children: [
 					/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-timepicker__icon" }),
 					/* @__PURE__ */ jsx("span", {
@@ -9466,6 +9520,7 @@ function Input({ block, blockId }) {
 		__dispatchAction: block.dispatch_action === true
 	};
 	const error = errors[blockId];
+	const errorId = useId();
 	const showDispatchHint = dispatchHint(block);
 	const showOptional = block.optional && surface !== "message";
 	return /* @__PURE__ */ jsxs("div", {
@@ -9482,13 +9537,16 @@ function Input({ block, blockId }) {
 				className: "sbk-input__element",
 				children: /* @__PURE__ */ jsx(InputBlockContext.Provider, {
 					value: true,
-					children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
-						element,
-						blockId
-					}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
-						element,
-						blockId
-					}) })
+					children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
+						value: error ? errorId : void 0,
+						children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
+							element,
+							blockId
+						}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
+							element,
+							blockId
+						}) })
+					})
 				})
 			}),
 			block.hint && /* @__PURE__ */ jsx("div", {
@@ -9514,6 +9572,7 @@ function Input({ block, blockId }) {
 			}),
 			error && /* @__PURE__ */ jsx("div", {
 				className: "sbk-input__error",
+				id: errorId,
 				children: error
 			})
 		]