@datalayer/core 0.0.1 → 0.0.2

package/lib/components/checkout/StripeCheckout.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { createElement, useCallback, useEffect, useState } from 'react';
+import { Button, Flash, FormControl, Spinner, Text } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { useCache } from '../../hooks';
+import { useIAMStore } from '../../state';
+/**
+ * Stripe checkout.
+ */
+export function StripeCheckout({ checkoutPortal }) {
+    const { iamRunUrl } = useIAMStore();
+    const { createCheckoutSession, refreshStripePrices } = useCache();
+    const [stripe, setStripe] = useState(null);
+    const [components, setComponents] = useState(null);
+    const [items, setItems] = useState(null);
+    const [product, setProduct] = useState(null);
+    const [checkout, setCheckout] = useState(false);
+    // Refresh Stripe items.
+    useEffect(() => {
+        refreshStripePrices()
+            .then(response => {
+            if (response.success) {
+                setItems(response.prices);
+            }
+            else {
+                setItems([]);
+            }
+        })
+            .catch(error => {
+            console.error('Failed to fetch product items.', error);
+            setItems([]);
+        });
+    }, []);
+    // Load stripe components.
+    useEffect(() => {
+        import('@stripe/react-stripe-js').then(module => {
+            setComponents(module);
+        });
+    }, []);
+    // Load stripe API
+    useEffect(() => {
+        if (checkoutPortal?.metadata?.stripe_key) {
+            import('@stripe/stripe-js').then(module => {
+                setStripe(module.loadStripe(checkoutPortal.metadata.stripe_key));
+            });
+        }
+    }, [checkoutPortal?.metadata?.stripe_key]);
+    const fetchClientSecret = useCallback(() => {
+        const location = document.location;
+        // Create a Checkout Session.
+        return createCheckoutSession(product, location);
+    }, [iamRunUrl, location, product?.id]);
+    const options = { fetchClientSecret };
+    let view = (_jsx(Box, { sx: { minHeight: '40px' }, children: _jsx(Spinner, {}) }));
+    if (checkout) {
+        if (stripe && components) {
+            view = createElement(Box, { id: 'checkout', sx: { flex: '1 1 auto' } }, createElement(components.EmbeddedCheckoutProvider, { stripe, options }, createElement(components.EmbeddedCheckout)));
+        }
+    }
+    else if (items) {
+        view = items.length ? (_jsxs(Box, { sx: { flex: '1 1 auto' }, onKeyDown: event => {
+                if (product && event.key === 'Enter') {
+                    setCheckout(true);
+                }
+            }, children: [_jsx(Text, { as: "h3", children: "Choose a credits package" }), _jsx(Box, { role: "radiogroup", sx: {
+                        display: 'grid',
+                        gap: 'var(--stack-gap-normal)',
+                        gridTemplateColumns: Array(items.length).fill('1fr').join(' '),
+                        padding: 'var(--stack-padding-normal) 0'
+                    }, children: items.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
+                            setProduct(item);
+                        }, sx: {
+                            borderStyle: 'solid',
+                            borderRadius: 'var(--borderRadius-medium)',
+                            borderWidth: 'var(--borderWidth-thick)',
+                            borderColor: product?.id === item.id
+                                ? 'var(--borderColor-accent-emphasis)'
+                                : 'var(--borderColor-default)',
+                            padding: 'var(--stack-padding-condensed)',
+                            cursor: 'pointer'
+                        }, children: _jsxs(FormControl, { sx: {
+                                alignItems: 'center'
+                            }, children: [_jsx(FormControl.Label, { id: `checkout-price-${item.id}`, sx: { alignSelf: 'center' }, children: item.name }), _jsx(Text, { as: "p", children: new Intl.NumberFormat(undefined, {
+                                        style: 'currency',
+                                        currency: item.currency
+                                    }).format(item.amount / 100) }), _jsxs(Text, { as: "p", children: [item.credits, " credits"] })] }, item.id) }))) }), _jsx(Button, { variant: "primary", onClick: () => {
+                        setCheckout(true);
+                    }, disabled: product === null, sx: { float: 'right' }, children: "Checkout" })] })) : (_jsx(Box, { children: _jsx(Flash, { variant: "danger", children: "Unable to fetch the available products. Please try again later." }) }));
+    }
+    return view;
+}

