@jupyterlab/ui-components

@jupyterlab/ui-components

Version 4.0.0
Published 13 days ago
829 kB
19 dependencies
BSD-3-Clause license

Install

npm i @jupyterlab/ui-components

yarn add @jupyterlab/ui-components

pnpm add @jupyterlab/ui-components

Overview

ui-components

Index

Variables

variable addAboveIcon

const addAboveIcon: LabIcon;

variable addBelowIcon

const addBelowIcon: LabIcon;

variable addIcon

const addIcon: LabIcon;

variable badIcon

const badIcon: LabIcon;

variable bellIcon

const bellIcon: LabIcon;

variable blankIcon

const blankIcon: LabIcon;

variable bugDotIcon

const bugDotIcon: LabIcon;

variable bugIcon

const bugIcon: LabIcon;

variable buildIcon

const buildIcon: LabIcon;

variable caretDownEmptyIcon

const caretDownEmptyIcon: LabIcon;

variable caretDownEmptyThinIcon

const caretDownEmptyThinIcon: LabIcon;

variable caretDownIcon

const caretDownIcon: LabIcon;

variable caretLeftIcon

const caretLeftIcon: LabIcon;

variable caretRightIcon

const caretRightIcon: LabIcon;

variable caretUpEmptyThinIcon

const caretUpEmptyThinIcon: LabIcon;

variable caretUpIcon

const caretUpIcon: LabIcon;

variable caseSensitiveIcon

const caseSensitiveIcon: LabIcon;

variable checkIcon

const checkIcon: LabIcon;

variable circleEmptyIcon

const circleEmptyIcon: LabIcon;

variable circleIcon

const circleIcon: LabIcon;

variable clearIcon

const clearIcon: LabIcon;

variable closeIcon

const closeIcon: LabIcon;

variable codeCheckIcon

const codeCheckIcon: LabIcon;

variable codeIcon

const codeIcon: LabIcon;

variable collapseAllIcon

const collapseAllIcon: LabIcon;

variable consoleIcon

const consoleIcon: LabIcon;

variable copyIcon

const copyIcon: LabIcon;

variable copyrightIcon

const copyrightIcon: LabIcon;

variable cutIcon

const cutIcon: LabIcon;

variable DEFAULT_STYLE_CLASS

const DEFAULT_STYLE_CLASS: string;

variable deleteIcon

const deleteIcon: LabIcon;

variable downloadIcon

const downloadIcon: LabIcon;

variable duplicateIcon

const duplicateIcon: LabIcon;

variable editIcon

const editIcon: LabIcon;

variable ellipsesIcon

const ellipsesIcon: LabIcon;

variable errorIcon

const errorIcon: LabIcon;

variable expandAllIcon

const expandAllIcon: LabIcon;

variable extensionIcon

const extensionIcon: LabIcon;

variable fastForwardIcon

const fastForwardIcon: LabIcon;

variable fileIcon

const fileIcon: LabIcon;

variable fileUploadIcon

const fileUploadIcon: LabIcon;

variable filterDotIcon

const filterDotIcon: LabIcon;

variable filterIcon

const filterIcon: LabIcon;

variable filterListIcon

const filterListIcon: LabIcon;

variable folderFavoriteIcon

const folderFavoriteIcon: LabIcon;

variable folderIcon

const folderIcon: LabIcon;

variable homeIcon

const homeIcon: LabIcon;

variable HTML_SELECT_CLASS

const HTML_SELECT_CLASS: string;

variable html5Icon

const html5Icon: LabIcon;

variable IFormRendererRegistry

const IFormRendererRegistry: Token<IFormRendererRegistry>;

The token for the form component registry.

variable imageIcon

const imageIcon: LabIcon;

variable infoIcon

const infoIcon: LabIcon;

variable inspectorIcon

const inspectorIcon: LabIcon;

variable jsonIcon

const jsonIcon: LabIcon;

variable juliaIcon

const juliaIcon: LabIcon;

variable jupyterFaviconIcon

const jupyterFaviconIcon: LabIcon;

variable jupyterIcon

const jupyterIcon: LabIcon;

variable jupyterlabWordmarkIcon

const jupyterlabWordmarkIcon: LabIcon;

variable kernelIcon

const kernelIcon: LabIcon;

variable keyboardIcon

const keyboardIcon: LabIcon;

variable launcherIcon

const launcherIcon: LabIcon;

variable launchIcon

const launchIcon: LabIcon;

variable lineFormIcon

const lineFormIcon: LabIcon;

variable linkIcon

const linkIcon: LabIcon;

variable listIcon

const listIcon: LabIcon;

variable markdownIcon

const markdownIcon: LabIcon;

variable moveDownIcon

const moveDownIcon: LabIcon;

variable moveUpIcon

const moveUpIcon: LabIcon;

variable newFolderIcon

const newFolderIcon: LabIcon;

variable notebookIcon

const notebookIcon: LabIcon;

variable notTrustedIcon

const notTrustedIcon: LabIcon;

variable numberingIcon

const numberingIcon: LabIcon;

variable offlineBoltIcon

const offlineBoltIcon: LabIcon;

variable paletteIcon

const paletteIcon: LabIcon;

variable pasteIcon

const pasteIcon: LabIcon;

variable pdfIcon

const pdfIcon: LabIcon;

variable pythonIcon

const pythonIcon: LabIcon;

variable reactIcon

const reactIcon: LabIcon;

variable redoIcon

const redoIcon: LabIcon;

variable refreshIcon

const refreshIcon: LabIcon;

variable regexIcon

const regexIcon: LabIcon;

variable rKernelIcon

const rKernelIcon: LabIcon;

variable runIcon

const runIcon: LabIcon;

variable runningIcon

const runningIcon: LabIcon;

variable saveIcon

const saveIcon: LabIcon;

variable searchIcon

const searchIcon: LabIcon;

variable settingsIcon

const settingsIcon: LabIcon;

variable shareIcon

const shareIcon: LabIcon;

variable spreadsheetIcon

const spreadsheetIcon: LabIcon;

variable stopIcon

const stopIcon: LabIcon;

variable tabIcon

const tabIcon: LabIcon;

variable tableRowsIcon

const tableRowsIcon: LabIcon;

variable tagIcon

const tagIcon: LabIcon;

variable terminalIcon

const terminalIcon: LabIcon;

variable textEditorIcon

const textEditorIcon: LabIcon;

variable tocIcon

const tocIcon: LabIcon;

variable treeViewIcon

const treeViewIcon: LabIcon;

variable trustedIcon

const trustedIcon: LabIcon;

variable undoIcon

const undoIcon: LabIcon;

variable userIcon

const userIcon: LabIcon;

variable usersIcon

const usersIcon: LabIcon;

variable vegaIcon

const vegaIcon: LabIcon;

variable wordIcon

const wordIcon: LabIcon;

variable yamlIcon

const yamlIcon: LabIcon;

Functions

function AddButton

AddButton: (props: FormComponent.IAddButtonProps) => JSX.Element;

Button to add an item.
Returns
- the button as a react element.

function addCommandToolbarButtonClass

addCommandToolbarButtonClass: (w: Widget) => Widget;

function addToolbarButtonClass

addToolbarButtonClass: <T extends Widget = Widget>(w: T) => T;

Adds the toolbar button class to the toolbar widget.
Parameter w
Toolbar button widget.

function Button

Button: (props: IButtonProps) => JSX.Element;

Button component
Parameter props
Component properties
Returns
Component

function classes

classes: (
    ...classes: (string | false | { [className: string]: any })[]
) => string;

Combines classNames.
Parameter classes
A list of classNames
Returns
A single string with the combined className

function classesDedupe

classesDedupe: (
    ...classes: (string | false | { [className: string]: any })[]
) => string;

Combines classNames. Removes all duplicates
Parameter classes
A list of classNames
Returns
A single string with the combined className

function CommandToolbarButtonComponent

