@nkootstra/block-kit 0.3.2 → 0.3.4

package/dist/index.js

@@ -6325,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. */
@@ -6419,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(() => {
@@ -6472,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;
@@ -7044,19 +7059,26 @@ const FORMATTING_GROUPS = [
 		}
 	]
 ];
-/** The (inert) formatting toolbar Slack shows above a modal's rich-text editor; its buttons stay
-* dimmed because they only act on a selection in Slack's own editor. */
+/** The formatting bar Slack shows above a modal's rich-text editor. The editor here is plain text,
+* so its buttons are there to look like Slack's but marked unavailable; they dim until the editor
+* has focus, as Slack's do. */
 function RichTextToolbar() {
 	return /* @__PURE__ */ jsx("div", {
 		className: "sbk-rich-text-input__toolbar",
-		"aria-hidden": "true",
-		children: FORMATTING_GROUPS.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("span", { className: "sbk-rich-text-input__separator" }), group.map((icon) => /* @__PURE__ */ jsx("span", {
+		role: "toolbar",
+		"aria-orientation": "horizontal",
+		"aria-label": "Formatting",
+		children: FORMATTING_GROUPS.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("span", { className: "sbk-rich-text-input__separator" }), group.map((icon) => /* @__PURE__ */ jsx("button", {
+			type: "button",
 			className: "sbk-rich-text-input__tool",
-			title: icon.label,
+			"aria-label": icon.label,
+			"aria-disabled": "true",
+			tabIndex: -1,
 			children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 20 20",
 				width: "18",
 				height: "18",
+				"aria-hidden": "true",
 				children: /* @__PURE__ */ jsx("path", {
 					fill: "currentColor",
 					fillRule: icon.evenOdd ? "evenodd" : void 0,
@@ -7067,11 +7089,52 @@ function RichTextToolbar() {
 		}, icon.label))] }, group[0]?.label))
 	});
 }
+/** Slack's "Aa" (show formatting) and emoji glyphs, 20-unit paths as Slack ships them. */
+const FORMATTING_ICON = "M6.941 3.952c-.459-1.378-2.414-1.363-2.853.022l-4.053 12.8a.75.75 0 0 0 1.43.452l1.101-3.476h6.06l1.163 3.487a.75.75 0 1 0 1.423-.474zm1.185 8.298L5.518 4.427 3.041 12.25zm6.198-5.537a4.74 4.74 0 0 1 3.037-.081A3.74 3.74 0 0 1 20 10.208V17a.75.75 0 0 1-1.5 0v-.745a8 8 0 0 1-2.847 1.355 3 3 0 0 1-3.15-1.143C10.848 14.192 12.473 11 15.287 11H18.5v-.792c0-.984-.641-1.853-1.581-2.143a3.24 3.24 0 0 0-2.077.056l-.242.089a2.22 2.22 0 0 0-1.34 1.382l-.048.145a.75.75 0 0 1-1.423-.474l.048-.145a3.72 3.72 0 0 1 2.244-2.315zM18.5 12.5h-3.213c-1.587 0-2.504 1.801-1.57 3.085.357.491.98.717 1.572.57a6.5 6.5 0 0 0 2.47-1.223l.741-.593z";
+const EMOJI_ICON = "M2.5 10a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18M7.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M14 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-6.385 3.766a.75.75 0 1 0-1.425.468C6.796 14.08 8.428 15 10.027 15s3.23-.92 3.838-2.766a.75.75 0 1 0-1.425-.468c-.38 1.155-1.38 1.734-2.413 1.734s-2.032-.58-2.412-1.734";
+function Glyph({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 20 20",
+		width: "18",
+		height: "18",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d
+		})
+	});
+}
+/** The row Slack draws under the editor: "Aa" shows or hides the formatting bar (underlined while
+* it's shown), and an emoji button, unavailable until block-kit has an emoji picker. */
+function RichTextComposerActions({ formatting, onToggleFormatting }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "sbk-rich-text-input__footer",
+		role: "toolbar",
+		"aria-orientation": "horizontal",
+		"aria-label": "Composer actions",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "sbk-rich-text-input__action sbk-rich-text-input__action--formatting",
+			"aria-label": "Show formatting",
+			"aria-pressed": formatting,
+			onClick: onToggleFormatting,
+			children: /* @__PURE__ */ jsx(Glyph, { d: FORMATTING_ICON })
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "sbk-rich-text-input__action",
+			"aria-label": "Emoji",
+			"aria-disabled": "true",
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsx(Glyph, { d: EMOJI_ICON })
+		})]
+	});
+}
 //#endregion
 //#region src/elements/RichTextInput.tsx