package/lib/components/checkout/index.d.ts

@@ -0,0 +1 @@
+export * from './StripeCheckout';

package/lib/components/checkout/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './StripeCheckout';

package/lib/components/confetti/ConfettiSuccess.d.ts

@@ -0,0 +1,2 @@
+export declare const ConfettiSuccess: () => import("react/jsx-runtime").JSX.Element;
+export default ConfettiSuccess;

package/lib/components/confetti/ConfettiSuccess.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useWindowSize } from 'usehooks-ts';
+import Confetti from 'react-confetti';
+export const ConfettiSuccess = () => {
+    const { width, height } = useWindowSize();
+    return (_jsx(Confetti, { width: width, height: height }));
+};
+export default ConfettiSuccess;

package/lib/components/confetti/index.d.ts

@@ -0,0 +1 @@
+export * from './ConfettiSuccess';

package/lib/components/confetti/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './ConfettiSuccess';

package/lib/components/context/OrganizationSelect.d.ts

@@ -0,0 +1,2 @@
+export declare const OrganizationSelect: () => import("react/jsx-runtime").JSX.Element;
+export default OrganizationSelect;

package/lib/components/context/OrganizationSelect.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState, useEffect, useCallback } from "react";
+import { Select } from "@primer/react";
+import { useCache, useUser } from "./../../hooks";
+import { useLayoutStore } from "../../state";
+const NO_ORGANIZATION_SELECTED_VALUE = "NO_ORGANIZATION_SELECTED_VALUE";
+export const OrganizationSelect = () => {
+    const user = useUser();
+    const { organization, updateLayoutOrganization, updateLayoutSpace } = useLayoutStore();
+    const { refreshUserOrganizations, getUserOrganizations } = useCache();
+    const [organizations, setOrganizations] = useState(getUserOrganizations());
+    const [_, setSelection] = useState(organization);
+    useEffect(() => {
+        refreshUserOrganizations(user).then(resp => {
+            if (resp.success) {
+                setOrganizations(getUserOrganizations());
+            }
+        });
+    }, [user]);
+    const onSelectionChange = useCallback((e) => {
+        const selectedOrganization = e.target.value;
+        const org = selectedOrganization === NO_ORGANIZATION_SELECTED_VALUE
+            ? undefined
+            : organizations[parseInt(selectedOrganization, 10)];
+        setSelection(org);
+        updateLayoutOrganization(org);
+        updateLayoutSpace(undefined);
+    }, [setSelection, organizations]);
+    return (_jsx(_Fragment, { children: _jsxs(Select, { block: true, width: "medium", onChange: onSelectionChange, children: [_jsx(Select.Option, { value: NO_ORGANIZATION_SELECTED_VALUE, selected: organization === undefined, children: "Please select an organization..." }), organizations.map((org, index) => (_jsx(Select.Option, { value: `${index}`, selected: org.id === organization?.id, children: org.name })))] }) }));
+};
+export default OrganizationSelect;

package/lib/components/context/SpaceSelect.d.ts

@@ -0,0 +1,2 @@
+export declare const SpaceSelect: () => import("react/jsx-runtime").JSX.Element;
+export default SpaceSelect;

package/lib/components/context/SpaceSelect.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState, useEffect, useCallback } from "react";
+import { FormControl, Select } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+import { useCache, useUser } from "./../../hooks";
+import { useLayoutStore } from "../../state";
+export const SpaceSelect = () => {
+    const user = useUser();
+    const { organization, space, updateLayoutSpace } = useLayoutStore();
+    const { refreshUserSpaces, getUserSpaces, refreshOrganizationSpaces, getOrganizationSpaces } = useCache();
+    const [spaces, setSpaces] = useState([]);
+    const [_, setSelection] = useState(space);
+    useEffect(() => {
+        if (organization) {
+            refreshOrganizationSpaces(organization.id).then(resp => {
+                if (resp.success) {
+                    setSpaces(getOrganizationSpaces(organization.id));
+                }
+            });
+        }
+        else {
+            refreshUserSpaces().then(resp => {
+                if (resp.success) {
+                    setSpaces(getUserSpaces());
+                }
+            });
+        }
+    }, [user, organization]);
+    const onSelectionChange = useCallback((e) => {
+        const selectedSpace = e.target.value;
+        const org = (selectedSpace === undefined)
+            ? undefined
+            : spaces[parseInt(selectedSpace, 10)];
+        setSelection(org);
+        updateLayoutSpace(org);
+    }, [setSelection, spaces]);
+    return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }))) })] }) }) }));
+};
+export default SpaceSelect;