CommandToolbarButtonComponent: (
    props: CommandToolbarButtonComponent.IProps
) => JSX.Element;

React component for a toolbar button that wraps a command.
This wraps the ToolbarButtonComponent and watches the command registry for changes to the command.

function DropButton

DropButton: (props: FormComponent.IDropButtonProps) => JSX.Element;

Button to drop an item.
Returns
- the button as a react element.

function FilenameSearcher

FilenameSearcher: (props: IFilterBoxProps) => ReactWidget;

A widget which hosts a input textbox to filter on file names.

FilterBox: (props: IFilterBoxProps) => JSX.Element;

function FormComponent

FormComponent: (props: IFormComponentProps) => JSX.Element;

Generic rjsf form component for JupyterLab UI.

function getReactAttrs

getReactAttrs: (
    elem: Element,
    { ignore }?: { ignore?: string[] }
) => { [key: string]: string };

Translates the attributes of a DOM element into attributes that can be understood by React. Currently not comprehensive, we will add special cases as they become relevant.
Parameter elem
A DOM element
Parameter ignore
An optional list of attribute names to ignore
Returns
An object with key:value pairs that are the React-friendly translation of elem's attributes

function InputGroup

InputGroup: (props: IInputGroupProps) => JSX.Element;

InputGroup component
Parameter props
Component properties
Returns
Component

function MoveButton

MoveButton: (props: FormComponent.IMoveButtonProps) => JSX.Element;

Button to move an item.
Returns
- the button as a react element.

function ToolbarButtonComponent

ToolbarButtonComponent: (props: ToolbarButtonComponent.IProps) => JSX.Element;

React component for a toolbar button.
Parameter props
The props for ToolbarButtonComponent.

function updateFilterFunction

updateFilterFunction: (
    value: string,
    useFuzzyFilter: boolean,
    caseSensitive?: boolean
) => (item: string) => Partial<IScore> | null;

Classes

class Collapser

class Collapser<T extends Widget = Widget> extends Widget {}

A panel that supports a collapsible header made from the widget's title. Clicking on the title expands or contracts the widget.

constructor

constructor(options: Collapser.IOptions<T>);

property collapseChanged

readonly collapseChanged: ISignal<Collapser<Widget>, void>;

A signal for when the widget collapse state changes.

method handleEvent

handleEvent: (event: Event) => void;

Handle the DOM events for the Collapser widget.
Parameter event
The DOM event sent to the panel.
#### Notes This method implements the DOM EventListener interface and is called in response to events on the panel's DOM node. It should not be called directly by user code.

method onAfterAttach

protected onAfterAttach: (msg: Message) => void;

method onBeforeDetach

protected onBeforeDetach: (msg: Message) => void;

method toggle

toggle: () => void;

Toggle the collapse state of the panel.

class CommandToolbarButton

class CommandToolbarButton extends ReactWidget {}

Phosphor Widget version of CommandToolbarButtonComponent.

constructor

constructor(props: CommandToolbarButtonComponent.IProps);

Creates a command toolbar button
Parameter props
props for underlying CommandToolbarButtonComponent component

method render

render: () => JSX.Element;

class ContextMenuSvg

class ContextMenuSvg extends ContextMenu implements IDisposable {}

An object which implements a universal context menu. Tweaked to use inline svg icons

constructor

constructor(options: ContextMenu.IOptions);

Construct a new context menu.
Parameter options
The options for initializing the menu.

property isDisposed

readonly isDisposed: boolean;

Test whether the context menu is disposed.

readonly menu: MenuSvg;

property opened

readonly opened: ISignal<ContextMenu, void>;

A signal fired when the context menu is opened.

method dispose

dispose: () => void;

Dispose of the resources held by the context menu.

method open

open: (event: MouseEvent) => boolean;

Open the context menu in response to a 'contextmenu' event.
Parameter event
The 'contextmenu' event of interest.
Returns
true if the menu was opened, or false if no items matched the event and the menu was not opened.
#### Notes This method will populate the context menu with items which match the propagation path of the event, then open the menu at the mouse position indicated by the event.

class DockPanelSvg

class DockPanelSvg extends DockPanel {}

a widget which provides a flexible docking area for widgets. Tweaked to use an inline svg as the close icon

constructor

constructor(options?: DockPanel.IOptions);

Construct a new dock panel.
Parameter options
The options for initializing the panel.

class FormRendererRegistry

class FormRendererRegistry implements IFormRendererRegistry {}

A registry for property renderers used in the FormEditor component.

property renderers

readonly renderers: { [id: string]: IFormRenderer };

Returns all registered renderers in dictionary form.
Returns
- A dictionary that maps an id to a renderer.

method addRenderer

addRenderer: (id: string, renderer: IFormRenderer) => void;

Adds a renderer for a given property of a given settings plugin.
The id must follow that structure <ISettingRegistry.IPlugin.id>.<propertyName>
Parameter id
Unique ID for the given renderer.
Parameter renderer
A renderer interfacing IFormRenderer.

method getRenderer

getRenderer: (id: string) => IFormRenderer;

Returns the renderer for the given id
Parameter id
The unique id for the renderer.
Returns
- A renderer interfacing IFormRenderer.

class HTMLSelect

class HTMLSelect extends React.Component<IHTMLSelectProps> {}

method render

render: () => JSX.Element;

property referrerPolicy

referrerPolicy: IFrame.ReferrerPolicy;

Referrer policy for the iframe.
#### Notes By default, no-referrer is chosen.
For more information, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy

property sandbox

sandbox: IFrame.SandboxExceptions[];

Exceptions to the sandboxing.
#### Notes By default, all sandboxing security policies are enabled. This setting allows the user to selectively disable these policies. This should be done with care, as it can introduce security risks, and possibly allow malicious sites to execute code in a JupyterLab session.
For more information, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

property url

url: string;

The url of the IFrame.

class LabIcon

class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {}

property name

readonly name: string;

property react

readonly react: React.ForwardRefExoticComponent<any>;

A React component that will create the icon.
Parameter className
a string that will be used as the class of the container element. Overrides any existing class
Parameter container
a preexisting DOM element that will be used as the container for the svg element
Parameter label
text that will be displayed adjacent to the icon
Parameter title
a tooltip for the icon
Parameter tag
if container is not explicitly provided, this tag will be used when creating the container
Parameter stylesheet
optional string naming a builtin icon stylesheet, for example 'menuItem' or statusBar. Can also be an object defining a custom icon stylesheet, or a list of builtin stylesheet names and/or custom stylesheet objects. If array, the given stylesheets will be merged.
See @jupyterlab/ui-components/src/style/icon.ts for details
Parameter elementPosition
optional position for the inner svg element
Parameter elementSize
optional size for the inner svg element. Set to 'normal' to get a standard 16px x 16px icon
Parameter
...elementCSS - all additional args are treated as overrides for the CSS props applied to the inner svg element
Parameter ref
forwarded to the ref prop of the icon's svg element

property svgElement

readonly svgElement: HTMLElement;

property svgInnerHTML

readonly svgInnerHTML: string;

property svgReactAttrs

readonly svgReactAttrs: any;

property svgstr

svgstr: string;

method bindprops

bindprops: (props?: LabIcon.IProps) => LabIcon;

Get a view of this icon that is bound to the specified icon/style props
Parameter optional
icon/style props (same as args for .element and .react methods). These will be bound to the resulting view
Returns
a view of this LabIcon instance

method element

element: (props?: LabIcon.IProps) => HTMLElement;

