jsx-slack/types/src/block-kit/container/Modal.d.ts

Build JSON object for Slack Block Kit surfaces from JSX

import { JSXSlack } from '../../jsx';
import { DistributedProps } from '../../utils';
import { PrivateMetadataTransformer } from './utils';
interface ModalPropsBase {
    children: JSXSlack.ChildNodes;
    /**
     * An identifier for this modal to recognize it in various events from Slack.
     */
    callbackId?: string;
    /**
     * An optional metadata string for handling stored data in callback events
     * from Slack API. (3000 characters maximum)
     *
     * If not defined, the modal will use values defined in
     * `<Input type="hidden">` as metadata stringified to JSON.
     *
     * ### Custom transformer
     *
     * You can also customize how to transform hidden values into string by
     * passing the custom transformer function.
     *
     * @example
     * ```jsx
     * <Modal
     *   title="example"
     *   privateMetadata={(hidden) => hidden && new URLSearchParams(hidden).toString()}
     * >
     *   <Input type="hidden" name="A" value="foobar" />
     *   <Input type="hidden" name="B" value={123} />
     *   <Input type="hidden" name="C" value={true} />
     * </Modal>
     * ```
     *
     * In this example, the private metadata would be `A=foobar&B=123&C=true` by
     * transformation using `URLSearchParams`.
     *
     * The transformer takes an argument: JSON object of hidden values, or
     * `undefined` when there was no hidden values. It must return the transformed
     * string, or `undefined` if won't assign private metadata.
     */
    privateMetadata?: string | PrivateMetadataTransformer;
}
interface BasicModalProps extends ModalPropsBase {
    /**
     * Set whether all stacked views will clear by the close button on this modal.
     */
    clearOnClose?: boolean;
    /** A text for close button of the modal. (24 characters maximum) */
    close?: string;
    /** A unique ID for all views on a per-team basis. */
    externalId?: string;
    /**
     * Set whether to send `view_closed` event to the request URL of Slack app
     * when closed modal.
     */
    notifyOnClose?: boolean;
    /**
     * A text for submit button of the regular modal. (24 characters maximum)
     *
     * If not defined this prop in the regular modal and it required the submit
     * button, the label will be defined by `<input type="submit">` in children,
     * or used default label "Submit".
     */
    submit?: string;
    /** An user-facing title of the modal. (24 characters maximum) */
    title: string;
    /**
     * Set a type of modal.
     *
     * - `modal` (default): The regular modal surface.
     * - `workflow_step`: The modal surface for [custom workflow step](https://api.slack.com/workflows/steps).
     */
    type?: 'modal';
}
interface WorkflowStepModalProps extends ModalPropsBase {
    type: 'workflow_step';
    /**
     * ### `workflow_step` type
     *
     * When type prop has set as workflow_step, this prop has a different meaning
     * corresponded with [`submit_disabled` field in a configuration view object](https://api.slack.com/reference/workflows/configuration-view).
     *
     * By setting `submit` as `false`, the submit button will be disabled _until
     * one or more inputs have filled_.
     */
    submit?: boolean;
}
type ModalProps = DistributedProps<BasicModalProps | WorkflowStepModalProps>;
/**
 * The container component for the view of
 * [modals](https://api.slack.com/surfaces/modals).
 *
 * `<Modal>` can include following block elements:
 *
 * - `<Section>` (`<section>`)
 * - `<Image>` (`<img>`)
 * - `<Divider>` (`<hr>`)
 * - `<Header>` (`<header>`)
 * - `<Context>`
 * - `<Actions>`
 * - `<Input>` (`<input>`)
 * - `<Video>` (`<video>`)
 *
 * And these input components (Require defining `label` prop):
 *
 * - `<Input label="...">` (`<input label="...">`)
 * - `<Textarea label="...">` (`<textarea label="...">`)
 * - `<Select label="...">` (`<select label="...">`)
 * - `<ExternalSelect label="...">`
 * - `<UsersSelect label="...">`
 * - `<ConversationsSelect label="...">`
 * - `<ChannelsSelect label="...">`
 * - `<DatePicker label="...">`
 * - `<TimePicker label="...">`
 * - `<DateTimePicker label="...">`
 * - `<CheckboxGroup label="...">`
 * - `<RadioButtonGroup label="...">`
 *
 * @example
 * ```jsx
 * api.views.open({
 *   trigger_id: 'xxxxx.xxxxx.xxxxxxxxxxxx',
 *   view: (
 *     <Modal title="My first modal">
 *       <Section>Hello, modal!</Section>
 *     </Modal>
 *   ),
 * })
 * ```
 *
 * **NOTE**: TypeScript requires to cast JSX into suited type / `any`, or wrap
 * with `JSXSlack(<Modal>...</Modal>)`.
 *
 * @return The object of `view` payload, for `view` field in
 *   [`views.open`](https://api.slack.com/methods/views.open) and some
 *   similar APIs
 */
export declare const Modal: import("../../jsx-internals").BuiltInComponent<ModalProps>;
export {};