package/lib/components/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OrganizationSelect';
+export * from './SpaceSelect';

package/lib/components/context/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './OrganizationSelect';
+export * from './SpaceSelect';

package/lib/components/display/AvatarSkeleton.d.ts

@@ -0,0 +1,5 @@
+type IAvatarSkeletonProps = {
+    size?: number;
+};
+export declare const AvatarSkeleton: (props: IAvatarSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarSkeleton;

package/lib/components/display/AvatarSkeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { SkeletonAvatar } from "@primer/react/experimental";
+export const AvatarSkeleton = (props) => {
+    const { size } = props;
+    return (_jsx(_Fragment, { children: _jsx(SkeletonAvatar, { size: size }) }));
+};
+export default AvatarSkeleton;

package/lib/components/display/CenteredSpinner.d.ts

@@ -0,0 +1,14 @@
+declare const sizeMap: {
+    small: string;
+    medium: string;
+    large: string;
+};
+type ICenteredSpinnerProps = {
+    message?: string;
+    size?: keyof typeof sizeMap;
+};
+export declare const CenteredSpinner: {
+    (props: ICenteredSpinnerProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: Partial<ICenteredSpinnerProps>;
+};
+export default CenteredSpinner;

package/lib/components/display/CenteredSpinner.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { Spinner, Text } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+export const CenteredSpinner = (props) => {
+    const { message, size } = props;
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '40px'
+        }, children: [_jsx(Spinner, { size: size }), message && _jsx(Text, { sx: { marginLeft: 3 }, children: message })] }));
+};
+CenteredSpinner.defaultProps = {
+    size: "medium",
+};
+export default CenteredSpinner;

package/lib/components/display/CodePreview.d.ts

@@ -0,0 +1,4 @@
+export declare const CodePreview: (props: {
+    code: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CodePreview;

package/lib/components/display/CodePreview.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export const CodePreview = (props) => {
+    const { code } = props;
+    return (_jsx("pre", { style: {
+            fontSize: "12px",
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            whiteSpace: "pre-wrap",
+        }, children: code }));
+};
+export default CodePreview;

package/lib/components/display/DatalayerBox.d.ts

@@ -0,0 +1,8 @@
+type DatalayerBoxProps = {
+    id?: string;
+    title: string;
+    linkLabel?: string;
+    linkRoute?: string;
+};
+export declare const DatalayerBox: (props: React.PropsWithChildren<DatalayerBoxProps>) => import("react/jsx-runtime").JSX.Element;
+export default DatalayerBox;

package/lib/components/display/DatalayerBox.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { Link, Text } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+import { ArrowRightIcon } from "@primer/octicons-react";
+import { useNavigate } from "../../hooks";
+export const DatalayerBox = (props) => {
+    const { title, linkLabel, linkRoute, children } = props;
+    const navigate = useNavigate();
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    paddingRight: 4
+                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: "6px solid #28b899", paddingLeft: 2 }, children: title }), linkRoute && linkLabel &&
+                        _jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), children: [linkLabel, _jsx(ArrowRightIcon, {})] })] }), _jsx(Box, { sx: {
+                    borderColor: "border.default",
+                    borderStyle: "solid",
+                    borderWidth: "1",
+                    borderRadius: "2",
+                    padding: 4,
+                    marginTop: 2,
+                }, children: children })] }));
+};
+export default DatalayerBox;