Create an icon as a DOM element
Parameter className
a string that will be used as the class of the container element. Overrides any existing class
Parameter container
a preexisting DOM element that will be used as the container for the svg element
Parameter label
text that will be displayed adjacent to the icon
Parameter title
a tooltip for the icon
Parameter tag
if container is not explicitly provided, this tag will be used when creating the container
Parameter stylesheet
optional string naming a builtin icon stylesheet, for example 'menuItem' or statusBar. Can also be an object defining a custom icon stylesheet, or a list of builtin stylesheet names and/or custom stylesheet objects. If array, the given stylesheets will be merged.
See @jupyterlab/ui-components/src/style/icon.ts for details
Parameter elementPosition
optional position for the inner svg element
Parameter elementSize
optional size for the inner svg element. Set to 'normal' to get a standard 16px x 16px icon
Parameter
...elementCSS - all additional args are treated as overrides for the CSS props applied to the inner svg element
Returns
A DOM element that contains an (inline) svg element that displays an icon

method remove

static remove: (container: HTMLElement) => HTMLElement;

Remove any rendered icon from the element that contains it
Parameter container
a DOM node into which an icon was previously rendered
Returns
the cleaned container

method render

render: (container: HTMLElement, options?: LabIcon.IRendererOptions) => void;

method resolve

static resolve: ({ icon }: { icon: LabIcon.IResolvable }) => LabIcon;

Resolve an icon name or a {name, svgstr} pair into an actual LabIcon.
Parameter icon
either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields.
Returns
a LabIcon instance

method resolveElement

static resolveElement: ({
    icon,
    iconClass,
    fallback,
    ...props
}: Partial<LabIcon.IResolverProps> & LabIcon.IProps) => HTMLElement;

Resolve an icon name or a {name, svgstr} pair into a DOM element. If icon arg is undefined, the function will fall back to trying to render the icon as a CSS background image, via the iconClass arg. If both icon and iconClass are undefined, this function will return an empty div.
Parameter icon
optional, either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields
Parameter iconClass
optional, if the icon arg is not set, the iconClass arg should be a CSS class associated with an existing CSS background-image
Parameter fallback
DEPRECATED, optional, a LabIcon instance that will be used if neither icon nor iconClass are defined
Parameter props
any additional args are passed though to the element method of the resolved icon on render
Returns
a DOM node with the resolved icon rendered into it

method resolveReact

static resolveReact: ({
    icon,
    iconClass,
    fallback,
    ...props
}: Partial<LabIcon.IResolverProps> & LabIcon.IReactProps) => JSX.Element;

Resolve an icon name or a {name, svgstr} pair into a React component. If icon arg is undefined, the function will fall back to trying to render the icon as a CSS background image, via the iconClass arg. If both icon and iconClass are undefined, the returned component will simply render an empty div.
Parameter icon
optional, either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields
Parameter iconClass
optional, if the icon arg is not set, the iconClass arg should be a CSS class associated with an existing CSS background-image
Parameter fallback
DEPRECATED, optional, a LabIcon instance that will be used if neither icon nor iconClass are defined
Parameter props
any additional args are passed though to the React component of the resolved icon on render
Returns
a React component that will render the resolved icon

method resolveSvg

static resolveSvg: ({ name, svgstr }: LabIcon.IIcon) => HTMLElement | null;

Resolve a {name, svgstr} pair into an actual svg node.

method toggleDebug

static toggleDebug: (debug?: boolean) => void;

Toggle icon debug from off-to-on, or vice-versa.
Parameter debug
optional boolean to force debug on or off

method unrender

unrender: (container: HTMLElement, options?: LabIcon.IRendererOptions) => void;

class MenuSvg

class MenuSvg extends Menu {}

a widget which displays items as a canonical menu. Tweaked to use inline svg icons

constructor

constructor(options: Menu.IOptions);

construct a new menu. Overrides the default renderer
Parameter options
The options for initializing the tab bar.

method insertItem

insertItem: (index: number, options: Menu.IItemOptions) => Menu.IItem;

insert a menu item into the menu at the specified index. Replaces the default renderer for submenus
Parameter index
The index at which to insert the item.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.
#### Notes The index will be clamped to the bounds of the items.

class PanelWithToolbar

class PanelWithToolbar extends Panel implements Toolbar.IWidgetToolbar {}

A base class for panel widget with toolbar.

class RankedMenu

class RankedMenu extends Menu implements IRankedMenu {}

An extensible menu for JupyterLab application menus.

constructor

constructor(options: IRankedMenu.IOptions);

Construct a new menu.
Parameter options
Options for the lumino menu.

property rank

readonly rank: number;

Menu rank.

method addGroup

addGroup: (items: IRankedMenu.IItemOptions[], rank?: number) => IDisposable;

Add a group of menu items specific to a particular plugin.
The rank can be set for all items in the group using the function argument or per item.
Parameter items
the list of menu items to add.
Parameter rank
the default rank in the menu in which to insert the group.
Returns
Disposable of the group

method addItem

addItem: (options: IRankedMenu.IItemOptions) => IDisposableMenuItem;

Add a menu item to the end of the menu.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.

method dispose

dispose: () => void;

Dispose of the resources held by the menu.

method getRankAt

getRankAt: (index: number) => number;

Get the rank of the item at index.
Parameter index
Item index.
Returns
Rank of the item.

method insertItem

insertItem: (
    index: number,
    options: IRankedMenu.IItemOptions
) => IDisposableMenuItem;

Insert a menu item into the menu at the specified index.
Parameter index
The index at which to insert the item.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.
#### Notes The index will be clamped to the bounds of the items.

method removeItemAt

removeItemAt: (index: number) => void;

Remove the item at a given index from the menu.
Parameter index
The index of the item to remove.
#### Notes This is a no-op if the index is out of range.

property popupOpener

protected readonly popupOpener: ToolbarPopupOpener;

method dispose

dispose: () => void;

Dispose of the widget and its descendant widgets.

method insertAfter

insertAfter: (at: string, name: string, widget: Widget) => boolean;

Insert an item into the toolbar at the after a target item.
Parameter at
The target item to insert after.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar or if the target is the toolbar pop-up opener.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to null.

method insertItem

insertItem: (index: number, name: string, widget: Widget) => boolean;

Insert an item into the toolbar at the specified index.
Parameter index
The index at which to insert the item.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to null.

method onBeforeHide

onBeforeHide: (msg: Message) => void;

A message handler invoked on a 'before-hide' message.
It will hide the pop-up panel

method onResize

protected onResize: (msg: Widget.ResizeMessage) => void;

class ReactWidget

abstract class ReactWidget extends Widget {}

An abstract class for a Lumino widget which renders a React component.

constructor

constructor();

property renderPromise

renderPromise?: Promise<void>;

method create

static create: (element: ReactRenderElement) => ReactWidget;

Creates a new ReactWidget that renders a constant element.
Parameter element
React element to render.

method onAfterAttach

protected onAfterAttach: (msg: Message) => void;

Called after the widget is attached to the DOM

method onBeforeDetach

protected onBeforeDetach: (msg: Message) => void;

Called before the widget is detached from the DOM.

method onUpdateRequest

protected onUpdateRequest: (msg: Message) => void;

Called to update the state of the widget.
The default implementation of this method triggers VDOM based rendering by calling the renderDOM method.

method render

protected abstract render: () => ReactRenderElement | null;

Render the content of this widget using the virtual DOM.
This method will be called anytime the widget needs to be rendered, which includes layout triggered rendering.
Subclasses should define this method and return the root React nodes here.

class SidePanel

class SidePanel extends Widget {}

A widget meant to be contained in sidebars.
#### Note By default the content widget is an accordion panel that supports widget with associated toolbar to be displayed in the widget title.

constructor

constructor(options?: SidePanel.IOptions);

property content

readonly content: Panel;

The content hosted by the widget.

readonly header: Panel;

A panel for widgets that sit on top of the widget.

readonly toolbar: Toolbar<Widget>;

The toolbar hosted by the widget.
It sits between the header and the content

property widgets

readonly widgets: readonly Widget[];

A read-only array of the widgets in the content panel.

method addWidget

addWidget: (widget: Toolbar.IWidgetToolbar) => void;

Add a widget to the content panel bottom.
Parameter widget
Widget to add

method insertWidget

insertWidget: (index: number, widget: Toolbar.IWidgetToolbar) => void;

