@datalayer/core 0.0.1 → 0.0.2

package/lib/components/snapshots/RuntimeSnapshotMenu.js

@@ -0,0 +1,169 @@
+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 { useCallback, useEffect, useState } from 'react';
+import { CameraIcon } from '@datalayer/icons-react';
+import { ActionList, ActionMenu, Box, Flash, FormControl, Select, Spinner } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { useToast } from '../../hooks';
+import { createRuntimeSnapshot, getRuntimeSnapshots, loadBrowserRuntimeSnapshot, loadRuntimeSnapshot } from '../../api';
+import { useRuntimesStore } from '../../state';
+import { createRuntimeSnapshotName } from '../../utils';
+/**
+ * Runtime Snapshot menu component.
+ */
+export function RuntimeSnapshotMenu(props) {
+    const { children, connection, podName, multiServiceManager, disabled } = props;
+    const { addRuntimeSnapshot, runtimesRunUrl, runtimeSnapshots, setRuntimeSnapshots } = useRuntimesStore();
+    const { trackAsyncTask } = useToast();
+    const [openLoadDialog, setOpenLoadDialog] = useState(false);
+    const [loadingKernelSnapshot, setLoadingKernelSnapshot] = useState(false);
+    const [takingKernelSnapshot, setTakingSnapshot] = useState(false);
+    const [selection, setSelection] = useState(runtimeSnapshots[0]?.id ?? '');
+    const [error, setError] = useState();
+    useEffect(() => {
+        getRuntimeSnapshots()
+            .then(snapshots => {
+            setRuntimeSnapshots(snapshots);
+            if (!selection && snapshots.length > 0) {
+                setSelection(snapshots[0].id);
+            }
+        })
+            .catch(reason => {
+            console.error(`Failed to fetch remote kernel snapshots; ${reason}`);
+        });
+    }, [runtimesRunUrl]);
+    const onLoadKernelSnapshot = useCallback(() => {
+        setError(undefined);
+        setOpenLoadDialog(true);
+    }, []);
+    const onKerenelSnapshotChanged = useCallback(event => {
+        setSelection(event.target.value);
+    }, []);
+    const onLoadKernelSnapshotSubmit = useCallback(async ({ id, connection, podName }) => {
+        if (podName) {
+            await loadRuntimeSnapshot({ id: podName, from: id });
+        }
+        else if (connection) {
+            await loadBrowserRuntimeSnapshot({ connection, id });
+        }
+    }, []);
+    const onTakeKernelSnapshot = useCallback(async () => {
+        try {
+            setTakingSnapshot(true);
+            let snapshot;
+            let task;
+            let ref = '';
+            let snapshotName = '';
+            if (podName && multiServiceManager?.remote) {
+                snapshotName = createRuntimeSnapshotName('cloud');
+                task = multiServiceManager.remote.runtimesManager.snapshot({
+                    podName,
+                    name: snapshotName,
+                    description: snapshotName,
+                    stop: false
+                });
+                ref = podName.split('-', 2).reverse()[0];
+                task.then(s => {
+                    snapshot = s;
+                });
+            }
+            else if (connection && multiServiceManager?.browser) {
+                const model = connection.model;
+                ref = model.id;
+                snapshotName = createRuntimeSnapshotName('browser');
+                let isPending = true;
+                task = createRuntimeSnapshot({
+                    connection: multiServiceManager.browser.kernels.connectTo({
+                        model
+                    }),
+                    metadata: { filename: `${snapshotName}.data` },
+                    onUploadProgress: () => {
+                        if (isPending) {
+                            isPending = false;
+                            // Get the kernel snapshot uid.
+                            getRuntimeSnapshots().then(snapshots => {
+                                snapshot = snapshots.find(s => s.name === snapshotName);
+                            });
+                        }
+                    }
+                });
+            }
+            if (task) {
+                trackAsyncTask(task, {
+                    error: {
+                        message: (reason, data) => {
+                            const msg = reason === 'Empty snapshot'
+                                ? `Runtime ${ref} will not be snapshotted as it does not contain any serializable state.`
+                                : `Failed to pause runtime ${ref} - ${reason}`;
+                            return msg;
+                        }
+                    },
+                    pending: { message: `Taking a snapshot of runtime ${ref}…` },
+                    success: {
+                        message: () => `Runtime ${ref} successfully snapshotted as ${snapshotName}.`
+                    }
+                });
+                await task;
+                if (snapshot) {
+                    addRuntimeSnapshot(snapshot);
+                }
+            }
+        }
+        finally {
+            setTakingSnapshot(false);
+        }
+    }, [connection, podName, multiServiceManager]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: CameraIcon, variant: "invisible", size: "small", disabled: loadingKernelSnapshot || takingKernelSnapshot || disabled, children: children }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: onLoadKernelSnapshot, disabled: loadingKernelSnapshot || runtimeSnapshots.length === 0, children: "Load a runtime snapshot\u2026" }), _jsx(ActionList.Item, { onSelect: onTakeKernelSnapshot, disabled: takingKernelSnapshot, children: "Take a runtime snapshot" })] }) })] }), openLoadDialog && (_jsx(Dialog, { title: "Choose a runtime snapshot to load", onClose: () => { setOpenLoadDialog(false); }, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Cancel',
+                        onClick: event => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                setOpenLoadDialog(false);
+                            }
+                        }
+                    },
+                    {
+                        buttonType: 'primary',
+                        content: loadingKernelSnapshot ? _jsx(Spinner, { size: "small" }) : 'Load',
+                        disabled: loadingKernelSnapshot,
+                        onClick: async (event) => {
+                            if (!event.defaultPrevented) {
+                                event.preventDefault();
+                                setLoadingKernelSnapshot(true);
+                                try {
+                                    setError(undefined);
+                                    const snapshot = runtimeSnapshots.find(s => s.id === selection);
+                                    if (snapshot && (connection || podName)) {
+                                        await onLoadKernelSnapshotSubmit({
+                                            connection,
+                                            id: snapshot.id,
+                                            podName
+                                        });
+                                    }
+                                    else {
+                                        setError('No runtime snapshot found.');
+                                    }
+                                }
+                                finally {
+                                    setLoadingKernelSnapshot(false);
+                                    setOpenLoadDialog(false);
+                                }
+                            }
+                        },
+                        autoFocus: true
+                    }
+                ], children: _jsxs(Box, { as: "form", children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Snapshot" }), _jsx(Select, { name: "snapshot", value: selection, onChange: onKerenelSnapshotChanged, block: true, children: runtimeSnapshots.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ? `${s.name} (${s.id})` : s.id }, s.id))) })] }), error && _jsx(Flash, { variant: "danger", children: error })] }) }))] }));
+}
+RuntimeSnapshotMenu.defaultProps = {
+    disabled: false,
+};

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

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

package/lib/components/snapshots/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 './RuntimeSnapshotMenu';

package/lib/components/snippets/SnippetDialog.d.ts

@@ -0,0 +1,42 @@
+import { CodeCellModel } from '@jupyterlab/cells';
+import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
+import { ITranslator } from '@jupyterlab/translation';
+import type { ISnippet } from '../../models';
+/**
+ * {@link SnippetDialog} properties
+ */
+export interface ISnippetDialogProps {
+    /**
+     * Code cell model
+     */
+    model: CodeCellModel;
+    /**
+     * Callback request the dialog closure.
+     */
+    onClose: () => void;
+    /**
+     * Code snippets language
+     */
+    language: string;
+    /**
+     * Code snippets
+     */
+    snippets: ISnippet[];
+    /**
+     * Markdown parser
+     */
+    markdownParser?: IMarkdownParser;
+    /**
+     * HTML sanitizer
+     */
+    sanitizer?: IRenderMime.ISanitizer;
+    /**
+     * Application translator
+     */
+    translator?: ITranslator;
+}
+/**
+ * Dialog to inject snippet in a cell.
+ */
+export declare function SnippetDialog(props: ISnippetDialogProps): JSX.Element;
+export default SnippetDialog;

package/lib/components/snippets/SnippetDialog.js

@@ -0,0 +1,47 @@
+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 { useCallback, useMemo, useState } from 'react';
+import { nullTranslator } from '@jupyterlab/translation';
+import { FormControl, Select, Text } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Dialog } from '@primer/react/experimental';
+import { Markdown } from '../display';
+/**
+ * Dialog to inject snippet in a cell.
+ */
+export function SnippetDialog(props) {
+    const { model, onClose, language, snippets, markdownParser, sanitizer, translator } = props;
+    const [selection, setSelection] = useState(snippets[0]);
+    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
+    const onSelectionChange = useCallback((e) => {
+        const selection = e.target.value;
+        setSelection(snippets[parseInt(selection, 10)]);
+    }, [setSelection, snippets]);
+    const injectSnippet = useCallback(() => {
+        const size = model.sharedModel.getSource().length;
+        model.sharedModel.updateSource(size, size, '\n'.repeat(size ? 2 : 0) + selection.code);
+        onClose();
+    }, [model, selection, onClose]);
+    return (_jsx(Dialog, { title: 'Pick a snippet to inject', onClose: onClose, footerButtons: [
+            {
+                buttonType: 'default',
+                content: trans.__('Cancel'),
+                onClick: onClose
+            },
+            {
+                buttonType: 'primary',
+                content: trans.__('Inject snippet'),
+                onClick: injectSnippet,
+                autoFocus: true
+            }
+        ], children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, {}), _jsx(Select, { block: true, onChange: onSelectionChange, children: snippets.map((snippet, index) => (_jsx(Select.Option, { value: `${index}`, children: snippet.title }, index))) }), _jsxs(FormControl.Caption, { children: [selection.description && (_jsx(Text, { as: "p", children: selection.description })), markdownParser ? (_jsx(Markdown, { markdownParser: markdownParser, sanitizer: sanitizer, text: `\`\`\`${language}\n${selection.code}\`\`\`` })) : (_jsx("code", { children: selection.code }))] })] }) }) }));
+}
+export default SnippetDialog;

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

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