-/** Wraps plain text into the `rich_text` block shape Slack uses for this element's value. A
-* full WYSIWYG (bold/lists/links) is out of scope; the brief allows a contentEditable here, under
-* Slack's (inert) formatting toolbar. */
+/** Wraps plain text into the `rich_text` block shape Slack uses for this element's value. The
+* editor is plain text; Slack's formatting bar and composer row are drawn around it for parity. */
 function toRichText(text) {
 	return {
 		type: "rich_text",
@@ -7097,8 +7160,11 @@ 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);
+	const [formatting, setFormatting] = useState(true);
+	const [empty, setEmpty] = useState(initialText === "");
 	useEffect(() => {
 		if (element.initial_value) setValue(blockId, actionId, {
 			type: "rich_text_input",
@@ -7106,7 +7172,9 @@ function RichTextInput({ element, blockId }) {
 		});
 	}, []);
 	function onInput() {
-		const richText = toRichText(ref.current?.innerText ?? "");
+		const text = ref.current?.innerText ?? "";
+		setEmpty(text.trim() === "");
+		const richText = toRichText(text);
 		setValue(blockId, actionId, {
 			type: "rich_text_input",
 			rich_text_value: richText
@@ -7118,24 +7186,39 @@ function RichTextInput({ element, blockId }) {
 			rich_text_value: richText
 		});
 	}
+	const placeholder = element.placeholder?.text;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-rich-text-input",
-		children: [/* @__PURE__ */ jsx(RichTextToolbar, {}), /* @__PURE__ */ jsx("div", {
-			ref,
-			className: "sbk-rich-text-input__editor",
-			contentEditable: true,
-			suppressContentEditableWarning: true,
-			role: "textbox",
-			"aria-multiline": "true",
-			"aria-label": element.placeholder?.text ?? actionId,
-			"data-placeholder": element.placeholder?.text,
-			onInput,
-			style: {
-				minHeight: element.min_lines ? `${element.min_lines * 22}px` : void 0,
-				maxHeight: element.max_lines ? `${element.max_lines * 22}px` : void 0
-			},
-			children: initialText
-		})]
+		children: [
+			formatting && /* @__PURE__ */ jsx(RichTextToolbar, {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "sbk-rich-text-input__body",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref,
+					className: "sbk-rich-text-input__editor",
+					contentEditable: true,
+					suppressContentEditableWarning: true,
+					role: "textbox",
+					"aria-multiline": "true",
+					...invalid,
+					"aria-label": placeholder ?? actionId,
+					onInput,
+					style: {
+						minHeight: element.min_lines ? `${element.min_lines * 22}px` : void 0,
+						maxHeight: element.max_lines ? `${element.max_lines * 22}px` : void 0
+					},
+					children: initialText
+				}), placeholder && empty && /* @__PURE__ */ jsx("div", {
+					className: "sbk-rich-text-input__placeholder",
+					"aria-hidden": "true",
+					children: placeholder
+				})]
+			}),
+			/* @__PURE__ */ jsx(RichTextComposerActions, {
+				formatting,
+				onToggleFormatting: () => setFormatting((shown) => !shown)
+			})
+		]
 	});
 }
 //#endregion
@@ -7209,6 +7292,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;
@@ -7367,6 +7451,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", {
@@ -7386,6 +7471,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))
@@ -7496,6 +7587,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;
@@ -7539,7 +7631,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", {
@@ -7583,6 +7676,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(() => {
@@ -7634,6 +7728,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", {
@@ -9491,6 +9586,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", {
@@ -9507,13 +9603,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", {
@@ -9539,6 +9638,7 @@ function Input({ block, blockId }) {
 			}),
 			error && /* @__PURE__ */ jsx("div", {
 				className: "sbk-input__error",
+				id: errorId,
 				children: error
 			})
 		]
@@ -10079,7 +10179,23 @@ function renderTopLevel(elements, ctx) {
 				i++;
 			}
 			const forest = buildListForest(run);
-			for (const group of forest) nodes.push(renderListGroup(group, ctx, key++, 0));
+			const lists = forest.map((group) => renderListGroup(group, ctx, key++, 0));
+			if (!forest.some((group) => group.border)) {
+				nodes.push(...lists);
+				continue;
+			}
+			const quoted = [];
+			while (i < elements.length && elements[i]?.type === "rich_text_quote") {
+				quoted.push(/* @__PURE__ */ jsx("div", {
+					className: "sbk-rich-text__quote-text",
+					children: renderSectionChildren(elements[i].elements, ctx)
+				}, key++));
+				i++;
+			}
+			nodes.push(/* @__PURE__ */ jsxs("blockquote", {
+				className: "sbk-rich-text__quote sbk-rich-text__quote--group",
+				children: [lists, quoted]
+			}, key++));
 			continue;
 		}
 		switch (el.type) {