package/lib/components/display/HorizontalCenter.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+type IHorizontalCenterProps = {
+    margin?: string;
+};
+export declare const HorizontalCenter: {
+    (props: PropsWithChildren<IHorizontalCenterProps>): import("react/jsx-runtime").JSX.Element;
+    defaultProps: IHorizontalCenterProps;
+};
+export default HorizontalCenter;

package/lib/components/display/HorizontalCenter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HorizontalCenter = (props) => {
+    const { children, margin } = props;
+    return (_jsx("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin,
+        }, children: children }));
+};
+HorizontalCenter.defaultProps = {
+    margin: "0px",
+};
+export default HorizontalCenter;

package/lib/components/display/JupyterDialog.d.ts

@@ -0,0 +1,69 @@
+import { JSXElementConstructor, PropsWithChildren } from 'react';
+import { Dialog } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { DialogProps } from '@primer/react/experimental';
+/**
+ * {@link JupyterDialog} options
+ */
+export interface IDialogWrapperOptions<T> {
+    /**
+     * Node to which the dialog will be attached
+     */
+    host: HTMLElement;
+    /**
+     * React element factory for the dialog body.
+     *
+     * The body component is receiving two special props:
+     * - {@link willClose} A signal emitted when the dialog is closing;
+     *   body is expected to call {@link setValue} in reaction.
+     * - {@link setValue} A callback to set the dialog body value.
+     */
+    body: JSXElementConstructor<PropsWithChildren<DialogProps & {
+        setValue: (v: T | Error) => void;
+    }>>;
+    /**
+     * The checkbox to display in the footer. Default non checkbox.
+     */
+    checkbox: Partial<Dialog.ICheckbox> | null;
+    /**
+     * The buttons to display.
+     */
+    buttons: Dialog.IButton[];
+    /**
+     * The top level text for the dialog.
+     */
+    title: string;
+}
+/**
+ * A primer dialog mimicking the JupyterLab dialog interface
+ */
+export declare class JupyterDialog<T> extends ReactWidget {
+    protected body: JSXElementConstructor<PropsWithChildren<DialogProps & {
+        setValue: (v: T | Error) => void;
+    }>>;
+    protected checkbox: Partial<Dialog.ICheckbox> | null;
+    protected buttons: Dialog.IButton[];
+    protected host: HTMLElement;
+    protected dialogTitle?: string;
+    private _closing;
+    private _result;
+    /**
+     * Create a dialog instance.
+     */
+    constructor(options?: Partial<IDialogWrapperOptions<T>>);
+    private _renderBody;
+    private _renderFooter;
+    protected render(): JSX.Element | null;
+    /**
+     * Launch the dialog as a modal window.
+     *
+     * @returns a promise that resolves with the result of the dialog.
+     */
+    launch(): Promise<Dialog.IResult<T>>;
+    protected handleButton: (idx: number) => void;
+    protected setButton: (button: Dialog.IButton) => void;
+    protected setChecked: (c: boolean) => void;
+    protected setValue: (v: T | Error) => void;
+    close: () => void;
+}
+export default JupyterDialog;