Insert a widget at the given position in the content panel.
Parameter index
Position
Parameter widget
Widget to insert

constructor

constructor();

property caption

caption: string;

The caption (title) of the switch.

property label

label: string;

The visible label of the switch.

property value

value: boolean;

The value of the switch.

method handleEvent

handleEvent: (event: Event) => void;

method onAfterAttach

protected onAfterAttach: () => void;

method onBeforeDetach

protected onBeforeDetach: () => void;

class TabBarSvg

class TabBarSvg<T> extends TabBar<T> {}

a widget which displays titles as a single row or column of tabs. Tweaked to use an inline svg as the close icon

constructor

constructor(options?: TabBar.IOptions<T>);

Construct a new tab bar. Overrides the default renderer.
Parameter options
The options for initializing the tab bar.

class TabPanelSvg

class TabPanelSvg extends TabPanel {}

A widget which combines a TabBar and a StackedPanel. Tweaked to use an inline svg as the close icon

constructor

constructor(options?: TabPanel.IOptions);

Construct a new tab panel.
Parameter options
The options for initializing the tab panel.

class Toolbar<T extends Widget = Widget> extends Widget {}

A class which provides a toolbar widget.

constructor(options?: Toolbar.IOptions);

Construct a new toolbar widget.

addItem: (name: string, widget: T) => boolean;

Add an item to the end of the toolbar.
Parameter name
The name of the widget to add to the toolbar.
Parameter widget
The widget to add to the toolbar.
Parameter index
The optional name of the item to insert after.
Returns
Whether the item was added to toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The item can be removed from the toolbar by setting its parent to null.

protected handleClick: (event: Event) => void;

Handle a DOM click event.

handleEvent: (event: Event) => void;

Handle the DOM events for the widget.
Parameter event
The DOM event sent to the widget.
#### Notes This method implements the DOM EventListener interface and is called in response to events on the dock panel's node. It should not be called directly by user code.

insertAfter: (at: string, name: string, widget: T) => boolean;

Insert an item into the toolbar at the after a target item.
Parameter at
The target item to insert after.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to null.

insertBefore: (at: string, name: string, widget: T) => boolean;

Insert an item into the toolbar at the before a target item.
Parameter at
The target item to insert before.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to null.

insertItem: (index: number, name: string, widget: T) => boolean;

Insert an item into the toolbar at the specified index.
Parameter index
The index at which to insert the item.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to null.

names: () => IterableIterator<string>;

Get an iterator over the ordered toolbar item names.
Returns
An iterator over the toolbar item names.

protected onAfterAttach: (msg: Message) => void;

Handle after-attach messages for the widget.

protected onBeforeDetach: (msg: Message) => void;

Handle before-detach messages for the widget.

class ToolbarButton

class ToolbarButton extends ReactWidget {}

Lumino Widget version of static ToolbarButtonComponent.

constructor

constructor(props?: ToolbarButtonComponent.IProps);

Creates a toolbar button
Parameter props
props for underlying ToolbarButton component

property enabled

enabled: boolean;

Returns true if button is enabled, false otherwise

property onClick

onClick: () => void;

Returns the click handler for the button

property pressed

pressed: boolean;

Returns true if button is pressed, false otherwise

method render

render: () => JSX.Element;

class UseSignal

class UseSignal<SENDER, ARGS> extends React.Component<
    IUseSignalProps<SENDER, ARGS>,
    IUseSignalState<SENDER, ARGS>
> {}

UseSignal provides a way to hook up a Lumino signal to a React element, so that the element is re-rendered every time the signal fires.

It is implemented through the "render props" technique, using the children prop as a function to render, so that it can be used either as a prop or as a child of this element https://reactjs.org/docs/render-props.html

Example as child:

function LiveButton(isActiveSignal: ISignal<any, boolean>) {
 return (
   <UseSignal signal={isActiveSignal} initialArgs={true}>
    {(_, isActive) => <Button isActive={isActive}>}
   </UseSignal>
 )
}

Example as prop:

function LiveButton(isActiveSignal: ISignal<any, boolean>) {
 return (
   <UseSignal
     signal={isActiveSignal}
     initialArgs={true}
     children={(_, isActive) => <Button isActive={isActive}>}
   />
 )
}

constructor

constructor(props: IUseSignalProps<SENDER, ARGS>);

method componentDidMount

componentDidMount: () => void;

method componentWillUnmount

componentWillUnmount: () => void;

method render

render: () => React.ReactNode;

class VDomModel

class VDomModel implements VDomRenderer.IModel {}

Concrete implementation of VDomRenderer model.

property isDisposed

readonly isDisposed: boolean;

Test whether the model is disposed.

property stateChanged

readonly stateChanged: Signal<this, void>;

A signal emitted when any model state changes.

method dispose

dispose: () => void;

Dispose the model.

class VDomRenderer

abstract class VDomRenderer<
    T extends VDomRenderer.IModel | null = null
> extends ReactWidget {}

An abstract ReactWidget with a model.

constructor

constructor(model?: VDomRenderer.IModel);

Create a new VDomRenderer

property model

model: VDomRenderer.IModel;

Get the current model.

property modelChanged

readonly modelChanged: ISignal<this, void>;

A signal emitted when the model changes.

method dispose

dispose: () => void;

Dispose this widget.

class WindowedLayout

class WindowedLayout extends PanelLayout {}

Customized layout for windowed list container.

constructor

constructor();

Constructor

property parent

parent: WindowedList<WindowedList.IModel>;

Specialized parent type definition

method attachWidget

protected attachWidget: (index: number, widget: Widget) => void;

Attach a widget to the parent's DOM node.
Parameter index
The current index of the widget in the layout.
Parameter widget
The widget to attach to the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation adds the widgets's node to the parent's node at the proper location, and sends the appropriate attach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is added to the parent's node.

method detachWidget

protected detachWidget: (index: number, widget: Widget) => void;

Detach a widget from the parent's DOM node.
Parameter index
The previous index of the widget in the layout.
Parameter widget
The widget to detach from the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation removes the widget's node from the parent's node, and sends the appropriate detach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is removed from the parent's node.

method moveWidget

protected moveWidget: (
    fromIndex: number,
    toIndex: number,
    widget: Widget
) => void;

Move a widget in the parent's DOM node.
Parameter fromIndex
The previous index of the widget in the layout.
Parameter toIndex
The current index of the widget in the layout.
Parameter widget
The widget to move in the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation moves the widget's node to the proper location in the parent's node and sends the appropriate attach and detach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is moved in the parent's node.

method onUpdateRequest

protected onUpdateRequest: (msg: Message) => void;

A message handler invoked on an 'update-request' message.
#### Notes This is a reimplementation of the base class method, and is a no-op.

class WindowedList

class WindowedList<
    T extends WindowedList.IModel = WindowedList.IModel
> extends Widget {}

Windowed list widget

constructor

constructor(options: WindowedList.IOptions<T>);

Constructor
Parameter options
Constructor options

property DEFAULT_WIDGET_SIZE

static readonly DEFAULT_WIDGET_SIZE: number;

Default widget size

property isParentHidden

isParentHidden: boolean;

Whether the parent is hidden or not.
This should be set externally if a container is hidden to stop updating the widget size when hidden.

property layout

readonly layout: WindowedLayout;

Widget layout

property viewModel

readonly viewModel: WindowedList.IModel;

Windowed list view model

property viewportNode

readonly viewportNode: HTMLDivElement;

Viewport

method handleEvent

handleEvent: (event: Event) => void;

Callback on event.
Parameter event
Event

method onAfterAttach

protected onAfterAttach: (msg: Message) => void;

A message handler invoked on an 'after-attach' message.

method onBeforeDetach

protected onBeforeDetach: (msg: Message) => void;

A message handler invoked on an 'before-detach' message.

method onResize

protected onResize: (msg: Widget.ResizeMessage) => void;

A message handler invoked on an 'resize-request' message.

method onScroll