package/lib/components/snippets/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 './SnippetDialog';

package/lib/components/storage/ContentsBrowser.d.ts

@@ -0,0 +1,32 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+/**
+ * The maximum upload size (in bytes) for notebook version < 5.1.0
+ */
+export declare const LARGE_FILE_SIZE: number;
+/**
+ * The size (in bytes) of the biggest chunk we should upload at once.
+ */
+export declare const CHUNK_SIZE: number;
+/**
+ * Storage browser component properties
+ */
+export interface IContentsBrowserProps {
+    /**
+     * Contents manager.
+     */
+    contents: Contents.IManager;
+    /**
+     * Contents manager.
+     */
+    localContents?: Contents.IManager;
+    /**
+     * Document registry.
+     */
+    documentRegistry?: DocumentRegistry;
+}
+/**
+ * Storage browser component.
+ */
+export declare function ContentsBrowser(props: IContentsBrowserProps): JSX.Element;
+export default ContentsBrowser;

package/lib/components/storage/ContentsBrowser.js

@@ -0,0 +1,250 @@
+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 { useCallback, useEffect, useState } from 'react';
+import { PathExt } from '@jupyterlab/coreutils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Blankslate, Dialog } from '@primer/react/experimental';
+import { CounterClockWiseIcon } from '@datalayer/icons-react';
+import { useIsMounted } from 'usehooks-ts';
+import { useToast } from '../../hooks';
+import { UploadIconButton } from '../buttons';
+import { DirectoryItem, TreeItem, modelToView } from './ContentsItems';
+/**
+ * The maximum upload size (in bytes) for notebook version < 5.1.0
+ */
+export const LARGE_FILE_SIZE = 15 * 1024 * 1024;
+/**
+ * The size (in bytes) of the biggest chunk we should upload at once.
+ */
+export const CHUNK_SIZE = 1024 * 1024;
+/**
+ * Storage browser component.
+ */
+export function ContentsBrowser(props) {
+    const { contents, localContents, documentRegistry } = props;
+    const isMounted = useIsMounted();
+    const { trackAsyncTask } = useToast();
+    const [children, setChildren] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [contextMenuAnchor, setContextMenuAnchor] = useState(null);
+    const [openDeleteConfirmation, setOpenDeleteConfirmation] = useState(false);
+    const [copyToLocalConfirmation, setCopyToLocalConfirmation] = useState(false);
+    const refresh = useCallback(() => {
+        contents.get('')
+            .then(model => {
+            setIsLoading(false);
+            setChildren(modelToView(model.content, documentRegistry));
+        })
+            .catch(reason => {
+            setIsLoading(false);
+            console.error(`Failed to fetch folder '' content for manager ${contents.serverSettings.appUrl}.`, reason);
+        });
+    }, [contents]);
+    useEffect(() => {
+        refresh();
+    }, [refresh]);
+    const upload = useCallback(
+    /**
+     * @param file File to upload
+     */
+    async (file) => {
+        const checkIsMounted = () => {
+            if (!isMounted()) {
+                return Promise.reject(`Failed to upload ${file.name}; StorageBrowser component is unmounted.`);
+            }
+        };
+        checkIsMounted();
+        const chunked = file.size > CHUNK_SIZE;
+        const currentDirectory = selectedItem
+            ? selectedItem.type === 'directory'
+                ? selectedItem.path
+                : PathExt.dirname(selectedItem.path)
+            : '';
+        const path = currentDirectory
+            ? PathExt.join(currentDirectory, file.name)
+            : file.name;
+        const name = file.name;
+        const type = 'file';
+        const format = 'base64';
+        const uploadChunk = async (blob, chunk) => {
+            checkIsMounted();
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            await new Promise((resolve, reject) => {
+                reader.onload = resolve;
+                reader.onerror = event => reject(`Failed to upload "${file.name}":` + event);
+            });
+            checkIsMounted();
+            // remove header https://stackoverflow.com/a/24289420/907060
+            const content = reader.result.split(',')[1];
+            const model = {
+                type,
+                format,
+                name,
+                chunk,
+                content,
+            };
+            return await contents.save(path, model);
+        };
+        const toastOptions = {
+            error: {
+                message: reason => {
+                    const msg = `Failed to upload ${file.name}.`;
+                    console.error(msg, reason);
+                    return msg;
+                }
+            },
+            pending: { message: `Uploading ${file.name}…` },
+            success: { message: () => `${file.name} uploaded.` }
+        };
+        if (chunked) {
+            const task = new PromiseDelegate();
+            trackAsyncTask(task.promise, toastOptions);
+            try {
+                let finalModel;
+                for (let start = 0; !finalModel; start += CHUNK_SIZE) {
+                    const end = start + CHUNK_SIZE;
+                    const lastChunk = end >= file.size;
+                    const chunk = lastChunk ? -1 : end / CHUNK_SIZE;
+                    const currentModel = await uploadChunk(file.slice(start, end), chunk);
+                    if (lastChunk) {
+                        finalModel = currentModel;
+                        task.resolve(finalModel);
+                    }
+                }
+                selectedItem ? selectedItem.refresh() : refresh();
+                return finalModel;
+            }
+            catch (error) {
+                task.reject(error);
+                throw error;
+            }
+        }
+        else {
+            const task = uploadChunk(file);
+            trackAsyncTask(task, toastOptions);
+            task.then(() => {
+                selectedItem ? selectedItem.refresh() : refresh();
+            });
+            return task;
+        }
+    }, [contents, selectedItem, refresh]);
+    const onContextMenu = useCallback((ref) => {
+        if (contextMenuAnchor === ref) {
+            setContextMenuAnchor(null);
+        }
+        else {
+            setContextMenuAnchor(ref);
+        }
+    }, [contextMenuAnchor]);
+    const onSelectDelete = useCallback(() => {
+        setOpenDeleteConfirmation(true);
+    }, []);
+    const deleteItem = useCallback(() => {
+        if (selectedItem) {
+            const task = contents.delete(selectedItem.path);
+            trackAsyncTask(task, {
+                success: { message: () => `${selectedItem.path} deleted.` },
+                pending: { message: `Deleting ${selectedItem.path}…` },
+                error: { message: reason => {
+                        const msg = `Failed to delete ${selectedItem.path}.`;
+                        console.error(msg, reason);
+                        return msg;
+                    }
+                },
+            });
+            task.finally(() => {
+                selectedItem.refresh();
+            });
+        }
+        setOpenDeleteConfirmation(false);
+    }, [contents, selectedItem]);
+    const onSelectCopyToLocal = useCallback(() => {
+        setCopyToLocalConfirmation(true);
+    }, []);
+    const copyToLocal = useCallback(() => {
+        if (selectedItem && localContents) {
+            contents.get(selectedItem.path).then((model) => {
+                const copyTask = localContents?.save(model.path, model);
+                trackAsyncTask(copyTask, {
+                    success: { message: () => `${selectedItem.path} copied to local.` },
+                    pending: { message: `Copying to local ${selectedItem.path}…` },
+                    error: { message: reason => {
+                            const msg = `Failed to copy to local ${selectedItem.path}.`;
+                            console.error(msg, reason);
+                            return msg;
+                        }
+                    },
+                });
+                copyTask.finally(() => {
+                    selectedItem.refresh();
+                });
+                setCopyToLocalConfirmation(false);
+            });
+        }
+    }, [localContents, selectedItem]);
+    const onSelect = useCallback((item, refresh) => {
+        setSelectedItem(item.path === selectedItem?.path ? null : { ...item, refresh });
+    }, [selectedItem]);
+    return (_jsxs(Box, { sx: { display: 'grid', gridTemplateAreas: `"header" "content"` }, children: [_jsxs(Box, { sx: { gridArea: 'header', display: 'flex', alignItems: 'center' }, children: [_jsx(Heading, { as: "h4", sx: {
+                            fontSize: 'var(--text-title-size-small)',
+                            lineHeight: 'var(--text-title-lineHeight-medium)',
+                            fontWeight: 'var(--text-title-weight-medium)',
+                            flex: '1 1 auto'
+                        }, children: "Contents Browser" }), _jsxs(Box, { children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: CounterClockWiseIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ?
+                _jsx(Box, { sx: {
+                        gridArea: 'content',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minHeight: '40px',
+                        height: '100vh'
+                    }, children: _jsx(Spinner, {}) })
+                :
+                    _jsx(Box, { sx: { gridArea: 'content' }, children: children ?
+                            _jsxs(_Fragment, { children: [_jsx(TreeView, { children: children?.map(child => {
+                                            return child.type === 'directory' ?
+                                                _jsx(DirectoryItem, { item: child, contents: contents, current: selectedItem, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)
+                                                :
+                                                    _jsx(TreeItem, { item: child, current: selectedItem?.path === child.path, onSelect: item => { onSelect(item, refresh); }, onContextMenu: onContextMenu }, child.name);
+                                        }) }), _jsx(ActionMenu, { anchorRef: contextMenuAnchor ?? undefined, open: contextMenuAnchor?.current !== null, onOpenChange: () => { setContextMenuAnchor(null); }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents &&
+                                                        _jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" })] }) }) }), openDeleteConfirmation &&
+                                        _jsx(Dialog, { title: "Confirm deletion", onClose: () => { setOpenDeleteConfirmation(false); }, footerButtons: [
+                                                {
+                                                    buttonType: 'default',
+                                                    content: 'Cancel',
+                                                    onClick: () => { setOpenDeleteConfirmation(false); }
+                                                },
+                                                {
+                                                    buttonType: 'danger',
+                                                    content: 'Delete',
+                                                    onClick: () => { deleteItem(); }
+                                                }
+                                            ], children: `Are you sure you want to delete ${selectedItem?.path}?` }), copyToLocalConfirmation &&
+                                        _jsx(Dialog, { title: "Confirm copy to local", onClose: () => { setCopyToLocalConfirmation(false); }, footerButtons: [
+                                                {
+                                                    buttonType: 'default',
+                                                    content: 'Cancel',
+                                                    onClick: () => { setCopyToLocalConfirmation(false); }
+                                                },
+                                                {
+                                                    buttonType: 'danger',
+                                                    content: 'Copy to local',
+                                                    onClick: () => { copyToLocal(); }
+                                                }
+                                            ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` })] })
+                            :
+                                _jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) }) })] }));
+}
+export default ContentsBrowser;

package/lib/components/storage/ContentsItems.d.ts

@@ -0,0 +1,58 @@
+import { MutableRefObject } from 'react';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+/**
+ * Content item view model
+ */
+export interface IContentsView extends Contents.IModel {
+    /**
+     * Model file type
+     */
+    fileType?: DocumentRegistry.IFileType;
+}
+interface ITreeItemProps {
+    /**
+     * Directory model
+     */
+    item: IContentsView;
+    /**
+     * Whether the item is currently selected or not.
+     */
+    current: boolean;
+    /**
+     * Callback on context menu event.
+     */
+    onContextMenu: (ref: MutableRefObject<HTMLElement | null>) => void;
+    /**
+     * Callback on item selection
+     */
+    onSelect: (item: IContentsView) => void;
+}
+/**
+ * Directory component properties
+ */
+interface IDirectoryItemProps extends Omit<ITreeItemProps, 'current' | 'onSelect' | 'refresh'> {
+    /**
+     * Jupyter contents manager
+     */
+    contents: Contents.IManager;
+    /**
+     * Current item
+     */
+    current: IContentsView | null;
+    /**
+     * Jupyter document registry
+     */
+    documentRegistry?: DocumentRegistry;
+    /**
+     * Callback on item selection
+     */
+    onSelect: (item: IContentsView, refresh: () => void) => void;
+}
+export declare function modelToView(models: Contents.IModel[], docRegistry?: DocumentRegistry): IContentsView[];
+/**
+ * Directory tree item component
+ */
+export declare function DirectoryItem(props: IDirectoryItemProps): JSX.Element;
+export declare function TreeItem(props: ITreeItemProps): import("react/jsx-runtime").JSX.Element;
+export {};