Class CommandPalette

A widget which displays command items as a searchable palette.

Hierarchy

Widget
- CommandPalette

Constructors

constructor

new CommandPalette(options: CommandPalette.IOptions): CommandPalette
Construct a new command palette.
Parameters
- options: CommandPalette.IOptions
  
  The options for initializing the palette.
Returns CommandPalette
Overrides Widget.constructor
- Defined in packages/widgets/src/commandpalette.ts:38

Properties

`Private` _activeIndex

_activeIndex: number = -1

`Private` _items

_items: CommandPalette.IItem[] = []

`Private` _results

_results: null | SearchResult[] = null

`Readonly` commands

commands: CommandRegistry

The command registry used by the command palette.

`Readonly` node

node: HTMLElement

Get the DOM node owned by the widget.

`Readonly` renderer

renderer: CommandPalette.IRenderer

The renderer used by the command palette.

Accessors

contentNode

get contentNode(): HTMLUListElement
The command palette content node.

Notes

This is the node which holds the command item nodes.

Modifying this node directly can lead to undefined behavior.

Returns HTMLUListElement
- Defined in packages/widgets/src/commandpalette.ts:99

dataset

get dataset(): DOMStringMap
The dataset for the widget's DOM node.

Returns DOMStringMap
Inherited from Widget.dataset
- Defined in packages/widgets/src/widget.ts:163

disposed

get disposed(): ISignal<this, void>
A signal emitted when the widget is disposed.

Returns ISignal<this, void>
Inherited from Widget.disposed
- Defined in packages/widgets/src/widget.ts:90

hiddenMode

get hiddenMode(): HiddenMode
Get the method for hiding the widget.

Returns HiddenMode
Inherited from Widget.hiddenMode
- Defined in packages/widgets/src/widget.ts:170
set hiddenMode(value: HiddenMode): void
Set the method for hiding the widget.
Parameters
- value: HiddenMode
Returns void
Inherited from Widget.hiddenMode
- Defined in packages/widgets/src/widget.ts:177

id

get id(): string
Get the id of the widget's DOM node.

Returns string
Inherited from Widget.id
- Defined in packages/widgets/src/widget.ts:149
set id(value: string): void
Set the id of the widget's DOM node.
Parameters
- value: string
Returns void
Inherited from Widget.id
- Defined in packages/widgets/src/widget.ts:156

inputNode

get inputNode(): HTMLInputElement
The command palette input node.

Notes

This is the actual input node for the search area.

Returns HTMLInputElement
- Defined in packages/widgets/src/commandpalette.ts:85

isAttached

get isAttached(): boolean
Test whether the widget's node is attached to the DOM.

Returns boolean
Inherited from Widget.isAttached
- Defined in packages/widgets/src/widget.ts:109

isDisposed

get isDisposed(): boolean
Test whether the widget has been disposed.

Returns boolean
Inherited from Widget.isDisposed
- Defined in packages/widgets/src/widget.ts:102

isHidden

get isHidden(): boolean
Test whether the widget is explicitly hidden.

Returns boolean
Inherited from Widget.isHidden
- Defined in packages/widgets/src/widget.ts:116

isVisible

get isVisible(): boolean
Test whether the widget is visible.

Notes

A widget is visible when it is attached to the DOM, is not explicitly hidden, and has no explicitly hidden ancestors.

Returns boolean
Inherited from Widget.isVisible
- Defined in packages/widgets/src/widget.ts:127

items

get items(): readonly CommandPalette.IItem[]
A read-only array of the command items in the palette.

Returns readonly CommandPalette.IItem[]
- Defined in packages/widgets/src/commandpalette.ts:108

layout

get layout(): null | Layout
Get the layout for the widget.

Returns null | Layout
Inherited from Widget.layout
- Defined in packages/widgets/src/widget.ts:243
set layout(value: null | Layout): void
Set the layout for the widget.

Notes

The layout is single-use only. It cannot be changed after the first assignment.

The layout is disposed automatically when the widget is disposed.
Parameters
- value: null | Layout
Returns void
Inherited from Widget.layout
- Defined in packages/widgets/src/widget.ts:256

parent

get parent(): null | Widget
Get the parent of the widget.

Returns null | Widget
Inherited from Widget.parent
- Defined in packages/widgets/src/widget.ts:204
set parent(value: null | Widget): void
Set the parent of the widget.

Notes

Children are typically added to a widget by using a layout, which means user code will not normally set the parent widget directly.

The widget will be automatically removed from its old parent.

This is a no-op if there is no effective parent change.
Parameters
- value: null | Widget
Returns void
Inherited from Widget.parent
- Defined in packages/widgets/src/widget.ts:219

searchNode

