slack-blocks-to-jsx 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.release-please-manifest.json +3 -0
- package/CHANGELOG.md +30 -0
- package/KNOWLEDGE_BASE.md +13 -3
- package/dist/index.d.mts +108 -7
- package/dist/index.d.ts +108 -7
- package/dist/index.js +12 -12
- package/dist/index.mjs +12 -12
- package/dist/style.css +1 -1
- package/package.json +21 -20
- package/readme.md +5 -0
- package/release-please-config.json +9 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [1.2.0](https://github.com/themashcodee/slack-blocks-to-jsx/compare/v1.1.2...v1.2.0) (2026-10-13)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* ✨ support the Slack data_table block ([b4c14b1](https://github.com/themashcodee/slack-blocks-to-jsx/commit/b4c14b125e9204fda7eaee4a75d945bbf25769d9))
|
|
9
|
+
* ✨ support the Slack data_table block ([ee760a1](https://github.com/themashcodee/slack-blocks-to-jsx/commit/ee760a13a8a378282ae247c871248eb89cbe6488))
|
|
10
|
+
* load an arbitrary build in the playground via ?package= ([f2cc2e0](https://github.com/themashcodee/slack-blocks-to-jsx/commit/f2cc2e0d6f3df7bdbfbdba411fe8b04d61bed08e))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* 🔒 restrict playground build loading to esm.sh and pkg.pr.new ([02edcac](https://github.com/themashcodee/slack-blocks-to-jsx/commit/02edcacca73fbf054779a33836566228035795c1))
|
|
16
|
+
* harden the playground's ?package= build loader ([df4498c](https://github.com/themashcodee/slack-blocks-to-jsx/commit/df4498cd1429e76d80067e559533346ed31e52e2))
|
|
17
|
+
|
|
18
|
+
## [1.1.2](https://github.com/themashcodee/slack-blocks-to-jsx/compare/v1.1.1...v1.1.2) (2026-08-16)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* 🐛 match release-please tags to the repo's existing v* tags ([02baa54](https://github.com/themashcodee/slack-blocks-to-jsx/commit/02baa54b0fa6df6eec1b06522981e97de31925ee))
|
|
24
|
+
* 🐛 match release-please tags to the repo's existing v* tags ([cb52ff0](https://github.com/themashcodee/slack-blocks-to-jsx/commit/cb52ff0634758cd800e370ef033558e15898c7f4))
|
|
25
|
+
* 🐛 repair pnpm playground:build and run it in CI ([790ad85](https://github.com/themashcodee/slack-blocks-to-jsx/commit/790ad85a69f3ac77007a1a629e7235b0a4c8991b))
|
|
26
|
+
* 🐛 stack rich_text sections on their own lines ([54846bf](https://github.com/themashcodee/slack-blocks-to-jsx/commit/54846bfdc5c738965325e4a8883a90beebe39b62))
|
|
27
|
+
* 🐛 stack rich_text sections on their own lines ([93a7515](https://github.com/themashcodee/slack-blocks-to-jsx/commit/93a75153bbee13a38f81deb4f1035b55efb4575d))
|
|
28
|
+
* 🐛 stop bullet lists from seeding ordered list numbering ([c7da9f5](https://github.com/themashcodee/slack-blocks-to-jsx/commit/c7da9f5f1795001103d9b626a0e217b7d3f19e85))
|
|
29
|
+
* 🐛 stop bullet lists from seeding ordered list numbering ([6d4ccaa](https://github.com/themashcodee/slack-blocks-to-jsx/commit/6d4ccaaf4c2d36fa17ddea114964e0e9875bf92b))
|
|
30
|
+
* repair pnpm playground:build and run it in CI ([ed2733a](https://github.com/themashcodee/slack-blocks-to-jsx/commit/ed2733ad14e50ae5cad7abd87f8c6f3852e8c058))
|
package/KNOWLEDGE_BASE.md
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
| 4 | [§4.1](#41-layout--structure-blocks) | Layout & structure blocks (section, divider, header) |
|
|
37
37
|
| 4 | [§4.2](#42-media-blocks) | Media blocks (image, video, file) |
|
|
38
38
|
| 4 | [§4.3](#43-interactive-blocks) | Interactive blocks (actions, input, context_actions) |
|
|
39
|
-
| 4 | [§4.4](#44-content-blocks) | Content blocks (context, table, markdown)
|
|
39
|
+
| 4 | [§4.4](#44-content-blocks) | Content blocks (context, table, data_table, markdown) |
|
|
40
40
|
| 4 | [§4.5](#45-ai-workflow-blocks) | AI/workflow blocks (plan, task_card) |
|
|
41
41
|
| 4 | [§4.6](#46-status--rich-container-blocks-added-v110--slack-2026-04-16) | Status & rich-container blocks (alert, card, carousel) |
|
|
42
42
|
| 4 | [§4.7](#47-rich-text-block) | Rich text block (deep dive) |
|
|
@@ -325,6 +325,7 @@ All block components live in `src/components/blocks/`. 17 block types are suppor
|
|
|
325
325
|
| ---------- | -------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
326
326
|
| `context` | `context.tsx` | Up to 10 mixed text + image elements |
|
|
327
327
|
| `table` | `table.tsx` | `cells: Cell[][]`, optional `size`; cell alignment; bordered |
|
|
328
|
+
| `data_table` | `data_table.tsx` | `rows: DataTableCell[][]` (first row is the header), `caption`, `page_size?` (1-100, default 5), `row_header_column_index?` (default 0). Semantic `<table>` with `<caption>`, `th scope="col"` headers and a `th scope="row"` row header. Clicking a header sorts the body client-side (numeric when every body cell in the column is `raw_number`, else alphabetical; toggles asc/desc; resets to page 1). Prev/next pagination with an "X–Y of N" indicator, hidden for a single page. `raw_text`/`rich_text` cells reuse `TableCellContent` from `table.tsx`; `action_cell` renders `ButtonElement`. No filter UI. |
|
|
328
329
|
| `markdown` | `markdown_block.tsx` | Renders **standard** GFM via `react-markdown` + `remark-gfm`; tables, task lists, code blocks, syntax highlight. Emoji shortcodes are interpolated by the `remarkSlackEmoji` plugin, reusing the same `<SlackEmoji>` component (and `hooks.emoji`) as the mrkdwn parser |
|
|
329
330
|
|
|
330
331
|
### 4.5 AI/workflow blocks
|
|
@@ -443,7 +444,7 @@ Types live in `src/types/` and are re-exported from `index.ts`.
|
|
|
443
444
|
|
|
444
445
|
### 6.1 `types/layout.ts`
|
|
445
446
|
|
|
446
|
-
Defines the `Block` union: `ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContextBlock | ContextActionsBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock`. Each interface documents props with JSDoc pointing to Slack's official API docs.
|
|
447
|
+
Defines the `Block` union: `ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContextBlock | ContextActionsBlock | DataTableBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock`. Each interface documents props with JSDoc pointing to Slack's official API docs.
|
|
447
448
|
|
|
448
449
|
Added in v1.1.0 to cover Slack's 2026-04-16 block launch:
|
|
449
450
|
|
|
@@ -453,6 +454,13 @@ Added in v1.1.0 to cover Slack's 2026-04-16 block launch:
|
|
|
453
454
|
- `CardBlock = { type: "card"; title?; subtitle?; body?; hero_image?: CardImage; icon?: CardImage; actions?: ButtonElement[]; block_id? }`
|
|
454
455
|
- `CarouselBlock = { type: "carousel"; elements: CardBlock[]; block_id? }`
|
|
455
456
|
|
|
457
|
+
Data table (Slack `data_table` block):
|
|
458
|
+
|
|
459
|
+
- `DataTableBlock = { type: "data_table"; rows: DataTableCell[][]; caption: string; page_size?; row_header_column_index?; block_id? }`
|
|
460
|
+
- `DataTableCell = DataTableRawTextCell | DataTableRawNumberCell | DataTableActionCell | RichTextBlock`
|
|
461
|
+
- `DataTableRawTextCell = { type: "raw_text"; text }`, `DataTableRawNumberCell = { type: "raw_number"; value: number; text? }`
|
|
462
|
+
- `DataTableActionCell = { type: "action_cell"; element: ButtonElement; fallback?: DataTableRawTextCell | DataTableRawNumberCell }`
|
|
463
|
+
|
|
456
464
|
### 6.2 `types/elements.ts`
|
|
457
465
|
|
|
458
466
|
Defines the `Element` union for all 28 interactive/display elements. Every element carries optional `action_id` and `confirm` (except display-only ones).
|
|
@@ -612,7 +620,7 @@ Input: `src/style.css`. Output: `dist/style.css` (~40 KB).
|
|
|
612
620
|
| `dev` | tsup watch |
|
|
613
621
|
| `dev:css` | PostCSS watch |
|
|
614
622
|
| `lint` | `tsc --noEmit` |
|
|
615
|
-
| `test` | `
|
|
623
|
+
| `test` | `node --test` over `test/**/*.test.mjs` against the built `dist/` (run `build` first); interaction tests mount into `happy-dom` |
|
|
616
624
|
| `release` | `node scripts/release.mjs` (see Ch. 11) |
|
|
617
625
|
| `release:dry` | Preview a release; changes nothing |
|
|
618
626
|
| `release:beta` | Publish next `beta` prerelease (tag: beta) |
|
|
@@ -726,6 +734,7 @@ slack blocks to jsx library/
|
|
|
726
734
|
│ │ │ ├── section.tsx divider.tsx image.tsx context.tsx
|
|
727
735
|
│ │ │ ├── header.tsx actions.tsx input.tsx video.tsx
|
|
728
736
|
│ │ │ ├── file.tsx table.tsx markdown_block.tsx
|
|
737
|
+
│ │ │ ├── data_table.tsx
|
|
729
738
|
│ │ │ ├── plan.tsx task_card.tsx context_actions.tsx
|
|
730
739
|
│ │ │ ├── alert.tsx card.tsx carousel.tsx (new in v1.1.0)
|
|
731
740
|
│ │ │ └── rich_text/
|
|
@@ -885,3 +894,4 @@ The sidebar picks it up automatically on next HMR. Keep fixtures small (≤ 10 b
|
|
|
885
894
|
| 2026-04-17 | Claude + Mash | v1.1.0 release prep: added three new blocks (`alert`, `card`, `carousel`) matching Slack's 2026-04-16 Block Kit launch. Ch. 4 block count 14 → 17 (new §4.6 "Status & rich-container blocks"). Ch. 6.1 type list updated with `AlertBlock`, `CardBlock`, `CarouselBlock`, `CardImage`, `AlertLevel`. Ch. 12 gained `11-alert-card-carousel.json` fixture. Ch. 13 file tree updated. Changeset: `.changeset/add-alert-card-carousel-blocks.md`. |
|
|
886
895
|
| 2026-04-17 | Claude + Mash | Added Ch. 15 — Playground. New `playground/` folder (Vite + React 18) that source-aliases `slack-blocks-to-jsx` to `../src/index.ts` for instant HMR. Committed to git, excluded from npm via `.npmignore`. Ch. 15 renumbered from change log → playground; change log moved to Ch. 16. Root `package.json` gained `playground`, `playground:install`, `playground:build` scripts. Ch. 13 file tree extended. |
|
|
887
896
|
| 2026-06-06 | Claude + Mash | Replaced the Changesets release flow with a single local command `pnpm release` (`scripts/release.mjs`): checks → lint → build → bump → commit/tag → npm publish → push → GitHub release. Removed `.changeset/`, `@changesets/cli`, and `.github/workflows/publish.yml`; added `test`/`release`/`release:dry` scripts and `RELEASING.md`. Rewrote Ch. 11, updated §10.3/§10.5 scripts + hygiene, Ch. 13 file tree (`scripts/`), and Ch. 14 rule 10. Added first-class beta/alpha prereleases: `release:beta`/`release:alpha` scripts, `prepatch`/`preminor`/`premajor`/`prerelease` bump types + `--preid`, auto dist-tag per channel, prerelease graduation, and a "Trying a prerelease" section in `readme.md`. Added `.github/workflows/preview.yml` (pkg.pr.new) for automatic per-PR/per-commit preview installs (no npm token, fork-safe). |
|
|
897
|
+
| 2026-10-12 | Claude + Stephen | Added the `data_table` block: §4.4 row, §6.1 `DataTableBlock` and cell types, §10.3 `test` script (node:test + `happy-dom` for interaction tests), Ch. 13 file tree. |
|
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | FeedbackButtonsElement | FileInputElement | IconButtonElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | RichTextInputElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement | UrlSourceElement | WorkflowButtonElement | RichTextBlockElement;
|
|
@@ -780,7 +780,7 @@ type WorkflowObject = {
|
|
|
780
780
|
trigger: TriggerObject;
|
|
781
781
|
};
|
|
782
782
|
|
|
783
|
-
type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
|
|
783
|
+
type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataTableBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
|
|
784
784
|
type ActionsBlock = {
|
|
785
785
|
/**
|
|
786
786
|
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
@@ -1070,6 +1070,9 @@ type TableBlock = {
|
|
|
1070
1070
|
/**
|
|
1071
1071
|
* Available in surfaces: **Messages**
|
|
1072
1072
|
*
|
|
1073
|
+
* Note: Slack's blocks.json lists Home tabs too, but our testing shows the table block only
|
|
1074
|
+
* renders in Messages — Modals and Home tabs don't support it.
|
|
1075
|
+
*
|
|
1073
1076
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/table-block/ View here}
|
|
1074
1077
|
*
|
|
1075
1078
|
* A ***table*** block displays data in a structured table format. It supports up to 100 rows with 20 cells each. Only one table is allowed per message.
|
|
@@ -1108,6 +1111,75 @@ type TableColumnSetting = {
|
|
|
1108
1111
|
*/
|
|
1109
1112
|
is_wrapped?: boolean;
|
|
1110
1113
|
};
|
|
1114
|
+
type DataTableBlock = {
|
|
1115
|
+
/**
|
|
1116
|
+
* Available in surfaces: **Messages**, **Home tabs**
|
|
1117
|
+
*
|
|
1118
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/data-table-block View here}
|
|
1119
|
+
*
|
|
1120
|
+
* A ***data_table*** block is a rich table that supports pagination, sorting, and interactive
|
|
1121
|
+
* {@link DataTableActionCell action cells}. The first row is the header (it cannot contain
|
|
1122
|
+
* ***rich_text*** cells). A table has 2 to 201 rows (1 header plus up to 200 rows) and 1 to 20
|
|
1123
|
+
* columns, and every row must have the same number of cells.
|
|
1124
|
+
*
|
|
1125
|
+
* Sorting is alphabetical by default, and numeric when every cell in the column is
|
|
1126
|
+
* ***raw_number***.
|
|
1127
|
+
*/
|
|
1128
|
+
type: "data_table";
|
|
1129
|
+
/**
|
|
1130
|
+
* A string acting as a unique identifier for a block. If not specified, one will be generated.
|
|
1131
|
+
* Maximum length for this field is 255 characters.
|
|
1132
|
+
*/
|
|
1133
|
+
block_id?: string;
|
|
1134
|
+
/**
|
|
1135
|
+
* An array of table rows, each an array of cells. The first row is the header.
|
|
1136
|
+
*/
|
|
1137
|
+
rows: DataTableCell[][];
|
|
1138
|
+
/**
|
|
1139
|
+
* A caption for the table, used as the value of the HTML ***caption*** element.
|
|
1140
|
+
*/
|
|
1141
|
+
caption: string;
|
|
1142
|
+
/**
|
|
1143
|
+
* Number of rows per page. Minimum 1, maximum 100. Defaults to 5.
|
|
1144
|
+
*/
|
|
1145
|
+
page_size?: number;
|
|
1146
|
+
/**
|
|
1147
|
+
* The 0-based index of the column that uniquely identifies each row (the row header), which
|
|
1148
|
+
* screen readers treat as the row's primary identifier. Defaults to 0.
|
|
1149
|
+
*/
|
|
1150
|
+
row_header_column_index?: number;
|
|
1151
|
+
};
|
|
1152
|
+
type DataTableRawTextCell = {
|
|
1153
|
+
type: "raw_text";
|
|
1154
|
+
/**
|
|
1155
|
+
* The text content of the cell. Minimum length 1.
|
|
1156
|
+
*/
|
|
1157
|
+
text: string;
|
|
1158
|
+
};
|
|
1159
|
+
type DataTableRawNumberCell = {
|
|
1160
|
+
type: "raw_number";
|
|
1161
|
+
/**
|
|
1162
|
+
* The numeric value of the cell, used for numeric sorting.
|
|
1163
|
+
*/
|
|
1164
|
+
value: number;
|
|
1165
|
+
/**
|
|
1166
|
+
* Optional display text shown instead of ***value***. Minimum length 1.
|
|
1167
|
+
*/
|
|
1168
|
+
text?: string;
|
|
1169
|
+
};
|
|
1170
|
+
type DataTableActionCell = {
|
|
1171
|
+
type: "action_cell";
|
|
1172
|
+
/**
|
|
1173
|
+
* The {@link ButtonElement button} rendered in the cell. Set its ***value*** to identify the row
|
|
1174
|
+
* so your app can tell which row was clicked.
|
|
1175
|
+
*/
|
|
1176
|
+
element: ButtonElement;
|
|
1177
|
+
/**
|
|
1178
|
+
* A cell displayed in place of the button on clients that don't support action cells.
|
|
1179
|
+
*/
|
|
1180
|
+
fallback?: DataTableRawTextCell | DataTableRawNumberCell;
|
|
1181
|
+
};
|
|
1182
|
+
type DataTableCell = DataTableRawTextCell | DataTableRawNumberCell | DataTableActionCell | RichTextBlock;
|
|
1111
1183
|
type RichTextBlock = {
|
|
1112
1184
|
/**
|
|
1113
1185
|
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
@@ -1129,22 +1201,51 @@ type RichTextBlock = {
|
|
|
1129
1201
|
elements: RichTextBlockElement[];
|
|
1130
1202
|
};
|
|
1131
1203
|
type ContextActionsBlock = {
|
|
1204
|
+
/**
|
|
1205
|
+
* Available in surfaces: **Messages**
|
|
1206
|
+
*
|
|
1207
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/context-actions-block/ View here}
|
|
1208
|
+
*
|
|
1209
|
+
* Displays actions as contextual info, which can include both feedback buttons and icon buttons.
|
|
1210
|
+
*/
|
|
1132
1211
|
type: "context_actions";
|
|
1133
1212
|
elements: Element[];
|
|
1134
1213
|
block_id?: string;
|
|
1135
1214
|
};
|
|
1136
1215
|
type MarkdownBlock = {
|
|
1216
|
+
/**
|
|
1217
|
+
* Available in surfaces: **Messages**
|
|
1218
|
+
*
|
|
1219
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/markdown-block/ View here}
|
|
1220
|
+
*
|
|
1221
|
+
* Displays formatted markdown text.
|
|
1222
|
+
*/
|
|
1137
1223
|
type: "markdown";
|
|
1138
1224
|
text: string;
|
|
1139
1225
|
block_id?: string;
|
|
1140
1226
|
};
|
|
1141
1227
|
type PlanBlock = {
|
|
1228
|
+
/**
|
|
1229
|
+
* Available in surfaces: **Messages**
|
|
1230
|
+
*
|
|
1231
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/plan-block/ View here}
|
|
1232
|
+
*
|
|
1233
|
+
* Displays a plan made up of one or more {@link TaskCardBlock task cards}.
|
|
1234
|
+
*/
|
|
1142
1235
|
type: "plan";
|
|
1143
1236
|
title: string;
|
|
1144
1237
|
tasks?: TaskCardBlock[];
|
|
1145
1238
|
block_id?: string;
|
|
1146
1239
|
};
|
|
1147
1240
|
type TaskCardBlock = {
|
|
1241
|
+
/**
|
|
1242
|
+
* Available in surfaces: **Messages**
|
|
1243
|
+
*
|
|
1244
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/task-card-block/ View here}
|
|
1245
|
+
*
|
|
1246
|
+
* Displays a single task with a status, optional details, output, and sources. Task cards can
|
|
1247
|
+
* stand alone or be nested inside a {@link PlanBlock}.
|
|
1248
|
+
*/
|
|
1148
1249
|
type: "task_card";
|
|
1149
1250
|
task_id: string;
|
|
1150
1251
|
title: string;
|
|
@@ -1160,7 +1261,7 @@ type TaskCardBlock = {
|
|
|
1160
1261
|
type AlertLevel = "default" | "info" | "warning" | "error" | "success";
|
|
1161
1262
|
type AlertBlock = {
|
|
1162
1263
|
/**
|
|
1163
|
-
* Available in surfaces: **
|
|
1264
|
+
* Available in surfaces: **Modals**
|
|
1164
1265
|
*
|
|
1165
1266
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/alert-block/ View here}
|
|
1166
1267
|
*
|
|
@@ -1204,7 +1305,7 @@ type CardImage = {
|
|
|
1204
1305
|
};
|
|
1205
1306
|
type CardBlock = {
|
|
1206
1307
|
/**
|
|
1207
|
-
* Available in surfaces: **Messages**
|
|
1308
|
+
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
1208
1309
|
*
|
|
1209
1310
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/card-block/ View here}
|
|
1210
1311
|
*
|
|
@@ -1247,7 +1348,7 @@ type CardBlock = {
|
|
|
1247
1348
|
};
|
|
1248
1349
|
type CarouselBlock = {
|
|
1249
1350
|
/**
|
|
1250
|
-
* Available in surfaces: **Messages**
|
|
1351
|
+
* Available in surfaces: **Messages**, **Home tabs**
|
|
1251
1352
|
*
|
|
1252
1353
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/carousel-block/ View here}
|
|
1253
1354
|
*
|
|
@@ -1653,6 +1754,6 @@ type Props = {
|
|
|
1653
1754
|
withoutWrapper?: boolean;
|
|
1654
1755
|
};
|
|
1655
1756
|
type MessageProps = Props;
|
|
1656
|
-
declare const Message: (props: Props) =>
|
|
1757
|
+
declare const Message: (props: Props) => React$1.JSX.Element;
|
|
1657
1758
|
|
|
1658
|
-
export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContainerBlock, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, type DataVisualizationBlock, type DataVizAxisConfig, type DataVizCartesianChart, type DataVizChart, type DataVizDataPoint, type DataVizPieChart, type DataVizSegment, type DataVizSeries, type DatePickerElement, type DateTimePickerElement, type DispatchActionConfigObject, type DividerBlock, type Element, type EmailInputElement, type ExternalSelectElement, type FeedbackButtonsElement, type FileBlock, type FileInputElement, type FilterObject, type HeaderBlock, type IconButtonElement, type ImageBlock, type ImageElement, type InputBlock, type MarkdownBlock, Message, type MessageProps, type MultiChannelsSelectElement, type MultiConversationsSelectElement, type MultiExternalSelectElement, type MultiStaticSelectElement, type MultiUsersSelectElement, type NumberInputElement, type OptionGroupObject, type OptionObject, type OptionObjectWithoutUrl, type OverflowMenuElement, type PlainTextInputElement, type PlanBlock, type RadioButtonsElement, type RichTextBlock, type RichTextBlockElement, type RichTextBlockSubElement, type RichTextInputElement, type RichTextList, type RichTextPreformatted, type RichTextQuote, type RichTextSection, type RichTextSectionBroadcast, type RichTextSectionChannel, type RichTextSectionColor, type RichTextSectionDate, type RichTextSectionElement, type RichTextSectionElementStyle, type RichTextSectionElementStyleCode, type RichTextSectionEmoji, type RichTextSectionLink, type RichTextSectionText, type RichTextSectionUser, type RichTextSectionUsergroup, type SectionBlock, type SlackFileObject, type StaticSelectElement, type Style, type TableBlock, type TableCell, type TableColumnSetting, type TaskCardBlock, type TextObject, type TextObjectTextType, type TimePickerElement, type TriggerObject, type UrlSourceElement, type UrlTextInputElement, type UsersSelectElement, type VideoBlock, type WorkflowButtonElement, type WorkflowObject };
|
|
1759
|
+
export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContainerBlock, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, type DataTableActionCell, type DataTableBlock, type DataTableCell, type DataTableRawNumberCell, type DataTableRawTextCell, type DataVisualizationBlock, type DataVizAxisConfig, type DataVizCartesianChart, type DataVizChart, type DataVizDataPoint, type DataVizPieChart, type DataVizSegment, type DataVizSeries, type DatePickerElement, type DateTimePickerElement, type DispatchActionConfigObject, type DividerBlock, type Element, type EmailInputElement, type ExternalSelectElement, type FeedbackButtonsElement, type FileBlock, type FileInputElement, type FilterObject, type HeaderBlock, type IconButtonElement, type ImageBlock, type ImageElement, type InputBlock, type MarkdownBlock, Message, type MessageProps, type MultiChannelsSelectElement, type MultiConversationsSelectElement, type MultiExternalSelectElement, type MultiStaticSelectElement, type MultiUsersSelectElement, type NumberInputElement, type OptionGroupObject, type OptionObject, type OptionObjectWithoutUrl, type OverflowMenuElement, type PlainTextInputElement, type PlanBlock, type RadioButtonsElement, type RichTextBlock, type RichTextBlockElement, type RichTextBlockSubElement, type RichTextInputElement, type RichTextList, type RichTextPreformatted, type RichTextQuote, type RichTextSection, type RichTextSectionBroadcast, type RichTextSectionChannel, type RichTextSectionColor, type RichTextSectionDate, type RichTextSectionElement, type RichTextSectionElementStyle, type RichTextSectionElementStyleCode, type RichTextSectionEmoji, type RichTextSectionLink, type RichTextSectionText, type RichTextSectionUser, type RichTextSectionUsergroup, type SectionBlock, type SlackFileObject, type StaticSelectElement, type Style, type TableBlock, type TableCell, type TableColumnSetting, type TaskCardBlock, type TextObject, type TextObjectTextType, type TimePickerElement, type TriggerObject, type UrlSourceElement, type UrlTextInputElement, type UsersSelectElement, type VideoBlock, type WorkflowButtonElement, type WorkflowObject };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
type Element = ButtonElement | CheckboxesElement | DatePickerElement | DateTimePickerElement | EmailInputElement | FeedbackButtonsElement | FileInputElement | IconButtonElement | ImageElement | MultiStaticSelectElement | MultiExternalSelectElement | MultiUsersSelectElement | MultiConversationsSelectElement | MultiChannelsSelectElement | NumberInputElement | OverflowMenuElement | PlainTextInputElement | RadioButtonsElement | RichTextInputElement | StaticSelectElement | ExternalSelectElement | UsersSelectElement | ConversationsSelectElement | ChannelsSelectElement | TimePickerElement | UrlTextInputElement | UrlSourceElement | WorkflowButtonElement | RichTextBlockElement;
|
|
@@ -780,7 +780,7 @@ type WorkflowObject = {
|
|
|
780
780
|
trigger: TriggerObject;
|
|
781
781
|
};
|
|
782
782
|
|
|
783
|
-
type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
|
|
783
|
+
type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataTableBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
|
|
784
784
|
type ActionsBlock = {
|
|
785
785
|
/**
|
|
786
786
|
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
@@ -1070,6 +1070,9 @@ type TableBlock = {
|
|
|
1070
1070
|
/**
|
|
1071
1071
|
* Available in surfaces: **Messages**
|
|
1072
1072
|
*
|
|
1073
|
+
* Note: Slack's blocks.json lists Home tabs too, but our testing shows the table block only
|
|
1074
|
+
* renders in Messages — Modals and Home tabs don't support it.
|
|
1075
|
+
*
|
|
1073
1076
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/table-block/ View here}
|
|
1074
1077
|
*
|
|
1075
1078
|
* A ***table*** block displays data in a structured table format. It supports up to 100 rows with 20 cells each. Only one table is allowed per message.
|
|
@@ -1108,6 +1111,75 @@ type TableColumnSetting = {
|
|
|
1108
1111
|
*/
|
|
1109
1112
|
is_wrapped?: boolean;
|
|
1110
1113
|
};
|
|
1114
|
+
type DataTableBlock = {
|
|
1115
|
+
/**
|
|
1116
|
+
* Available in surfaces: **Messages**, **Home tabs**
|
|
1117
|
+
*
|
|
1118
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/data-table-block View here}
|
|
1119
|
+
*
|
|
1120
|
+
* A ***data_table*** block is a rich table that supports pagination, sorting, and interactive
|
|
1121
|
+
* {@link DataTableActionCell action cells}. The first row is the header (it cannot contain
|
|
1122
|
+
* ***rich_text*** cells). A table has 2 to 201 rows (1 header plus up to 200 rows) and 1 to 20
|
|
1123
|
+
* columns, and every row must have the same number of cells.
|
|
1124
|
+
*
|
|
1125
|
+
* Sorting is alphabetical by default, and numeric when every cell in the column is
|
|
1126
|
+
* ***raw_number***.
|
|
1127
|
+
*/
|
|
1128
|
+
type: "data_table";
|
|
1129
|
+
/**
|
|
1130
|
+
* A string acting as a unique identifier for a block. If not specified, one will be generated.
|
|
1131
|
+
* Maximum length for this field is 255 characters.
|
|
1132
|
+
*/
|
|
1133
|
+
block_id?: string;
|
|
1134
|
+
/**
|
|
1135
|
+
* An array of table rows, each an array of cells. The first row is the header.
|
|
1136
|
+
*/
|
|
1137
|
+
rows: DataTableCell[][];
|
|
1138
|
+
/**
|
|
1139
|
+
* A caption for the table, used as the value of the HTML ***caption*** element.
|
|
1140
|
+
*/
|
|
1141
|
+
caption: string;
|
|
1142
|
+
/**
|
|
1143
|
+
* Number of rows per page. Minimum 1, maximum 100. Defaults to 5.
|
|
1144
|
+
*/
|
|
1145
|
+
page_size?: number;
|
|
1146
|
+
/**
|
|
1147
|
+
* The 0-based index of the column that uniquely identifies each row (the row header), which
|
|
1148
|
+
* screen readers treat as the row's primary identifier. Defaults to 0.
|
|
1149
|
+
*/
|
|
1150
|
+
row_header_column_index?: number;
|
|
1151
|
+
};
|
|
1152
|
+
type DataTableRawTextCell = {
|
|
1153
|
+
type: "raw_text";
|
|
1154
|
+
/**
|
|
1155
|
+
* The text content of the cell. Minimum length 1.
|
|
1156
|
+
*/
|
|
1157
|
+
text: string;
|
|
1158
|
+
};
|
|
1159
|
+
type DataTableRawNumberCell = {
|
|
1160
|
+
type: "raw_number";
|
|
1161
|
+
/**
|
|
1162
|
+
* The numeric value of the cell, used for numeric sorting.
|
|
1163
|
+
*/
|
|
1164
|
+
value: number;
|
|
1165
|
+
/**
|
|
1166
|
+
* Optional display text shown instead of ***value***. Minimum length 1.
|
|
1167
|
+
*/
|
|
1168
|
+
text?: string;
|
|
1169
|
+
};
|
|
1170
|
+
type DataTableActionCell = {
|
|
1171
|
+
type: "action_cell";
|
|
1172
|
+
/**
|
|
1173
|
+
* The {@link ButtonElement button} rendered in the cell. Set its ***value*** to identify the row
|
|
1174
|
+
* so your app can tell which row was clicked.
|
|
1175
|
+
*/
|
|
1176
|
+
element: ButtonElement;
|
|
1177
|
+
/**
|
|
1178
|
+
* A cell displayed in place of the button on clients that don't support action cells.
|
|
1179
|
+
*/
|
|
1180
|
+
fallback?: DataTableRawTextCell | DataTableRawNumberCell;
|
|
1181
|
+
};
|
|
1182
|
+
type DataTableCell = DataTableRawTextCell | DataTableRawNumberCell | DataTableActionCell | RichTextBlock;
|
|
1111
1183
|
type RichTextBlock = {
|
|
1112
1184
|
/**
|
|
1113
1185
|
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
@@ -1129,22 +1201,51 @@ type RichTextBlock = {
|
|
|
1129
1201
|
elements: RichTextBlockElement[];
|
|
1130
1202
|
};
|
|
1131
1203
|
type ContextActionsBlock = {
|
|
1204
|
+
/**
|
|
1205
|
+
* Available in surfaces: **Messages**
|
|
1206
|
+
*
|
|
1207
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/context-actions-block/ View here}
|
|
1208
|
+
*
|
|
1209
|
+
* Displays actions as contextual info, which can include both feedback buttons and icon buttons.
|
|
1210
|
+
*/
|
|
1132
1211
|
type: "context_actions";
|
|
1133
1212
|
elements: Element[];
|
|
1134
1213
|
block_id?: string;
|
|
1135
1214
|
};
|
|
1136
1215
|
type MarkdownBlock = {
|
|
1216
|
+
/**
|
|
1217
|
+
* Available in surfaces: **Messages**
|
|
1218
|
+
*
|
|
1219
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/markdown-block/ View here}
|
|
1220
|
+
*
|
|
1221
|
+
* Displays formatted markdown text.
|
|
1222
|
+
*/
|
|
1137
1223
|
type: "markdown";
|
|
1138
1224
|
text: string;
|
|
1139
1225
|
block_id?: string;
|
|
1140
1226
|
};
|
|
1141
1227
|
type PlanBlock = {
|
|
1228
|
+
/**
|
|
1229
|
+
* Available in surfaces: **Messages**
|
|
1230
|
+
*
|
|
1231
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/plan-block/ View here}
|
|
1232
|
+
*
|
|
1233
|
+
* Displays a plan made up of one or more {@link TaskCardBlock task cards}.
|
|
1234
|
+
*/
|
|
1142
1235
|
type: "plan";
|
|
1143
1236
|
title: string;
|
|
1144
1237
|
tasks?: TaskCardBlock[];
|
|
1145
1238
|
block_id?: string;
|
|
1146
1239
|
};
|
|
1147
1240
|
type TaskCardBlock = {
|
|
1241
|
+
/**
|
|
1242
|
+
* Available in surfaces: **Messages**
|
|
1243
|
+
*
|
|
1244
|
+
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/task-card-block/ View here}
|
|
1245
|
+
*
|
|
1246
|
+
* Displays a single task with a status, optional details, output, and sources. Task cards can
|
|
1247
|
+
* stand alone or be nested inside a {@link PlanBlock}.
|
|
1248
|
+
*/
|
|
1148
1249
|
type: "task_card";
|
|
1149
1250
|
task_id: string;
|
|
1150
1251
|
title: string;
|
|
@@ -1160,7 +1261,7 @@ type TaskCardBlock = {
|
|
|
1160
1261
|
type AlertLevel = "default" | "info" | "warning" | "error" | "success";
|
|
1161
1262
|
type AlertBlock = {
|
|
1162
1263
|
/**
|
|
1163
|
-
* Available in surfaces: **
|
|
1264
|
+
* Available in surfaces: **Modals**
|
|
1164
1265
|
*
|
|
1165
1266
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/alert-block/ View here}
|
|
1166
1267
|
*
|
|
@@ -1204,7 +1305,7 @@ type CardImage = {
|
|
|
1204
1305
|
};
|
|
1205
1306
|
type CardBlock = {
|
|
1206
1307
|
/**
|
|
1207
|
-
* Available in surfaces: **Messages**
|
|
1308
|
+
* Available in surfaces: **Modals**, **Messages**, **Home tabs**
|
|
1208
1309
|
*
|
|
1209
1310
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/card-block/ View here}
|
|
1210
1311
|
*
|
|
@@ -1247,7 +1348,7 @@ type CardBlock = {
|
|
|
1247
1348
|
};
|
|
1248
1349
|
type CarouselBlock = {
|
|
1249
1350
|
/**
|
|
1250
|
-
* Available in surfaces: **Messages**
|
|
1351
|
+
* Available in surfaces: **Messages**, **Home tabs**
|
|
1251
1352
|
*
|
|
1252
1353
|
* * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/carousel-block/ View here}
|
|
1253
1354
|
*
|
|
@@ -1653,6 +1754,6 @@ type Props = {
|
|
|
1653
1754
|
withoutWrapper?: boolean;
|
|
1654
1755
|
};
|
|
1655
1756
|
type MessageProps = Props;
|
|
1656
|
-
declare const Message: (props: Props) =>
|
|
1757
|
+
declare const Message: (props: Props) => React$1.JSX.Element;
|
|
1657
1758
|
|
|
1658
|
-
export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContainerBlock, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, type DataVisualizationBlock, type DataVizAxisConfig, type DataVizCartesianChart, type DataVizChart, type DataVizDataPoint, type DataVizPieChart, type DataVizSegment, type DataVizSeries, type DatePickerElement, type DateTimePickerElement, type DispatchActionConfigObject, type DividerBlock, type Element, type EmailInputElement, type ExternalSelectElement, type FeedbackButtonsElement, type FileBlock, type FileInputElement, type FilterObject, type HeaderBlock, type IconButtonElement, type ImageBlock, type ImageElement, type InputBlock, type MarkdownBlock, Message, type MessageProps, type MultiChannelsSelectElement, type MultiConversationsSelectElement, type MultiExternalSelectElement, type MultiStaticSelectElement, type MultiUsersSelectElement, type NumberInputElement, type OptionGroupObject, type OptionObject, type OptionObjectWithoutUrl, type OverflowMenuElement, type PlainTextInputElement, type PlanBlock, type RadioButtonsElement, type RichTextBlock, type RichTextBlockElement, type RichTextBlockSubElement, type RichTextInputElement, type RichTextList, type RichTextPreformatted, type RichTextQuote, type RichTextSection, type RichTextSectionBroadcast, type RichTextSectionChannel, type RichTextSectionColor, type RichTextSectionDate, type RichTextSectionElement, type RichTextSectionElementStyle, type RichTextSectionElementStyleCode, type RichTextSectionEmoji, type RichTextSectionLink, type RichTextSectionText, type RichTextSectionUser, type RichTextSectionUsergroup, type SectionBlock, type SlackFileObject, type StaticSelectElement, type Style, type TableBlock, type TableCell, type TableColumnSetting, type TaskCardBlock, type TextObject, type TextObjectTextType, type TimePickerElement, type TriggerObject, type UrlSourceElement, type UrlTextInputElement, type UsersSelectElement, type VideoBlock, type WorkflowButtonElement, type WorkflowObject };
|
|
1759
|
+
export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContainerBlock, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, type DataTableActionCell, type DataTableBlock, type DataTableCell, type DataTableRawNumberCell, type DataTableRawTextCell, type DataVisualizationBlock, type DataVizAxisConfig, type DataVizCartesianChart, type DataVizChart, type DataVizDataPoint, type DataVizPieChart, type DataVizSegment, type DataVizSeries, type DatePickerElement, type DateTimePickerElement, type DispatchActionConfigObject, type DividerBlock, type Element, type EmailInputElement, type ExternalSelectElement, type FeedbackButtonsElement, type FileBlock, type FileInputElement, type FilterObject, type HeaderBlock, type IconButtonElement, type ImageBlock, type ImageElement, type InputBlock, type MarkdownBlock, Message, type MessageProps, type MultiChannelsSelectElement, type MultiConversationsSelectElement, type MultiExternalSelectElement, type MultiStaticSelectElement, type MultiUsersSelectElement, type NumberInputElement, type OptionGroupObject, type OptionObject, type OptionObjectWithoutUrl, type OverflowMenuElement, type PlainTextInputElement, type PlanBlock, type RadioButtonsElement, type RichTextBlock, type RichTextBlockElement, type RichTextBlockSubElement, type RichTextInputElement, type RichTextList, type RichTextPreformatted, type RichTextQuote, type RichTextSection, type RichTextSectionBroadcast, type RichTextSectionChannel, type RichTextSectionColor, type RichTextSectionDate, type RichTextSectionElement, type RichTextSectionElementStyle, type RichTextSectionElementStyleCode, type RichTextSectionEmoji, type RichTextSectionLink, type RichTextSectionText, type RichTextSectionUser, type RichTextSectionUsergroup, type SectionBlock, type SlackFileObject, type StaticSelectElement, type Style, type TableBlock, type TableCell, type TableColumnSetting, type TaskCardBlock, type TextObject, type TextObjectTextType, type TimePickerElement, type TriggerObject, type UrlSourceElement, type UrlTextInputElement, type UsersSelectElement, type VideoBlock, type WorkflowButtonElement, type WorkflowObject };
|