protected onScroll: (event: Event) => void;

Callback on scroll event
Parameter event
Scroll event

method onStateChanged

protected onStateChanged: (
    model: WindowedList.IModel,
    changes: IChangedArgs<number | boolean, number | boolean, string>
) => void;

Callback on view model change
Parameter model
Windowed list model
Parameter changes
Change

method onUpdateRequest

protected onUpdateRequest: (msg: Message) => void;

A message handler invoked on an 'update-request' message.
#### Notes The default implementation of this handler is a no-op.

method scrollTo

scrollTo: (scrollOffset: number) => void;

Scroll to the specified offset scrollTop.
Parameter scrollOffset
Offset to scroll
Deprecated
since v4 This is an internal helper. Prefer calling scrollToItem.

method scrollToItem

scrollToItem: (
    index: number,
    align?: WindowedList.ScrollToAlign,
    margin?: number
) => Promise<void>;

Scroll to the specified item.
By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list. center - Center align the item within the list. end - Align the item to the end of the list start - Align the item to the beginning of the list
Parameter index
Item index to scroll to
Parameter align
Type of alignment
Parameter margin
In 'smart' mode the viewport proportion to add

class WindowedListModel

abstract class WindowedListModel implements WindowedList.IModel {}

Windowed list abstract model.

constructor

constructor(options?: WindowedList.IModelOptions);

Constructor
Parameter options
Constructor options

property estimateWidgetSize

abstract estimateWidgetSize: (index: number) => number;

Provide a best guess for the widget size at position index
#### Notes
This function should be very light to compute especially when returning the default size. The default value should be constant (i.e. two calls with null should return the same value). But it can change for a given index.
Parameter index
Widget position
Returns
Estimated widget size

property height

height: number;

List widget height

property isDisposed

readonly isDisposed: boolean;

Test whether the model is disposed.

property itemsList

itemsList: any;

Items list to be rendered

property overscanCount

overscanCount: number;

Number of widgets to render in addition to those visible in the viewport.

property scrollOffset

scrollOffset: number;

Viewport scroll offset.

property stateChanged

readonly stateChanged: ISignal<
    WindowedListModel,
    IChangedArgs<
        any,
        any,
        'count' | 'index' | 'list' | 'overscanCount' | 'windowingActive'
    >
>;

A signal emitted when any model state changes.

property widgetCount

widgetCount: number;

Total number of widgets in the list

property widgetRenderer

abstract widgetRenderer: (index: number) => Widget;

Widget factory for the list items.
Caching the resulting widgets should be done by the callee.
Parameter index
List index
Returns
The widget at the given position

property windowingActive

windowingActive: boolean;

Whether windowing is active or not.
This is true by default.

method dispose

dispose: () => void;

Dispose the model.

method getEstimatedTotalSize

getEstimatedTotalSize: () => number;

Get the total list size.
Returns
Total estimated size

method getOffsetForIndexAndAlignment

getOffsetForIndexAndAlignment: (
    index: number,
    align?: WindowedList.ScrollToAlign,
    margin?: number
) => number;

Get the scroll offset to display an item in the viewport.
By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list. center - Center align the item within the list. end - Align the item to the end of the list start - Align the item to the beginning of the list
Parameter index
Item index
Parameter align
Where to align the item in the viewport
Parameter margin
In 'smart' mode the viewport proportion to add
Returns
The needed scroll offset

method getRangeToRender

getRangeToRender: () => WindowedList.WindowIndex | null;

Compute the items range to display.
It returns ``null`` if the range does not need to be updated.
Returns
The current items range to display

method getSpan

getSpan: (startIndex: number, stopIndex: number) => [number, number];

Return the viewport top position and height for range spanning from ``startIndex`` to ``stopIndex``.
Parameter startIndex
First item in viewport index
Parameter stopIndex
Last item in viewport index
Returns
The viewport top position and its height

method onListChanged

protected onListChanged: (
    list: IObservableList<Widget>,
    changes: IObservableList.IChangedArgs<Widget>
) => void;

Callback on list changes
Parameter list
List items
Parameter changes
List change

method resetAfterIndex

resetAfterIndex: (index: number) => void;

WindowedListModel caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index.
The list will automatically re-render after the index is reset.
Parameter index

method setWidgetSize

setWidgetSize: (sizes: { index: number; size: number }[]) => boolean;

Update item sizes.
This should be called when the real item sizes has been measured.
Parameter sizes
New sizes per item index
Returns
Whether some sizes changed or not

Interfaces

interface IButtonProps

interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

Button component property

property minimal

minimal?: boolean;

Whether this button should use minimal styles.

property small

small?: boolean;

Whether this button should use small styles.

interface IDisposableMenuItem

interface IDisposableMenuItem extends IDisposable, Menu.IItem {}

Interface for disposable item menu

interface IElementRefProps

interface IElementRefProps<E extends HTMLElement> {}

property elementRef

elementRef?: (ref: E | null) => void;

Ref handler to access the instance of the internal HTML element.

interface IFilterBoxProps

interface IFilterBoxProps {}

The class name added to the filebrowser crumbs node.

property caseSensitive

caseSensitive?: boolean;

Whether to use case-sensitive search

property disabled

disabled?: boolean;

Whether the search box is disabled or not.

property forceRefresh

forceRefresh?: boolean;

Whether to force a refresh.

property initialQuery

initialQuery?: string;

An optional initial search value.

property inputRef

inputRef?: React.RefObject<HTMLInputElement>;

Pass a ref to the input element

property placeholder

placeholder?: string;

Optional placeholder for the search box.

property updateFilter

updateFilter: (
    filterFn: (item: string) => Partial<IScore> | null,
    query?: string
) => void;

A function to callback when filter is updated.

property useFuzzyFilter

useFuzzyFilter: boolean;

Whether to use the fuzzy filter.

interface IFormComponentProps

interface IFormComponentProps<T = ReadonlyJSONObject>
    extends FormProps<T>,
        FormComponent.ILabCustomizerProps {}

FormComponent properties

property formContext

formContext?: unknown;

property formData

formData: T;

property onChange

onChange: (e: IChangeEvent<T>) => any;

interface IFormRenderer

interface IFormRenderer {}

Form renderer interface.

property fieldRenderer

fieldRenderer?: Field;

A React component with properties FieldProps.

property widgetRenderer

widgetRenderer?: Widget;

A React component with properties WidgetProps.

interface IFormRendererRegistry

interface IFormRendererRegistry {}

A registry for rendering fields used in the FormEditor component.

property addRenderer

addRenderer: (id: string, renderer: IFormRenderer) => void;

Adds a renderer for a given property of a given settings plugin.
The id must follow that structure <ISettingRegistry.IPlugin.id>.<propertyName>
Parameter id
Unique ID for the given renderer.
Parameter renderer
A renderer interfacing IFormRenderer.

property getRenderer

getRenderer: (id: string) => IFormRenderer;

Returns the component for the given id
Parameter id
The unique id for the component.
Returns
- A component interfacing IFormComponent.

property renderers

renderers: {
    [id: string]: IFormRenderer;
};

Returns all registered renderers in dictionary form.
Returns
- A dictionary that maps an id to a renderer.

interface IHTMLSelectProps

interface IHTMLSelectProps
    extends IElementRefProps<HTMLSelectElement>,
        React.SelectHTMLAttributes<HTMLSelectElement> {}

property defaultStyle

defaultStyle?: boolean;

property icon

icon?: LabIcon;

property iconProps

iconProps?: LabIcon.IProps;

property options

options?: Array<string | number | IOptionProps>;

interface IInputGroupProps

interface IInputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {}

InputGroup component properties

property inputRef

inputRef?: React.RefObject<HTMLInputElement>;

Pass a ref to the input element

property rightIcon

rightIcon?: string | LabIcon;

Right icon adornment

interface ILabCustomizerOptions

interface ILabCustomizerOptions<P> extends FormComponent.ILabCustomizerProps {}