get searchNode(): HTMLDivElement
The command palette search node.

Notes

This is the node which contains the search-related elements.

Returns HTMLDivElement
- Defined in packages/widgets/src/commandpalette.ts:73

title

get title(): Title<Widget>
The title object for the widget.

Notes

The title object is used by some container widgets when displaying the widget alongside some title, such as a tab panel or side bar.

Since not all widgets will use the title, it is created on demand.

The owner property of the title is set to this widget.

Returns Title<Widget>
Inherited from Widget.title
- Defined in packages/widgets/src/widget.ts:142

Methods

`Private` _activateNextItem

_activateNextItem(): void
Activate the next enabled command item.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:424

`Private` _activatePreviousItem

_activatePreviousItem(): void
Activate the previous enabled command item.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:449

`Private` _evtClick

_evtClick(event: MouseEvent): void
Handle the 'click' event for the command palette.
Parameters
- event: MouseEvent
Returns void
- Defined in packages/widgets/src/commandpalette.ts:364

`Private` _evtKeyDown

_evtKeyDown(event: KeyboardEvent): void
Handle the 'keydown' event for the command palette.
Parameters
- event: KeyboardEvent
Returns void
- Defined in packages/widgets/src/commandpalette.ts:398

`Private` _execute

_execute(index: number): void
Execute the command item at the given index, if possible.
Parameters
- index: number
Returns void
- Defined in packages/widgets/src/commandpalette.ts:474

`Private` _onGenericChange

_onGenericChange(): void
A signal handler for generic command changes.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:521

`Private` _toggleFocused

_toggleFocused(): void
Toggle the focused modifier based on the input node focus state.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:513

activate

activate(): void
Post an 'activate-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.activate
- Defined in packages/widgets/src/widget.ts:396

addClass

addClass(name: string): void
Add a class name to the widget's DOM node.
Parameters
- name: string
  
  The class name to add to the node.
  
  Notes
  
  If the class name is already added to the node, this is a no-op.
  
  The class name must not contain whitespace.
Returns void
Inherited from Widget.addClass
- Defined in packages/widgets/src/widget.ts:326

addItem

addItem(options: CommandPalette.IItemOptions): CommandPalette.IItem
Add a command item to the command palette.

Returns
The command item added to the palette.
Parameters
- options: CommandPalette.IItemOptions
  
  The options for creating the command item.
Returns CommandPalette.IItem
- Defined in packages/widgets/src/commandpalette.ts:119

addItems

addItems(items: CommandPalette.IItemOptions[]): CommandPalette.IItem[]
Adds command items to the command palette.

Returns
The command items added to the palette.
Parameters
- items: CommandPalette.IItemOptions[]
  
  An array of options for creating each command item.
Returns CommandPalette.IItem[]
- Defined in packages/widgets/src/commandpalette.ts:140

children

children(): IterableIterator<Widget>
Create an iterator over the widget's children.

Returns
A new iterator over the children of the widget.

Notes

The widget must have a populated layout in order to have children.

If a layout is not installed, the returned iterator will be empty.

Returns IterableIterator<Widget>
Inherited from Widget.children
- Defined in packages/widgets/src/widget.ts:283

clearFlag

clearFlag(flag: Flag): void
Clear the given widget flag.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns void
Inherited from Widget.clearFlag
- Defined in packages/widgets/src/widget.ts:506

clearItems

clearItems(): void
Remove all items from the command palette.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:183

close

close(): void
Send a 'close-request' message to the widget.

Notes

This is a simple convenience method for sending the message.

Returns void
Inherited from Widget.close
- Defined in packages/widgets/src/widget.ts:406

contains

contains(widget: Widget): boolean
Test whether a widget is a descendant of this widget.

Returns
true if the widget is a descendant, false otherwise.
Parameters
- widget: Widget
  
  The descendant widget of interest.
Returns boolean
Inherited from Widget.contains
- Defined in packages/widgets/src/widget.ts:296

dispose

dispose(): void
Dispose of the resources held by the widget.

Returns void
Overrides Widget.dispose
- Defined in packages/widgets/src/commandpalette.ts:51

fit

fit(): void
Post a 'fit-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.fit
- Defined in packages/widgets/src/widget.ts:386

handleEvent

handleEvent(event: Event): void
Handle the DOM events for the command palette.
Parameters
- event: Event
  
  The DOM event sent to the command palette.
  
  Notes
  
  This method implements the DOM EventListener interface and is called in response to events on the command palette's DOM node. It should not be called directly by user code.
Returns void
- Defined in packages/widgets/src/commandpalette.ts:235

hasClass

hasClass(name: string): boolean
Test whether the widget's DOM node has the given class name.

