slack-blocks-to-jsx 1.0.6 → 1.1.1

package/KNOWLEDGE_BASE.md

@@ -325,7 +325,7 @@ All block components live in `src/components/blocks/`. 17 block types are suppor
 | ---------- | -------------------- | --------------------------------------------------------------------------------------------------------------- |
 | `context`  | `context.tsx`        | Up to 10 mixed text + image elements                                                                            |
 | `table`    | `table.tsx`          | `cells: Cell[][]`, optional `size`; cell alignment; bordered                                                    |
-| `markdown` | `markdown_block.tsx` | Renders **standard** GFM via `react-markdown` + `remark-gfm`; tables, task lists, code blocks, syntax highlight |
+| `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 |
 
 ### 4.5 AI/workflow blocks
 
@@ -752,6 +752,7 @@ slack blocks to jsx library/
 │       ├── is_accessory_stacked.ts
 │       ├── merge_classes.ts
 │       ├── numbers.ts
+│       ├── remark_slack_emoji.ts        # emoji rule for the markdown block (react-markdown/mdast)
 │       ├── sanitize_for_slack.ts
 │       ├── emojis/{parser.ts, list.ts}
 │       └── markdown_parser/

package/dist/index.d.mts

@@ -780,7 +780,7 @@ type WorkflowObject = {
     trigger: TriggerObject;
 };
 
-type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContextBlock | ContextActionsBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
+type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
      * Available in surfaces: **Modals**, **Messages**, **Home tabs**
@@ -1265,6 +1265,179 @@ type CarouselBlock = {
      */
     block_id?: string;
 };
+type ContainerBlock = {
+    /**
+     * Available in surfaces: **Messages**
+     *
+     * * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/container-block View here}
+     * * Changelog: {@link https://docs.slack.dev/changelog/2026/06/29/block-kit-container-block View here}
+     *
+     * A ***container*** block is a general-purpose wrapper that groups child blocks together
+     * with an optional title, subtitle and icon, a configurable ***width***, and optional
+     * collapse/expand behavior.
+     */
+    type: "container";
+    /**
+     * A plain-text title for the container, in the form of a {@link TextObject} of type
+     * ***plain_text***. Maximum length is 150 characters.
+     *
+     * Note: Slack's reference docs type this (and ***subtitle***) as a string, but the API
+     * actually expects a ***plain_text*** text object.
+     */
+    title: TextObject<"plain_text">;
+    /**
+     * An optional subtitle rendered below the title in a smaller, muted style. A
+     * {@link TextObject} of type ***plain_text*** or ***mrkdwn***. Maximum length is 150 characters.
+     */
+    subtitle?: TextObject;
+    /**
+     * An optional icon ({@link ImageElement}) rendered next to the title.
+     */
+    icon?: ImageElement;
+    /**
+     * The child blocks rendered inside the container. Maximum of 10 blocks.
+     */
+    child_blocks: Block[];
+    /**
+     * Controls the rendered width of the container. Defaults to ***standard***.
+     */
+    width?: "narrow" | "standard" | "wide" | "full";
+    /**
+     * When true, the container renders a clickable header that collapses and expands its
+     * content. Defaults to ***false***.
+     */
+    is_collapsible?: boolean;
+    /**
+     * When ***is_collapsible*** is true, controls whether the container starts collapsed.
+     * Defaults to ***false***.
+     */
+    default_collapsed?: boolean;
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated.
+     * Maximum length for this field is 255 characters.
+     */
+    block_id?: string;
+};
+/**
+ * A single ⟨label, value⟩ pair plotted on a cartesian chart (line, bar, or area).
+ */
+type DataVizDataPoint = {
+    /**
+     * The category this point belongs to. Matches an entry in
+     * {@link DataVizAxisConfig.categories}.
+     */
+    label: string;
+    /**
+     * The numeric value for this point. May be negative.
+     */
+    value: number;
+};
+/**
+ * A named collection of {@link DataVizDataPoint data points} rendered as one line,
+ * one set of bars, or one filled area. The ***name*** is shown in the chart legend.
+ */
+type DataVizSeries = {
+    /**
+     * The series name, shown in the chart legend.
+     */
+    name: string;
+    /**
+     * The data points for this series — typically one per category.
+     */
+    data: DataVizDataPoint[];
+};
+/**
+ * Axis configuration for cartesian charts (***line***, ***bar***, ***area***). Pie charts
+ * do not use this object.
+ */
+type DataVizAxisConfig = {
+    /**
+     * The ordered category labels rendered along the X axis.
+     */
+    categories?: string[];
+    /**
+     * A label for the X axis.
+     */
+    x_label?: string;
+    /**
+     * A label for the Y axis.
+     */
+    y_label?: string;
+};
+/**
+ * A single slice of a pie chart.
+ */
+type DataVizSegment = {
+    /**
+     * The segment name, shown in the legend and used to compute its percentage.
+     */
+    label: string;
+    /**
+     * The segment value. Percentages are computed from the sum of all segment values.
+     */
+    value: number;
+};
+/**
+ * A ***line***, ***bar***, or ***area*** chart. These plot one or more {@link DataVizSeries series}
+ * against a shared set of categories described by {@link DataVizAxisConfig axis_config}.
+ */
+type DataVizCartesianChart = {
+    type: "line" | "bar" | "area";
+    /**
+     * The series to plot. Each series is drawn in the next color from the palette and listed
+     * in the legend.
+     */
+    series: DataVizSeries[];
+    /**
+     * Axis configuration — categories and X / Y axis labels.
+     */
+    axis_config?: DataVizAxisConfig;
+};
+/**
+ * A ***pie*** chart. Pie charts render a set of {@link DataVizSegment segments} and do not use
+ * ***series*** or ***axis_config***.
+ */
+type DataVizPieChart = {
+    type: "pie";
+    /**
+     * The pie segments. Each segment's percentage is computed from the sum of all values.
+     */
+    segments: DataVizSegment[];
+};
+/**
+ * The chart definition for a {@link DataVisualizationBlock}. The shape depends on the chart
+ * ***type***: ***line*** / ***bar*** / ***area*** use {@link DataVizCartesianChart}, while ***pie***
+ * uses {@link DataVizPieChart}.
+ */
+type DataVizChart = DataVizCartesianChart | DataVizPieChart;
+type DataVisualizationBlock = {
+    /**
+     * Available in surfaces: **Messages**
+     *
+     * * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block View here}
+     *
+     * A ***data_visualization*** block displays data visually as a ***pie***, ***bar***, ***area***,
+     * or ***line*** chart. Line, bar, and area charts plot one or more {@link DataVizSeries series}
+     * against a shared set of categories; pie charts render a set of {@link DataVizSegment segments}.
+     *
+     * Added to Block Kit in Slack's 2026-06-16 release
+     * ({@link https://docs.slack.dev/changelog/2026/06/16/block-kit-data-visualization-block changelog}).
+     */
+    type: "data_visualization";
+    /**
+     * A plain-text title rendered above the chart (as an ***h3***).
+     */
+    title?: string;
+    /**
+     * The chart definition. The shape depends on ***chart.type***.
+     */
+    chart: DataVizChart;
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated.
+     * Maximum length for this field is 255 characters.
+     */
+    block_id?: string;
+};
 
 type RichTextBlockSubElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
 type RichTextList = {
@@ -1482,4 +1655,4 @@ type Props = {
 type MessageProps = Props;
 declare const Message: (props: Props) => react_jsx_runtime.JSX.Element;
 
-export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, 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 };
+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 };

package/dist/index.d.ts

@@ -780,7 +780,7 @@ type WorkflowObject = {
     trigger: TriggerObject;
 };
 
-type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContextBlock | ContextActionsBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
+type Block = ActionsBlock | AlertBlock | CardBlock | CarouselBlock | ContainerBlock | ContextBlock | ContextActionsBlock | DataVisualizationBlock | DividerBlock | FileBlock | HeaderBlock | ImageBlock | InputBlock | MarkdownBlock | PlanBlock | SectionBlock | TableBlock | TaskCardBlock | VideoBlock | RichTextBlock;
 type ActionsBlock = {
     /**
      * Available in surfaces: **Modals**, **Messages**, **Home tabs**
@@ -1265,6 +1265,179 @@ type CarouselBlock = {
      */
     block_id?: string;
 };
+type ContainerBlock = {
+    /**
+     * Available in surfaces: **Messages**
+     *
+     * * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/container-block View here}
+     * * Changelog: {@link https://docs.slack.dev/changelog/2026/06/29/block-kit-container-block View here}
+     *
+     * A ***container*** block is a general-purpose wrapper that groups child blocks together
+     * with an optional title, subtitle and icon, a configurable ***width***, and optional
+     * collapse/expand behavior.
+     */
+    type: "container";
+    /**
+     * A plain-text title for the container, in the form of a {@link TextObject} of type
+     * ***plain_text***. Maximum length is 150 characters.
+     *
+     * Note: Slack's reference docs type this (and ***subtitle***) as a string, but the API
+     * actually expects a ***plain_text*** text object.
+     */
+    title: TextObject<"plain_text">;
+    /**
+     * An optional subtitle rendered below the title in a smaller, muted style. A
+     * {@link TextObject} of type ***plain_text*** or ***mrkdwn***. Maximum length is 150 characters.
+     */
+    subtitle?: TextObject;
+    /**
+     * An optional icon ({@link ImageElement}) rendered next to the title.
+     */
+    icon?: ImageElement;
+    /**
+     * The child blocks rendered inside the container. Maximum of 10 blocks.
+     */
+    child_blocks: Block[];
+    /**
+     * Controls the rendered width of the container. Defaults to ***standard***.
+     */
+    width?: "narrow" | "standard" | "wide" | "full";
+    /**
+     * When true, the container renders a clickable header that collapses and expands its
+     * content. Defaults to ***false***.
+     */
+    is_collapsible?: boolean;
+    /**
+     * When ***is_collapsible*** is true, controls whether the container starts collapsed.
+     * Defaults to ***false***.
+     */
+    default_collapsed?: boolean;
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated.
+     * Maximum length for this field is 255 characters.
+     */
+    block_id?: string;
+};
+/**
+ * A single ⟨label, value⟩ pair plotted on a cartesian chart (line, bar, or area).
+ */
+type DataVizDataPoint = {
+    /**
+     * The category this point belongs to. Matches an entry in
+     * {@link DataVizAxisConfig.categories}.
+     */
+    label: string;
+    /**
+     * The numeric value for this point. May be negative.
+     */
+    value: number;
+};
+/**
+ * A named collection of {@link DataVizDataPoint data points} rendered as one line,
+ * one set of bars, or one filled area. The ***name*** is shown in the chart legend.
+ */
+type DataVizSeries = {
+    /**
+     * The series name, shown in the chart legend.
+     */
+    name: string;
+    /**
+     * The data points for this series — typically one per category.
+     */
+    data: DataVizDataPoint[];
+};
+/**
+ * Axis configuration for cartesian charts (***line***, ***bar***, ***area***). Pie charts
+ * do not use this object.
+ */
+type DataVizAxisConfig = {
+    /**
+     * The ordered category labels rendered along the X axis.
+     */
+    categories?: string[];
+    /**
+     * A label for the X axis.
+     */
+    x_label?: string;
+    /**
+     * A label for the Y axis.
+     */
+    y_label?: string;
+};
+/**
+ * A single slice of a pie chart.
+ */
+type DataVizSegment = {
+    /**
+     * The segment name, shown in the legend and used to compute its percentage.
+     */
+    label: string;
+    /**
+     * The segment value. Percentages are computed from the sum of all segment values.
+     */
+    value: number;
+};
+/**
+ * A ***line***, ***bar***, or ***area*** chart. These plot one or more {@link DataVizSeries series}
+ * against a shared set of categories described by {@link DataVizAxisConfig axis_config}.
+ */
+type DataVizCartesianChart = {
+    type: "line" | "bar" | "area";
+    /**
+     * The series to plot. Each series is drawn in the next color from the palette and listed
+     * in the legend.
+     */
+    series: DataVizSeries[];
+    /**
+     * Axis configuration — categories and X / Y axis labels.
+     */
+    axis_config?: DataVizAxisConfig;
+};
+/**
+ * A ***pie*** chart. Pie charts render a set of {@link DataVizSegment segments} and do not use
+ * ***series*** or ***axis_config***.
+ */
+type DataVizPieChart = {
+    type: "pie";
+    /**
+     * The pie segments. Each segment's percentage is computed from the sum of all values.
+     */
+    segments: DataVizSegment[];
+};
+/**
+ * The chart definition for a {@link DataVisualizationBlock}. The shape depends on the chart
+ * ***type***: ***line*** / ***bar*** / ***area*** use {@link DataVizCartesianChart}, while ***pie***
+ * uses {@link DataVizPieChart}.
+ */
+type DataVizChart = DataVizCartesianChart | DataVizPieChart;
+type DataVisualizationBlock = {
+    /**
+     * Available in surfaces: **Messages**
+     *
+     * * Docs: {@link https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block View here}
+     *
+     * A ***data_visualization*** block displays data visually as a ***pie***, ***bar***, ***area***,
+     * or ***line*** chart. Line, bar, and area charts plot one or more {@link DataVizSeries series}
+     * against a shared set of categories; pie charts render a set of {@link DataVizSegment segments}.
+     *
+     * Added to Block Kit in Slack's 2026-06-16 release
+     * ({@link https://docs.slack.dev/changelog/2026/06/16/block-kit-data-visualization-block changelog}).
+     */
+    type: "data_visualization";
+    /**
+     * A plain-text title rendered above the chart (as an ***h3***).
+     */
+    title?: string;
+    /**
+     * The chart definition. The shape depends on ***chart.type***.
+     */
+    chart: DataVizChart;
+    /**
+     * A string acting as a unique identifier for a block. If not specified, one will be generated.
+     * Maximum length for this field is 255 characters.
+     */
+    block_id?: string;
+};
 
 type RichTextBlockSubElement = RichTextList | RichTextPreformatted | RichTextQuote | RichTextSection;
 type RichTextList = {
@@ -1482,4 +1655,4 @@ type Props = {
 type MessageProps = Props;
 declare const Message: (props: Props) => react_jsx_runtime.JSX.Element;
 
-export { type ActionsBlock, type AlertBlock, type AlertLevel, type Block, type ButtonElement, type CardBlock, type CardImage, type CarouselBlock, type ChannelsSelectElement, type CheckboxesElement, type ConfirmDialogObject, type ContextActionsBlock, type ContextBlock, type ConversationsSelectElement, 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 };
+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 };