property component

component: React.FunctionComponent<
    P & Required<FormComponent.ILabCustomizerProps>
>;

property name

name?: string;

interface ILabIconManager

interface ILabIconManager {}

Placeholder for future icon manager class to assist with overriding/replacing particular sets of icons

interface IOptionProps

interface IOptionProps {}

property className

className?: string;

A space-delimited list of class names

property disabled

disabled?: boolean;

Whether this option is non-interactive.

property label

label?: string;

Label text for this option. If omitted, value is used as the label.

property value

value: string | number;

Value of this option.

interface IRankedMenu

interface IRankedMenu extends IDisposable {}

A common interface for extensible JupyterLab application menus.
Plugins are still free to define their own menus in any way they like. However, JupyterLab defines a few top-level application menus that may be extended by plugins as well, such as "Edit" and "View"

property items

readonly items: ReadonlyArray<Menu.IItem>;

A read-only array of the menu items in the menu.

property rank

readonly rank?: number;

Menu rank

method addGroup

addGroup: (items: Menu.IItemOptions[], rank?: number) => IDisposable;

Add a group of menu items specific to a particular plugin.
The rank can be set for all items in the group using the function argument or per item.
Parameter items
the list of menu items to add.
Parameter rank
the default rank in the menu in which to insert the group.
Returns
Disposable of the group

method addItem

addItem: (options: IRankedMenu.IItemOptions) => IDisposable;

Add a menu item to the end of the menu.
Parameter options
The options for creating the menu item.
Returns
The disposable menu item added to the menu.

interface IScore

interface IScore {}

A text match score with associated content item.

property indices

indices: number[] | null;

The indices of the text matches.

property score

score: number;

The numerical score for the text match.

interface IUseSignalProps

interface IUseSignalProps<SENDER, ARGS> {}

Props for the UseSignal component

property children

children: (sender?: SENDER, args?: ARGS) => React.ReactNode;

Function mapping the last signal value or initial values to an element to render.
Note: returns React.ReactNode as per https://github.com/sw-yx/react-typescript-cheatsheet#higher-order-componentsrender-props

property initialArgs

initialArgs?: ARGS;

Initial value to use for the args, used before the signal emits a value. If not provided, initial args will be undefined.

property initialSender

initialSender?: SENDER;

Initial value to use for the sender, used before the signal emits a value. If not provided, initial sender will be undefined

property shouldUpdate

shouldUpdate?: (sender: SENDER, args: ARGS) => boolean;

Given the last signal value, should return whether to update the state or not.
The default unconditionally returns true, so you only have to override if you want to skip some updates.

property signal

signal: ISignal<SENDER, ARGS>;

Phosphor signal to connect to.

interface IUseSignalState

interface IUseSignalState<SENDER, ARGS> {}

State for the UseSignal component

property value

value: [SENDER?, ARGS?];

Namespaces

namespace *.svg

module '*.svg' {}

variable value

const value: string;

namespace Collapser

namespace Collapser {}

interface IOptions

interface IOptions<T extends Widget = Widget> extends Widget.IOptions {}

property collapsed

collapsed?: boolean;

widget: T;

namespace CommandPaletteSvg

namespace CommandPaletteSvg {}

variable defaultRenderer

const defaultRenderer: Renderer;

class Renderer

class Renderer extends CommandPalette.Renderer {}

a modified implementation of the CommandPalette Renderer

method createIconClass

createIconClass: (data: CommandPalette.IItemRenderData) => string;

Create the class name for the command item icon.
Parameter data
The data to use for the class name.
Returns
The full class name for the item icon.

method renderHeader

renderHeader: (data: CommandPalette.IHeaderRenderData) => VirtualElement;

Render the virtual element for a command palette header.
Parameter data
The data to use for rendering the header.
Returns
A virtual element representing the header.

method renderItemIcon

renderItemIcon: (data: CommandPalette.IItemRenderData) => VirtualElement;

Render the icon for a command palette item.
Parameter data
The data to use for rendering the icon.
Returns
A virtual element representing the icon.

namespace CommandToolbarButtonComponent

namespace CommandToolbarButtonComponent {}

Namespace for CommandToolbarButtonComponent.

interface IProps

interface IProps {}

Interface for CommandToolbarButtonComponent props.

property args

args?: ReadonlyJSONObject;

Command arguments

property commands

commands: CommandRegistry;

Application commands registry

property icon

icon?: LabIcon;

Overrides command icon

property id

id: string;

Command unique id

property label

label?: string;

Overrides command label

namespace DockPanelSvg

namespace DockPanelSvg {}

variable defaultRenderer

const defaultRenderer: Renderer;

class Renderer

class Renderer extends DockPanel.Renderer {}

A modified implementation of the DockPanel Renderer.

method createTabBar

createTabBar: () => TabBarSvg<Widget>;