Returns
true if the node has the class, false otherwise.
Parameters
- name: string
  
  The class name of interest.
Returns boolean
Inherited from Widget.hasClass
- Defined in packages/widgets/src/widget.ts:312

hide

hide(): void
Hide the widget and make it hidden to its parent widget.

Notes

This causes the isHidden property to be true.

If the widget is explicitly hidden, this is a no-op.

Returns void
Inherited from Widget.hide
- Defined in packages/widgets/src/widget.ts:445

`Protected` notifyLayout

notifyLayout(msg: Message): void
Invoke the message processing routine of the widget's layout.
Parameters
- msg: Message
  
  The message to dispatch to the layout.
  
  Notes
  
  This is a no-op if the widget does not have a layout.
  
  This will not typically be called directly by user code.
Returns void
Inherited from Widget.notifyLayout
- Defined in packages/widgets/src/widget.ts:604

`Protected` onActivateRequest

onActivateRequest(msg: Message): void
A message handler invoked on an 'activate-request' message.
Parameters
- msg: Message
Returns void
Overrides Widget.onActivateRequest
- Defined in packages/widgets/src/commandpalette.ts:286

`Protected` onAfterAttach

onAfterAttach(msg: Message): void
A message handler invoked on an 'after-attach' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onAfterAttach
- Defined in packages/widgets/src/widget.ts:702

`Protected` onAfterDetach

onAfterDetach(msg: Message): void
A message handler invoked on an 'after-detach' message.
Parameters
- msg: Message
Returns void
Overrides Widget.onAfterDetach
- Defined in packages/widgets/src/commandpalette.ts:267

`Protected` onAfterHide

onAfterHide(msg: Message): void
A message handler invoked on an 'after-hide' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onAfterHide
- Defined in packages/widgets/src/widget.ts:686

`Protected` onAfterShow

onAfterShow(msg: Message): void
A message handler invoked on an 'after-show' message.
Parameters
- msg: Message
Returns void
Overrides Widget.onAfterShow
- Defined in packages/widgets/src/commandpalette.ts:278

`Protected` onBeforeAttach

onBeforeAttach(msg: Message): void
A message handler invoked on a 'before-attach' message.
Parameters
- msg: Message
Returns void
Overrides Widget.onBeforeAttach
- Defined in packages/widgets/src/commandpalette.ts:256

`Protected` onBeforeDetach

onBeforeDetach(msg: Message): void
A message handler invoked on a 'before-detach' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onBeforeDetach
- Defined in packages/widgets/src/widget.ts:710

`Protected` onBeforeHide

onBeforeHide(msg: Message): void
A message handler invoked on a 'before-hide' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onBeforeHide
- Defined in packages/widgets/src/widget.ts:678

`Protected` onBeforeShow

onBeforeShow(msg: Message): void
A message handler invoked on a 'before-show' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onBeforeShow
- Defined in packages/widgets/src/widget.ts:662

`Protected` onChildAdded

onChildAdded(msg: ChildMessage): void
A message handler invoked on a 'child-added' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: ChildMessage
Returns void
Inherited from Widget.onChildAdded
- Defined in packages/widgets/src/widget.ts:726

`Protected` onChildRemoved

onChildRemoved(msg: ChildMessage): void
A message handler invoked on a 'child-removed' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: ChildMessage
Returns void
Inherited from Widget.onChildRemoved
- Defined in packages/widgets/src/widget.ts:734

`Protected` onCloseRequest

onCloseRequest(msg: Message): void
A message handler invoked on a 'close-request' message.

Notes

The default implementation unparents or detaches the widget.
Parameters
- msg: Message
Returns void
Inherited from Widget.onCloseRequest
- Defined in packages/widgets/src/widget.ts:616

`Protected` onFitRequest

onFitRequest(msg: Message): void
A message handler invoked on a 'fit-request' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: Message
Returns void
Inherited from Widget.onFitRequest
- Defined in packages/widgets/src/widget.ts:646

`Protected` onResize

onResize(msg: ResizeMessage): void
A message handler invoked on a 'resize' message.

Notes

The default implementation of this handler is a no-op.
Parameters
- msg: ResizeMessage
Returns void
Inherited from Widget.onResize
- Defined in packages/widgets/src/widget.ts:630

`Protected` onUpdateRequest

onUpdateRequest(msg: Message): void
A message handler invoked on an 'update-request' message.
Parameters
- msg: Message
Returns void
Overrides Widget.onUpdateRequest
- Defined in packages/widgets/src/commandpalette.ts:297

processMessage

processMessage(msg: Message): void
Process a message sent to the widget.
Parameters
- msg: Message
  
  The message sent to the widget.
  
  Notes
  
  Subclasses may reimplement this method as needed.