package/lib/components/display/JupyterDialog.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { createElement, useState } from 'react';
+import { Dialog } from '@jupyterlab/apputils';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Widget } from '@lumino/widgets';
+import { FocusKeys } from '@primer/behaviors';
+import { Checkbox, FormControl, useFocusZone } from '@primer/react';
+import { Dialog as PrimerDialog } from '@primer/react/experimental';
+function DialogFooter(props) {
+    const { checkbox, footerButtons, setChecked } = props;
+    const [checked, setLocalChecked] = useState();
+    const { containerRef: footerRef } = useFocusZone({
+        bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
+        focusInStrategy: 'closest'
+    });
+    return (_jsxs(PrimerDialog.Footer, { className: "dla-dialog-footer", ref: footerRef, children: [checkbox &&
+                _jsxs(FormControl, { layout: "horizontal", children: [_jsx(Checkbox, { className: checkbox.className ?? '', checked: checked, defaultChecked: checkbox.checked, onChange: e => {
+                                setLocalChecked(e.target.checked);
+                                setChecked(e.target.checked);
+                            }, title: checkbox.caption ?? '' }), _jsx(FormControl.Label, { children: checkbox.label ?? '' })] }), _jsx("div", { className: "dla-dialog-footer-spacer" }), footerButtons &&
+                _jsx(PrimerDialog.Buttons, { buttons: footerButtons })] }));
+}
+/**
+ * A primer dialog mimicking the JupyterLab dialog interface
+ */
+export class JupyterDialog extends ReactWidget {
+    body;
+    checkbox;
+    buttons;
+    host;
+    dialogTitle;
+    _closing = new PromiseDelegate();
+    _result = {
+        button: null,
+        isChecked: null,
+        value: null
+    };
+    /**
+     * Create a dialog instance.
+     */
+    constructor(options = {}) {
+        super();
+        this.host = options.host ?? document.body;
+        this.body = options.body ?? (() => null);
+        this.checkbox = options.checkbox ?? null;
+        this.buttons = options.buttons ?? [
+            Dialog.cancelButton(),
+            Dialog.okButton()
+        ];
+        this.dialogTitle = options.title;
+    }
+    _renderBody = (props) => (_jsx(PrimerDialog.Body, { children: createElement(this.body, {
+            ...props,
+            setValue: this.setValue
+        }) }));
+    _renderFooter = (props) => (_jsx(DialogFooter, { ...props, checkbox: this.checkbox, setChecked: this.setChecked }));
+    render() {
+        return (_jsx(PrimerDialog, { sx: {
+                color: 'var(--fgColor-default)',
+                backgroundColor: 'var(--bgColor-default)',
+                fontFamily: 'var(--fontStack-system)',
+                fontSize: 'var(--text-body-size-medium)',
+                lineHeight: 'var(--text-body-lineHeight-medium)',
+            }, onClose: this.close, footerButtons: this.buttons.map((but, idx) => {
+                const footerButton = {
+                    buttonType: but.displayType === 'default'
+                        ? but.accept ? 'primary' : 'default'
+                        : 'danger',
+                    onClick: () => { this.handleButton(idx); },
+                    content: but.label,
+                    'aria-label': but.ariaLabel,
+                    autoFocus: but.accept
+                };
+                return footerButton;
+            }), renderBody: this._renderBody, renderFooter: this._renderFooter, title: this.dialogTitle }));
+    }
+    /**
+     * Launch the dialog as a modal window.
+     *
+     * @returns a promise that resolves with the result of the dialog.
+     */
+    async launch() {
+        Widget.attach(this, this.host);
+        await this._closing.promise;
+        return this._result;
+    }
+    handleButton = (idx) => {
+        this.setButton(this.buttons[idx]);
+        this.close();
+    };
+    setButton = (button) => {
+        this._result.button = button;
+    };
+    setChecked = (c) => {
+        this._result.isChecked = c;
+    };
+    setValue = (v) => {
+        if (v instanceof Error) {
+            this._closing.reject(v);
+        }
+        else {
+            this._result.value = v;
+        }
+    };
+    close = () => {
+        Widget.detach(this);
+        this._closing.resolve();
+    };
+}
+export default JupyterDialog;

package/lib/components/display/Markdown.d.ts

@@ -0,0 +1,23 @@
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+/**
+ * {@link Markdown} properties
+ */
+export interface IMarkdownProps {
+    /**
+     * Text to render
+     */
+    text: string;
+    /**
+     * Markdown parser
+     */
+    markdownParser: IMarkdownParser;
+    /**
+     * HTML sanitizer; if not provided the produced HTML
+     * will not be sanitized.
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+}
+/**
+ * Rendered text as Markdown
+ */
+export declare function Markdown(props: IMarkdownProps): JSX.Element;

package/lib/components/display/Markdown.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/**
+ * Rendered text as Markdown
+ */
+export function Markdown(props) {
+    const { markdownParser, sanitizer, text } = props;
+    const [renderedText, setRenderedText] = useState('');
+    useEffect(() => {
+        markdownParser.render(text).then(r => {
+            if (sanitizer) {
+                setRenderedText(sanitizer.sanitize(r));
+            }
+            else {
+                setRenderedText(r);
+            }
+        });
+    }, [markdownParser, sanitizer, text]);
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: renderedText } });
+}