Create a new tab bar (with inline svg icons enabled for use with a dock panel.
Returns
A new tab bar for a dock panel.

namespace FormComponent

namespace FormComponent {}

Form component namespace.

interface IAddButtonProps

interface IAddButtonProps extends IButtonProps {}

Properties of the button to add an item.

property onAddClick

onAddClick: ArrayFieldTemplateProps['onAddClick'];

Function to call to add an item.

interface IButtonProps

interface IButtonProps {}

property buttonStyle

buttonStyle?: 'icons' | 'text';

Button style.

property translator

translator?: ITranslator;

Translator for button text.

interface IDropButtonProps

interface IDropButtonProps extends IButtonProps {}

Properties of the button to drop an item.

property item

item: ArrayFieldTemplateProps['items'][number];

Item index to drop with this button.

interface ILabCustomizerProps

interface ILabCustomizerProps extends IButtonProps {}

Properties for React JSON schema form's container template (array and object).

property compact

compact?: boolean;

Whether the container is in compact mode or not. In compact mode the title and description are displayed more compactness.

property showModifiedFromDefault

showModifiedFromDefault?: boolean;

Whether to display if the current value is not the default one.

interface IMoveButtonProps

interface IMoveButtonProps extends IButtonProps {}

Properties of the button to move an item.

property direction

direction: 'up' | 'down';

Direction in which to move the item.

property item

item: ArrayFieldTemplateProps['items'][number];

Item index to move with this button.

namespace HoverBox

namespace HoverBox {}

A namespace for HoverBox members.

function setGeometry

setGeometry: (options: IOptions) => void;

Set the visible dimensions of a hovering box anchored to an editor cursor.
Parameter options
The hover box geometry calculation options.

interface IOptions

interface IOptions {}

Options for setting the geometry of a hovering node and its anchor node.

property anchor

anchor: DOMRect;

The referent anchor rectangle to which the hover box is bound.
#### Notes In an editor context, this value will typically be the cursor's coordinate position, which can be retrieved via calling the getCoordinateForPosition method.

property host

host: HTMLElement;

The node that hosts the anchor.
#### Notes The visibility of the elements under hover box edges within this host node is the heuristic that determines whether the hover box ought to be visible.

property maxHeight

maxHeight: number;

The maximum height of a hover box.
#### Notes This value is only used if a CSS max-height attribute is not set for the hover box. It is a fallback value.

property minHeight

minHeight: number;

The minimum height of a hover box.

property node

node: HTMLElement;

The hover box node.

property offset

offset?: {
    horizontal?: number;
    vertical?: {
        above?: number;
        below?: number;
    };
};

Optional pixel offset values added to where the hover box should render.
#### Notes This option is useful for passing in values that may pertain to CSS borders or padding in cases where the text inside the hover box may need to align with the text of the referent editor.
Because the hover box calculation may render a box either above or below the cursor, the vertical offset accepts above and below values for the different render modes.

property outOfViewDisplay

outOfViewDisplay?: {
    top?: OutOfViewDisplay;
    bottom?: OutOfViewDisplay;
    left?: OutOfViewDisplay;
    right?: OutOfViewDisplay;
};

How to position the hover box if its edges extend beyond the view of the host element. Value 'sticky' positions the box at the (inner or outer) edge of the host element.
#### Notes The default value for each edge is 'hidden-inside' for left and top, and hidden-outside for right and bottom edges.

property privilege

privilege?: 'above' | 'below' | 'forceAbove' | 'forceBelow';

If space is available both above and below the anchor, denote which location is privileged. Use forceBelow and forceAbove to mandate where hover box should render relative to anchor.
#### Notes The default value is 'below'.

property size

size?: {
    width: number;
    height: number;
};

Exact size of the hover box. Pass it for faster rendering (allowing the positioning algorithm to to place it immediately at requested position).

property style

style?: CSSStyleDeclaration;

If the style of the node has already been computed, it can be passed into the hover box for geometry calculation.

namespace IFrame

namespace IFrame {}

A namespace for IFrame widget statics.

interface IOptions

interface IOptions {}

Options for creating a new IFrame widget.

property referrerPolicy

referrerPolicy?: ReferrerPolicy;

Referrer policy for the iframe.

property sandbox

sandbox?: SandboxExceptions[];

Exceptions for the iframe sandbox.

type ReferrerPolicy

type ReferrerPolicy =
    | 'no-referrer'
    | 'no-referrer-when-downgrade'
    | 'origin'
    | 'origin-when-cross-origin'
    | 'same-origin'
    | 'strict-origin'
    | 'strict-origin-when-cross-origin'
    | 'unsafe-url';

Referrer policy for the iframe.
User documentation for the policies can be found here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy

type SandboxExceptions

type SandboxExceptions =
    | 'allow-downloads'
    | 'allow-forms'
    | 'allow-modals'
    | 'allow-orientation-lock'
    | 'allow-pointer-lock'
    | 'allow-popups'
    | 'popups-to-escape-sandbox'
    | 'allow-presentation'
    | 'allow-same-origin'
    | 'allow-scripts'
    | 'allow-storage-access-by-user-activation'
    | 'allow-top-navigation'
    | 'allow-top-navigation-by-user-activation';

Exceptions to the iframe sandboxing policies. These are specified here: https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox
More user-friendly documentation can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox

namespace IRankedMenu

namespace IRankedMenu {}

Namespace for JupyterLabMenu interfaces

variable DEFAULT_RANK

const DEFAULT_RANK: number;

Default menu item rank

interface IItemOptions

interface IItemOptions extends Menu.IItemOptions {}

An options object for creating a menu item.

property rank

rank?: number;

Menu item rank

interface IOptions

interface IOptions extends Menu.IOptions {}

An options object for creating a JupyterLab menu.

property includeSeparators

includeSeparators?: boolean;

Whether to include separators between the groups that are added to the menu.
Default: true

property rank

rank?: number;

Menu rank

namespace LabIcon

namespace LabIcon {}

A namespace for LabIcon statics.

interface IIcon

interface IIcon extends IRenderMime.LabIcon.IIcon {}

The simplest possible interface for defining a generic icon.

interface ILabIcon

interface ILabIcon extends IIcon, VirtualElement.IRenderer {}

The ILabIcon interface. Outside of this interface the actual implementation of LabIcon may vary

interface IOptions

interface IOptions extends IIcon, Partial<VirtualElement.IRenderer> {}

Interface defining the parameters to be passed to the LabIcon constructor

interface IProps

interface IProps extends LabIconStyle.IProps {}

The input props for creating a new LabIcon

property className

className?: string;

Extra classNames. Used in addition to the typestyle className to set the className of the icon's outermost container node

property container

container?: HTMLElement;

The icon's outermost node, which acts as a container for the actual svg node. If container is not supplied, it will be created

property label

label?: string;

Optional text label that will be added as a sibling to the icon's svg node

property tag

tag?: 'div' | 'span';

HTML element tag used to create the icon's outermost container node, if no container is passed in

property title

title?: string;

Optional title that will be set on the icon's outermost container node

interface IRendererOptions

interface IRendererOptions {}

property attrs

attrs?: ElementAttrs;

property children

children?: ReadonlyArray<VirtualNode>;

property props

props?: IProps;

interface IResolverProps

interface IResolverProps {}

property fallback

fallback?: LabIcon;

property icon

icon?: IMaybeResolvable;

property iconClass

iconClass?: string;

type IMaybeResolvable

type IMaybeResolvable = IResolvable | VirtualElement.IRenderer | undefined;

A type that maybe can be resolved to a LabIcon instance.

type IReact

type IReact = React.ForwardRefExoticComponent<IReactProps>;

The complete type of the React component stored in the .react field of a LabIcon.

type IReactProps

type IReactProps = IProps & React.RefAttributes<SVGElement>;

The properties that can be passed into the React component stored in the .react field of a LabIcon.

type IReactRef

type IReactRef = React.RefObject<SVGElement>;

The type of the svg node ref that can be passed into icon React components

type IResolvable

type IResolvable = IRenderMime.LabIcon.IResolvable;

A type that can be resolved to a LabIcon instance.

namespace MenuSvg

namespace MenuSvg {}

variable defaultRenderer

const defaultRenderer: Renderer;

function overrideDefaultRenderer

overrideDefaultRenderer: (menu: Menu) => void;

class Renderer

class Renderer extends Menu.Renderer {}

a modified implementation of the Menu Renderer

method createIconClass

createIconClass: (data: Menu.IRenderData) => string;

Create the class name for the menu item icon.
Parameter data
The data to use for the class name.
Returns
The full class name for the item icon.

method renderIcon

renderIcon: (data: Menu.IRenderData) => VirtualElement;

Render the icon element for a menu item.
Parameter data
The data to use for rendering the icon.
Returns
A virtual element representing the item icon.

method renderSubmenu

renderSubmenu: (data: Menu.IRenderData) => VirtualElement;

Render the submenu icon element for a menu item.
Parameter data
The data to use for rendering the submenu icon.
Returns
A virtual element representing the submenu icon.

namespace PanelWithToolbar

namespace PanelWithToolbar {}

Namespace for panel with toolbar

interface IOptions

interface IOptions extends Panel.IOptions {}

An options object for creating a panel with toolbar widget.

toolbar?: Toolbar;

Custom toolbar

namespace SidePanel

namespace SidePanel {}

The namespace for the SidePanel class statics.

interface IOptions

interface IOptions extends AccordionPanel.IOptions {}

An options object for creating a side panel widget.

property content

content?: Panel;

The main child of the side panel
If nothing is provided it fallback to an AccordionToolbar panel.

header?: Panel;

The header is at the top of the SidePanel, and that extensions can populate.
Defaults to an empty Panel if requested otherwise it won't be created.

toolbar?: Toolbar;

The toolbar to use for the widget. It sits between the header and the content
Defaults to an empty toolbar if requested otherwise it won't be created.

property translator

translator?: ITranslator;

The application language translator.

namespace Styling

namespace Styling {}

A namespace for node styling.

function styleNode

styleNode: (node: HTMLElement, className?: string) => void;

Style a node and its child elements with the default tag names.
Parameter node
The base node.
Parameter className
The optional CSS class to add to styled nodes.

function styleNodeByTag

styleNodeByTag: (node: HTMLElement, tagName: string, className?: string) => void;

Style a node and its elements that have a given tag name.
Parameter node
The base node.
Parameter tagName
The html tag name to style.
Parameter className
The optional CSS class to add to styled nodes.

function wrapSelect

wrapSelect: (node: HTMLSelectElement, multiple?: boolean) => HTMLElement;

Wrap a select node.

namespace TabBarSvg

namespace TabBarSvg {}

variable defaultRenderer

const defaultRenderer: Renderer;

class Renderer

class Renderer extends TabBar.Renderer {}

A modified implementation of the TabBar Renderer.

method renderCloseIcon

renderCloseIcon: (data: TabBar.IRenderData<any>) => VirtualElement;

Render the close icon element for a tab.
Parameter data
The data to use for rendering the tab.
Returns
A virtual element representing the tab close icon.

namespace Toolbar {}

The namespace for Toolbar class statics.

createSpacerItem: () => Widget;

Create a toolbar spacer item.
#### Notes It is a flex spacer that separates the left toolbar items from the right toolbar items.

interface IOptions {}

The options used to create a toolbar.

layout?: Layout;

Toolbar widget layout.

interface IWidgetToolbar extends Widget {}

Widget with associated toolbar

toolbar?: Toolbar;

Toolbar of actions on the widget

namespace ToolbarButtonComponent

namespace ToolbarButtonComponent {}

Namespace for ToolbarButtonComponent.

interface IProps

interface IProps {}

Interface for ToolbarButtonComponent props.

property actualOnClick

actualOnClick?: boolean;

Trigger the button on the actual onClick event rather than onMouseDown.
See note in ToolbarButtonComponent below as to why the default is to trigger on onMouseDown.

property className

className?: string;

property dataset

dataset?: DOMStringMap;

Data set of the button

property disabledTooltip

disabledTooltip?: string;

property enabled

enabled?: boolean;

property icon

icon?: LabIcon.IMaybeResolvable;

property iconClass

iconClass?: string;

property iconLabel

iconLabel?: string;

property label

label?: string;

property onClick

onClick?: () => void;

property pressed

pressed?: boolean;

property pressedIcon

pressedIcon?: LabIcon.IMaybeResolvable;

property pressedTooltip

pressedTooltip?: string;

property tooltip

tooltip?: string;

property translator

translator?: ITranslator;

The application language translator.

namespace VDomRenderer

namespace VDomRenderer {}

The namespace for VDomRenderer statics.

interface IModel

interface IModel extends IDisposable {}

An interface for a model to be used with vdom rendering.

property stateChanged

readonly stateChanged: ISignal<this, void>;

A signal emitted when any model state changes.

namespace WindowedList

namespace WindowedList {}

A namespace for windowed list

interface IModel

interface IModel extends IDisposable {}

Windowed list model interface

property estimateWidgetSize

estimateWidgetSize: (index: number) => number;

Provide a best guess for the widget size at position index
#### Notes
This function should be very light to compute especially when returning the default size. The default value should be constant (i.e. two calls with null should return the same value). But it can change for a given index.
Parameter index
Widget position
Returns
Estimated widget size

property height

height: number;

List widget height

property itemsList

itemsList: {
    length: number;
    changed: ISignal<any, IObservableList.IChangedArgs<any>>;
} | null;

Items list to be rendered

property overscanCount

overscanCount: number;

Number of widgets to render in addition to those visible in the viewport.

property scrollOffset

scrollOffset: number;

Viewport scroll offset.

property stateChanged

readonly stateChanged: ISignal<
    IModel,
    IChangedArgs<
        any,
        any,
        'count' | 'index' | 'list' | 'overscanCount' | 'windowingActive'
    >
>;

A signal emitted when any model state changes.

property widgetCount

widgetCount: number;

Total number of widgets in the list

property widgetRenderer

widgetRenderer: (index: number) => Widget;

Widget factory for the list items.
Caching the resulting widgets should be done by the callee.
Parameter index
List index
Returns
The widget at the given position

property windowingActive

windowingActive: boolean;

Whether windowing is active or not.

method getEstimatedTotalSize

getEstimatedTotalSize: () => number;

Get the total list size.
Returns
Total estimated size

method getOffsetForIndexAndAlignment

getOffsetForIndexAndAlignment: (
    index: number,
    align?: ScrollToAlign,
    margin?: number
) => number;

Get the scroll offset to display an item in the viewport.
By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list. center - Center align the item within the list. end - Align the item to the end of the list start - Align the item to the beginning of the list
Parameter index
Item index
Parameter align
Where to align the item in the viewport
Parameter margin
In 'smart' mode the viewport proportion to add
Returns
The needed scroll offset

method getRangeToRender

getRangeToRender: () => WindowIndex | null;

Compute the items range to display.
It returns ``null`` if the range does not need to be updated.
Returns
The current items range to display

method getSpan

getSpan: (start: number, stop: number) => [number, number];

Return the viewport top position and height for range spanning from ``startIndex`` to ``stopIndex``.
Parameter start
First item in viewport index
Parameter stop
Last item in viewport index
Returns
The viewport top position and its height

method resetAfterIndex

resetAfterIndex: (index: number) => void;

WindowedListModel caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index.
The list will automatically re-render after the index is reset.
Parameter index

method setWidgetSize

setWidgetSize: (sizes: { index: number; size: number }[]) => boolean;

Update item sizes.
This should be called when the real item sizes has been measured.
Parameter sizes
New sizes per item index
Returns
Whether some sizes changed or not

interface IModelOptions

interface IModelOptions {}

Windowed list model constructor options

property count

count?: number;

Total number of widgets in the list.
#### Notes If an observable list is provided this will be ignored.

property itemsList

itemsList?: IObservableList<any>;

Dynamic list of items

property overscanCount

overscanCount?: number;

Number of widgets to render in addition to those visible in the viewport.

property windowingActive

windowingActive?: boolean;

Whether windowing is active or not.
This is true by default.

interface IOptions

interface IOptions<T extends WindowedList.IModel = WindowedList.IModel> {}

Windowed list view constructor options

property layout

layout?: WindowedLayout;

Windowed list layout

property model

model: T;

Windowed list model to display

type ItemMetadata

type ItemMetadata = {
    /**
     * Item vertical offset in the container
     */
    offset: number;
    /**
     * Item height
     */
    size: number;
    /**
     * Whether the size is an estimation or a measurement.
     */
    measured?: boolean;
};

Item list metadata

type ScrollToAlign

type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';

Type of scroll

type WindowIndex

type WindowIndex = [number, number, number, number];

Widget range in view port

Peer Dependencies (1)

react

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@jupyterlab/ui-components.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@jupyterlab/ui-components)