Returns void
Inherited from Widget.processMessage
- Defined in packages/widgets/src/widget.ts:518

refresh

refresh(): void
Clear the search results and schedule an update.

Notes

This should be called whenever the search results of the palette should be updated.

This is typically called automatically by the palette as needed, but can be called manually if the input text is programatically changed.

The rendered results are updated asynchronously.

Returns void
- Defined in packages/widgets/src/commandpalette.ts:209

removeClass

removeClass(name: string): void
Remove a class name from the widget's DOM node.
Parameters
- name: string
  
  The class name to remove from the node.
  
  Notes
  
  If the class name is not yet added to the node, this is a no-op.
  
  The class name must not contain whitespace.
Returns void
Inherited from Widget.removeClass
- Defined in packages/widgets/src/widget.ts:340

removeItem

removeItem(item: CommandPalette.IItem): void
Remove an item from the command palette.
Parameters
- item: CommandPalette.IItem
  
  The item to remove from the palette.
  
  Notes
  
  This is a no-op if the item is not in the palette.
Returns void
- Defined in packages/widgets/src/commandpalette.ts:155

removeItemAt

removeItemAt(index: number): void
Remove the item at a given index from the command palette.
Parameters
- index: number
  
  The index of the item to remove.
  
  Notes
  
  This is a no-op if the index is out of range.
Returns void
- Defined in packages/widgets/src/commandpalette.ts:167

setFlag

setFlag(flag: Flag): void
Set the given widget flag.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns void
Inherited from Widget.setFlag
- Defined in packages/widgets/src/widget.ts:496

setHidden

setHidden(hidden: boolean): void
Show or hide the widget according to a boolean value.
Parameters
- hidden: boolean
  
  true to hide the widget, or false to show it.
  
  Notes
  
  This is a convenience method for hide() and show().
Returns void
Inherited from Widget.setHidden
- Defined in packages/widgets/src/widget.ts:472

show

show(): void
Show the widget and make it visible to its parent widget.

Notes

This causes the isHidden property to be false.

If the widget is not explicitly hidden, this is a no-op.

Returns void
Inherited from Widget.show
- Defined in packages/widgets/src/widget.ts:418

testFlag

testFlag(flag: Flag): boolean
Test whether the given widget flag is set.

Notes

This will not typically be called directly by user code.
Parameters
- flag: Flag
Returns boolean
Inherited from Widget.testFlag
- Defined in packages/widgets/src/widget.ts:486

toggleClass

toggleClass(name: string, force?: boolean): boolean
Toggle a class name on the widget's DOM node.

Returns
true if the class is now present, false otherwise.

Notes

The class name must not contain whitespace.
Parameters
- name: string
  
  The class name to toggle on the node.
- Optional force: boolean
  
  Whether to force add the class (true) or force remove the class (false). If not provided, the presence of the class will be toggled from its current state.
Returns boolean
Inherited from Widget.toggleClass
- Defined in packages/widgets/src/widget.ts:358

update

update(): void
Post an 'update-request' message to the widget.

Notes

This is a simple convenience method for posting the message.

Returns void
Inherited from Widget.update
- Defined in packages/widgets/src/widget.ts:376

Class CommandPalette

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

options: CommandPalette.IOptions

Returns CommandPalette

Properties

Private _activeIndex

Private _items

Private _results

Readonly commands

Readonly node

Readonly renderer

Accessors

contentNode

Notes

Returns HTMLUListElement

dataset

Returns DOMStringMap

disposed

Returns ISignal<this, void>

hiddenMode

Returns HiddenMode

Parameters

value: HiddenMode

Returns void

id

Returns string

Parameters

value: string

Returns void

inputNode

Notes

Returns HTMLInputElement

isAttached

Returns boolean

isDisposed

Returns boolean

isHidden

Returns boolean

isVisible

Notes

Returns boolean

items

Returns readonly CommandPalette.IItem[]

layout

Returns null | Layout

Notes

Parameters

value: null | Layout

Returns void

parent

Returns null | Widget

Notes

Parameters

value: null | Widget

Returns void

searchNode

Notes

Returns HTMLDivElement

title

Notes

Returns Title<Widget>

Methods

Private _activateNextItem

Returns void

Private _activatePreviousItem

Returns void

Private _evtClick

Parameters

event: MouseEvent

Returns void

Private _evtKeyDown

Parameters

`Private` _activeIndex

`Private` _items

`Private` _results

`Readonly` commands

`Readonly` node

`Readonly` renderer

`Private` _activateNextItem

`Private` _activatePreviousItem

`Private` _evtClick

`Private` _evtKeyDown

`Private` _execute

`Private` _onGenericChange

`Private` _toggleFocused

`Protected` notifyLayout