@nkootstra/block-kit 0.3.3 → 0.3.5

package/dist/{index-D139DZfD.d.ts → index-DXUlQCUq.d.ts}

@@ -63,6 +63,8 @@ interface PayloadIdentity {
   token?: string;
   triggerId?: string;
   responseUrl?: string;
+  /** Whether the app is installed org-wide on an Enterprise Grid org (`is_enterprise_install`). */
+  isEnterpriseInstall?: boolean;
 }
 declare const DEFAULT_IDENTITY: {
   team: PayloadTeam | null;
@@ -71,6 +73,7 @@ declare const DEFAULT_IDENTITY: {
   token: string;
   triggerId: string;
   responseUrl: string;
+  isEnterpriseInstall: boolean;
 };
 type ResolvedIdentity = typeof DEFAULT_IDENTITY;
 /** The `message` surface's container: the message the block_actions/actions came from. */
@@ -159,10 +162,18 @@ interface BuildBlockActionsPayloadOptions {
   container: Container;
   identity?: PayloadIdentity;
 }
+/** The Enterprise Grid org a payload came from, as Slack names it. */
+interface PayloadEnterprise {
+  id: string;
+  name: string;
+}
 interface BlockActionsPayloadBase {
   type: "block_actions";
   actions: BlockAction[];
   team: PayloadTeam | null;
+  /** The team's Enterprise Grid org, or `null` outside one. */
+  enterprise: PayloadEnterprise | null;
+  is_enterprise_install: boolean;
   user: PayloadUser;
   token?: string;
   response_url?: string;
@@ -940,4 +951,4 @@ declare const VALIDATION_MESSAGES: {
 declare function validateView(blocks: readonly Json[] | readonly unknown[], state: StateValues): Record<string, string>;
 //#endregion
 export { useLiveView as $, BlockAction as A, PayloadContext as B, SlackAttachment as C, Block as Ct, elementComponents as D, Json as Dt, SlackReaction as E, ElementProps as Et, EmojiOptions as F, Surface as G, StackedView as H, LinkProps as I, SurfaceScopeValue as J, SurfaceScope as K, MentionRef as L, BlockKitProvider as M, BlockKitProviderProps as N, Element as O, ElementState as P, useContainer as Q, MessageApi as R, MessageProps as S, blockComponents as St, SlackMessageLike as T, BlockProps as Tt, StateValues as U, Resolvers as V, SubmitResult as W, ViewsApi as X, UserProfile as Y, useBlockKit as Z, HomeTabView as _, ViewResponseAction as _t, Tooltip as a, BuildViewSubmissionPayloadOptions as at, Message as b, buildViewClosedPayload as bt, TextObject as c, MessageContainer as ct, ViewProps as d, PayloadTeam as dt, BlockActionsPayload as et, Modal as f, PayloadUser as ft, HomeTabProps as g, ViewLike as gt, HomeTab as h, ViewContainer as ht, UserMentionProps as i, BuildViewClosedPayloadOptions as it, BlockKitContextValue as j, ActionContext as k, AnyView as l, OptionsResponse as lt, ModalView as m, ViewBlockActionsPayload as mt, validateView as n, BuildBlockActionsPayloadOptions as nt, TooltipProps as o, Container as ot, ModalProps as p, SuggestionOption as pt, SurfaceScopeProps as q, UserMention as r, BuildBlockSuggestionPayloadOptions as rt, Text as s, MessageBlockActionsPayload as st, VALIDATION_MESSAGES as t, BlockSuggestionPayload as tt, View as u, PayloadIdentity as ut, Mrkdwn as v, buildBlockActionsPayload as vt, SlackAttachmentField as w, Blocks as wt, MessageApp as x, buildViewSubmissionPayload as xt, MrkdwnProps as y, buildBlockSuggestionPayload as yt, MessageUpdate as z };
-//# sourceMappingURL=index-D139DZfD.d.ts.map
+//# sourceMappingURL=index-DXUlQCUq.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 
-import { $ as useLiveView, A as BlockAction, B as PayloadContext, C as SlackAttachment, Ct as Block, D as elementComponents, Dt as Json, E as SlackReaction, Et as ElementProps, F as EmojiOptions, G as Surface, H as StackedView, I as LinkProps, J as SurfaceScopeValue, K as SurfaceScope, L as MentionRef, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as useContainer, R as MessageApi, S as MessageProps, St as blockComponents, T as SlackMessageLike, Tt as BlockProps, U as StateValues, V as Resolvers, W as SubmitResult, X as ViewsApi, Y as UserProfile, Z as useBlockKit, _ as HomeTabView, _t as ViewResponseAction, a as Tooltip, at as BuildViewSubmissionPayloadOptions, b as Message, bt as buildViewClosedPayload, c as TextObject, ct as MessageContainer, d as ViewProps, dt as PayloadTeam, et as BlockActionsPayload, f as Modal, ft as PayloadUser, g as HomeTabProps, gt as ViewLike, h as HomeTab, ht as ViewContainer, i as UserMentionProps, it as BuildViewClosedPayloadOptions, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as OptionsResponse, m as ModalView, mt as ViewBlockActionsPayload, n as validateView, nt as BuildBlockActionsPayloadOptions, o as TooltipProps, ot as Container, p as ModalProps, pt as SuggestionOption, q as SurfaceScopeProps, r as UserMention, rt as BuildBlockSuggestionPayloadOptions, s as Text, st as MessageBlockActionsPayload, t as VALIDATION_MESSAGES, tt as BlockSuggestionPayload, u as View, ut as PayloadIdentity, v as Mrkdwn, vt as buildBlockActionsPayload, w as SlackAttachmentField, wt as Blocks, x as MessageApp, xt as buildViewSubmissionPayload, y as MrkdwnProps, yt as buildBlockSuggestionPayload, z as MessageUpdate } from "./index-D139DZfD.js";
+import { $ as useLiveView, A as BlockAction, B as PayloadContext, C as SlackAttachment, Ct as Block, D as elementComponents, Dt as Json, E as SlackReaction, Et as ElementProps, F as EmojiOptions, G as Surface, H as StackedView, I as LinkProps, J as SurfaceScopeValue, K as SurfaceScope, L as MentionRef, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as useContainer, R as MessageApi, S as MessageProps, St as blockComponents, T as SlackMessageLike, Tt as BlockProps, U as StateValues, V as Resolvers, W as SubmitResult, X as ViewsApi, Y as UserProfile, Z as useBlockKit, _ as HomeTabView, _t as ViewResponseAction, a as Tooltip, at as BuildViewSubmissionPayloadOptions, b as Message, bt as buildViewClosedPayload, c as TextObject, ct as MessageContainer, d as ViewProps, dt as PayloadTeam, et as BlockActionsPayload, f as Modal, ft as PayloadUser, g as HomeTabProps, gt as ViewLike, h as HomeTab, ht as ViewContainer, i as UserMentionProps, it as BuildViewClosedPayloadOptions, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as OptionsResponse, m as ModalView, mt as ViewBlockActionsPayload, n as validateView, nt as BuildBlockActionsPayloadOptions, o as TooltipProps, ot as Container, p as ModalProps, pt as SuggestionOption, q as SurfaceScopeProps, r as UserMention, rt as BuildBlockSuggestionPayloadOptions, s as Text, st as MessageBlockActionsPayload, t as VALIDATION_MESSAGES, tt as BlockSuggestionPayload, u as View, ut as PayloadIdentity, v as Mrkdwn, vt as buildBlockActionsPayload, w as SlackAttachmentField, wt as Blocks, x as MessageApp, xt as buildViewSubmissionPayload, y as MrkdwnProps, yt as buildBlockSuggestionPayload, z as MessageUpdate } from "./index-DXUlQCUq.js";
 export { type ActionContext, type AnyView, Block, type BlockAction, type BlockActionsPayload, type BlockKitContextValue, BlockKitProvider, type BlockKitProviderProps, type BlockProps, type BlockSuggestionPayload, Blocks, type BuildBlockActionsPayloadOptions, type BuildBlockSuggestionPayloadOptions, type BuildViewClosedPayloadOptions, type BuildViewSubmissionPayloadOptions, type Container, Element, type ElementProps, type ElementState, type EmojiOptions, HomeTab, type HomeTabProps, type HomeTabView, type Json, type LinkProps, type MentionRef, Message, type MessageApi, type MessageApp, type MessageBlockActionsPayload, type MessageContainer, type MessageProps, type MessageUpdate, Modal, type ModalProps, type ModalView, Mrkdwn, type MrkdwnProps, type OptionsResponse, type PayloadContext, type PayloadIdentity, type PayloadTeam, type PayloadUser, type Resolvers, type SlackAttachment, type SlackAttachmentField, type SlackMessageLike, type SlackReaction, type StackedView, type StateValues, type SubmitResult, type SuggestionOption, type Surface, SurfaceScope, type SurfaceScopeProps, type SurfaceScopeValue, Text, type TextObject, Tooltip, type TooltipProps, UserMention, type UserMentionProps, type UserProfile, VALIDATION_MESSAGES, View, type ViewBlockActionsPayload, type ViewContainer, type ViewLike, type ViewProps, type ViewResponseAction, type ViewsApi, blockComponents, buildBlockActionsPayload, buildBlockSuggestionPayload, buildViewClosedPayload, buildViewSubmissionPayload, elementComponents, useBlockKit, useContainer, useLiveView, validateView };

package/dist/index.js

@@ -31,7 +31,8 @@ const DEFAULT_IDENTITY = {
 	apiAppId: "A00000000",
 	token: "verification-token",
 	triggerId: "000000000000.000000000000.deadbeefdeadbeefdeadbeefdeadbeef",
-	responseUrl: "https://hooks.slack.com/actions/T00000000/0000000000000/deadbeefdeadbeefdeadbeefdeadbeef"
+	responseUrl: "https://hooks.slack.com/actions/T00000000/0000000000000/deadbeefdeadbeefdeadbeefdeadbeef",
+	isEnterpriseInstall: false
 };
 function resolveIdentity(identity) {
 	return {
@@ -63,12 +64,66 @@ function toViewOutput(view, state, identity) {
 		external_id: view.external_id ?? ""
 	};
 }
+/**
+* A text object as Slack echoes it back: `plain_text` gains `emoji: true` and `mrkdwn` gains
+* `verbatim: false` unless the app set them.
+*/
+function normalizeText(text) {
+	if (typeof text !== "object" || text === null) return text;
+	const object = text;
+	if (object.type === "plain_text") return {
+		...text,
+		emoji: object.emoji ?? true
+	};
+	if (object.type === "mrkdwn") return {
+		...text,
+		verbatim: object.verbatim ?? false
+	};
+	return text;
+}
+function normalizeOption(option) {
+	if (typeof option !== "object" || option === null) return option;
+	const { text, description } = option;
+	return {
+		...option,
+		...text === void 0 ? {} : { text: normalizeText(text) },
+		...description === void 0 ? {} : { description: normalizeText(description) }
+	};
+}
+/** An action or state entry with every text object it echoes normalized like Slack's. */
+function normalizeEchoes(entry) {
+	const out = { ...entry };
+	if (out.text !== void 0) out.text = normalizeText(out.text);
+	if (out.placeholder !== void 0) out.placeholder = normalizeText(out.placeholder);
+	if (out.selected_option) out.selected_option = normalizeOption(out.selected_option);
+	if (Array.isArray(out.selected_options)) out.selected_options = out.selected_options.map(normalizeOption);
+	if (typeof out.confirm === "object" && out.confirm !== null) {
+		const confirm = { ...out.confirm };
+		for (const key of [
+			"title",
+			"text",
+			"confirm",
+			"deny"
+		]) if (confirm[key] !== void 0) confirm[key] = normalizeText(confirm[key]);
+		out.confirm = confirm;
+	}
+	return out;
+}
+function normalizeState(state) {
+	return Object.fromEntries(Object.entries(state).map(([blockId, elements]) => [blockId, Object.fromEntries(Object.entries(elements).map(([actionId, value]) => [actionId, normalizeEchoes(value)]))]));
+}
 function buildBlockActionsPayload({ action, state, container, identity }) {
 	const id = resolveIdentity(identity);
+	state = normalizeState(state);
 	const base = {
 		type: "block_actions",
-		actions: [action],
+		actions: [normalizeEchoes(action)],
 		team: id.team,
+		enterprise: id.team?.enterprise_id ? {
+			id: id.team.enterprise_id,
+			name: id.team.enterprise_name ?? ""
+		} : null,
+		is_enterprise_install: id.isEnterpriseInstall,
 		user: id.user,
 		token: id.token,
 		response_url: id.responseUrl,
@@ -6017,7 +6072,8 @@ function Button({ element, blockId }) {
 			},
 			...element.value !== void 0 ? { value: element.value } : {},
 			...element.url !== void 0 ? { url: element.url } : {},
-			...element.style !== void 0 ? { style: element.style } : {}
+			...element.style !== void 0 ? { style: element.style } : {},
+			...element.confirm ? { confirm: element.confirm } : {}
 		});
 		if (element.url) window.open(element.url, "_blank", "noopener,noreferrer");
 	};
@@ -6453,7 +6509,8 @@ function DatePicker({ element, blockId }) {
 			type: "datepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_date: next
+			selected_date: next,
+			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
 		});
 	}
 	async function clear() {
@@ -6468,7 +6525,8 @@ function DatePicker({ element, blockId }) {
 			type: "datepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_date: null
+			selected_date: null,
+			...element.initial_date !== void 0 ? { initial_date: element.initial_date } : {}
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
@@ -7059,19 +7117,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,
@@ -7082,11 +7147,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",
@@ -7115,6 +7221,8 @@ function RichTextInput({ element, blockId }) {
 	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",
@@ -7122,7 +7230,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
@@ -7134,25 +7244,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",
-			...invalid,
-			"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
@@ -7312,7 +7436,8 @@ function Select({ element, blockId }) {
 			type: element.type,
 			action_id: actionId,
 			block_id: blockId,
-			...fields
+			...fields,
+			...element.placeholder ? { placeholder: element.placeholder } : {}
 		});
 	}
 	function buildStateFor(next) {
@@ -7631,7 +7756,8 @@ function TimePicker({ element, blockId }) {
 			type: "timepicker",
 			action_id: actionId,
 			block_id: blockId,
-			selected_time: next
+			selected_time: next,
+			...element.initial_time !== void 0 ? { initial_time: element.initial_time } : {}
 		});
 	}
 	const times = timeOptions();
@@ -10113,7 +10239,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) {