HTML

<a href="https://www.jsdocs.io/package/@jupyterlab/ui-components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 11 days ago.
Package analyzed in 7075 ms.
Missing or incorrect documentation? Open an issue for this package.

@jupyterlab/ui-components

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Namespaces

Variables

variable addAboveIcon

variable addBelowIcon

variable addIcon

variable badIcon

variable bellIcon

variable blankIcon

variable bugDotIcon

variable bugIcon

variable buildIcon

variable caretDownEmptyIcon

variable caretDownEmptyThinIcon

variable caretDownIcon

variable caretLeftIcon

variable caretRightIcon

variable caretUpEmptyThinIcon

variable caretUpIcon

variable caseSensitiveIcon

variable checkIcon

variable circleEmptyIcon

variable circleIcon

variable clearIcon

variable closeIcon

variable codeCheckIcon

variable codeIcon

variable collapseAllIcon

variable consoleIcon

variable copyIcon

variable copyrightIcon

variable cutIcon

variable DEFAULT_STYLE_CLASS

variable DEFAULT_UI_OPTIONS

variable deleteIcon

variable downloadIcon

variable duplicateIcon

variable editIcon

variable ellipsesIcon

variable errorIcon

variable expandAllIcon

variable extensionIcon

variable fastForwardIcon

variable fileIcon

variable fileUploadIcon

variable filterDotIcon

variable filterIcon

variable filterListIcon

variable folderFavoriteIcon

variable folderIcon

variable homeIcon

variable HTML_SELECT_CLASS

variable html5Icon

variable IFormRendererRegistry

variable ILabIconManager

variable imageIcon

variable infoIcon

variable inspectorIcon

variable jsonIcon

variable juliaIcon

variable jupyterFaviconIcon

variable jupyterIcon

variable jupyterlabWordmarkIcon

variable kernelIcon

variable keyboardIcon

variable launcherIcon

variable launchIcon

variable lineFormIcon

variable linkIcon

variable listIcon

variable markdownIcon

variable moveDownIcon

variable moveUpIcon