@jupyterlab/shortcuts-extension 5.4.0-alpha.3 → 5.4.0-alpha.5

package/lib/components/NewShortcutItem.d.ts

@@ -0,0 +1,44 @@
+import type { ISignal } from '@lumino/signaling';
+import type { ICustomOptions, IKeybinding, IShortcutRegistry, IShortcutTarget, IShortcutUI } from '../types';
+import type { IShortcutItemProps } from './ShortcutItem';
+/** Props for ShortcutItem component */
+export interface INewShortcutItemProps {
+    findConflictsFor: IShortcutRegistry['findConflictsFor'];
+    showSelectors: boolean;
+    external: IShortcutUI.IExternalBundle;
+}
+export declare class NewShortcutItem implements IShortcutItemProps {
+    constructor(options: INewShortcutItemProps);
+    showSelectors: boolean;
+    external: IShortcutUI.IExternalBundle;
+    get shortcut(): IShortcutTarget;
+    get changed(): ISignal<NewShortcutItem, void>;
+    /**
+     * Reset the shortcut.
+     */
+    reset: () => void;
+    /**
+     * Add a new keybinding.
+     */
+    addKeybinding: (target: IShortcutTarget, keys: string[]) => Promise<void>;
+    /**
+     * Replace the given keybinding with a new keybinding as defined by given keys.
+     */
+    replaceKeybinding: (target: IShortcutTarget, keybinding: IKeybinding, keys: string[]) => Promise<void>;
+    /**
+     * Delete a single keybinding for given shortcut target.
+     */
+    deleteKeybinding: (target: IShortcutTarget, keybinding: IKeybinding) => Promise<void>;
+    /**
+     * Reset keybindings for given target to defaults.
+     */
+    resetKeybindings: (target: IShortcutTarget) => Promise<void>;
+    /**
+     * Update the selector and args for a user defined shortcut.
+     */
+    setCustomOptions: (target: IShortcutTarget, options: ICustomOptions) => Promise<boolean>;
+    updateCommand: (command: string, category: string) => void;
+    private _shortcut;
+    findConflictsFor: (keys: string[], selector: string) => IShortcutTarget[];
+    private _changed;
+}

package/lib/components/NewShortcutItem.js

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Signal } from '@lumino/signaling';
+export class NewShortcutItem {
+    constructor(options) {
+        /**
+         * Reset the shortcut.
+         */
+        this.reset = () => {
+            this._shortcut = {
+                id: 'new shortcut',
+                command: '',
+                keybindings: [],
+                selector: 'body',
+                category: '',
+                args: {}
+            };
+            this._changed.emit();
+        };
+        /**
+         * Add a new keybinding.
+         */
+        this.addKeybinding = async (target, keys) => {
+            this._shortcut.keybindings.push({ keys, isDefault: false });
+            this._changed.emit();
+        };
+        /**
+         * Replace the given keybinding with a new keybinding as defined by given keys.
+         */
+        this.replaceKeybinding = async (target, keybinding, keys) => {
+            //Remove empty keys and delete keybindings if there is no new key.
+            keys = keys.filter(key => key !== '');
+            if (!keys.length) {
+                return this.deleteKeybinding(target, keybinding);
+            }
+            const index = this._shortcut.keybindings.findIndex(binding => binding.keys === keybinding.keys);
+            if (index > -1) {
+                this._shortcut.keybindings[index] = { keys, isDefault: false };
+            }
+            else {
+                void this.addKeybinding(target, keys);
+            }
+            this._changed.emit();
+        };
+        /**
+         * Delete a single keybinding for given shortcut target.
+         */
+        this.deleteKeybinding = async (target, keybinding) => {
+            const index = this._shortcut.keybindings.findIndex(binding => binding.keys === keybinding.keys);
+            if (index > -1) {
+                this._shortcut.keybindings.splice(index, 1);
+                this._changed.emit();
+            }
+        };
+        /**
+         * Reset keybindings for given target to defaults.
+         */
+        this.resetKeybindings = async (target) => {
+            this._shortcut = {
+                ...this._shortcut,
+                keybindings: []
+            };
+            this._changed.emit();
+        };
+        /**
+         * Update the selector and args for a user defined shortcut.
+         */
+        this.setCustomOptions = async (target, options) => {
+            this._shortcut = {
+                ...this._shortcut,
+                selector: options.selector,
+                args: options.args
+            };
+            this._changed.emit();
+            return true;
+        };
+        this.updateCommand = (command, category) => {
+            this._shortcut = {
+                ...this._shortcut,
+                command,
+                category
+            };
+            this._changed.emit();
+        };
+        this._changed = new Signal(this);
+        this._shortcut = {
+            id: 'new shortcut',
+            command: '',
+            keybindings: [],
+            selector: 'body',
+            category: '',
+            args: {}
+        };
+        this.findConflictsFor = options.findConflictsFor;
+        this.showSelectors = options.showSelectors;
+        this.external = options.external;
+    }
+    get shortcut() {
+        return this._shortcut;
+    }
+    get changed() {
+        return this._changed;
+    }
+}
+//# sourceMappingURL=NewShortcutItem.js.map

package/lib/components/NewShortcutItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewShortcutItem.js","sourceRoot":"","sources":["../../src/components/NewShortcutItem.tsx"],"names":[],"mappings":"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"}

package/lib/components/ShortcutCustomOptions.d.ts

@@ -0,0 +1,20 @@
+import { Dialog } from '@jupyterlab/apputils';
+import { CodeEditor } from '@jupyterlab/codeeditor';
+import type { ITranslator } from '@jupyterlab/translation';
+import type { ICustomOptions, IShortcutTarget } from '../types';
+export declare class CustomOptionsDialog extends Dialog<ICustomOptions> {
+    constructor(options: {
+        shortcut: IShortcutTarget;
+        editorFactory: CodeEditor.Factory;
+        translator: ITranslator;
+        readOnly: boolean;
+    });
+    /**
+     * Overwrite the keyboard event to prevent the dialog from submitting when
+     * pressing Enter in the JSON editor.
+     *
+     * For all other keys (and Enter outside the JSON editor), delegate to the
+     * base dialog handler to preserve standard keyboard behavior.
+     */
+    protected _evtKeydown(event: KeyboardEvent): void;
+}

package/lib/components/ShortcutCustomOptions.js

@@ -0,0 +1,173 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Dialog } from '@jupyterlab/apputils';
+import { CodeEditor } from '@jupyterlab/codeeditor';
+import { Widget } from '@lumino/widgets';
+export class CustomOptionsDialog extends Dialog {
+    constructor(options) {
+        const { shortcut, translator, editorFactory } = options;
+        const trans = translator.load('jupyterlab');
+        const body = new CustomOptionsDialogBody(shortcut, translator, editorFactory, () => this._checkValidation(), options.readOnly);
+        const buttons = [];
+        if (options.readOnly) {
+            buttons.push(Dialog.cancelButton({ label: trans.__('OK') }));
+        }
+        else {
+            buttons.push(Dialog.cancelButton({ label: trans.__('Cancel') }));
+            buttons.push(Dialog.okButton({ label: trans.__('Apply') }));
+        }
+        super({
+            title: options.readOnly
+                ? trans.__('Shortcut Options')
+                : trans.__('Custom Shortcut Options'),
+            body,
+            buttons
+        });
+    }
+    /**
+     * Overwrite the keyboard event to prevent the dialog from submitting when
+     * pressing Enter in the JSON editor.
+     *
+     * For all other keys (and Enter outside the JSON editor), delegate to the
+     * base dialog handler to preserve standard keyboard behavior.
+     */
+    _evtKeydown(event) {
+        if (event.key === 'Enter') {
+            // If focus is inside the JSON editor, prevent the dialog from treating
+            // Enter as a submit/activate-default-button key.
+            const jsonEditorNode = this.node.querySelector('.jp-JSONEditor');
+            const activeElement = document.activeElement;
+            if (jsonEditorNode instanceof HTMLElement &&
+                activeElement instanceof HTMLElement &&
+                jsonEditorNode.contains(activeElement)) {
+                event.stopPropagation();
+                return;
+            }
+        }
+        // Fallback to the default dialog behavior.
+        super._evtKeydown(event);
+    }
+}
+/**
+ * Body widget for the custom options dialog.
+ */
+class CustomOptionsDialogBody extends Widget {
+    constructor(shortcut, translator, editorFactory, checkValidation, readOnly) {
+        var _a, _b;
+        super();
+        const trans = translator.load('jupyterlab');
+        this.addClass('jp-Shortcuts-CustomOptionsDialogBody');
+        // Create main container
+        const container = document.createElement('div');
+        container.className = 'jp-Shortcuts-CustomOptionDialog-container';
+        // Selector section
+        const selectorLabel = document.createElement('label');
+        selectorLabel.textContent = trans.__('Selector:');
+        selectorLabel.className = 'jp-Dialog-label';
+        this._selectorInput = document.createElement('input');
+        this._selectorInput.type = 'text';
+        this._selectorInput.disabled = readOnly !== null && readOnly !== void 0 ? readOnly : false;
+        this._selectorInput.value = shortcut.selector;
+        this._selectorInput.className = 'jp-mod-styled';
+        container.appendChild(selectorLabel);
+        container.appendChild(this._selectorInput);
+        // Args section
+        const argsLabel = document.createElement('label');
+        argsLabel.textContent = trans.__('Arguments:');
+        argsLabel.className = 'jp-Dialog-label';
+        container.appendChild(argsLabel);
+        if (readOnly) {
+            const argsPre = document.createElement('pre');
+            argsPre.textContent = JSON.stringify((_a = shortcut.args) !== null && _a !== void 0 ? _a : {}, undefined, 2);
+            container.appendChild(argsPre);
+        }
+        else {
+            // Create dedicated JSON editor widget
+            this._editorWidget = new JSONEditorWidget((_b = shortcut.args) !== null && _b !== void 0 ? _b : {}, editorFactory, checkValidation);
+            container.appendChild(this._editorWidget.node);
+        }
+        this.node.appendChild(container);
+    }
+    /**
+     * Get the value from the dialog body.
+     */
+    getValue() {
+        var _a, _b;
+        const argsText = (_b = (_a = this._editorWidget) === null || _a === void 0 ? void 0 : _a.getJSON()) !== null && _b !== void 0 ? _b : '{}';
+        let args;
+        try {
+            args = JSON.parse(argsText);
+        }
+        catch (error) {
+            console.error(`Invalid JSON in arguments: ${error instanceof Error ? error.message : String(error)}`);
+            args = {};
+        }
+        return {
+            selector: this._selectorInput.value,
+            args
+        };
+    }
+    /**
+     * Dispose resources.
+     */
+    dispose() {
+        var _a;
+        (_a = this._editorWidget) === null || _a === void 0 ? void 0 : _a.dispose();
+        super.dispose();
+    }
+}
+/**
+ * A dedicated widget for JSON editing with validation.
+ */
+class JSONEditorWidget extends Widget {
+    constructor(initialArgs, editorFactory, checkValidation) {
+        super();
+        /**
+         * Validate the JSON sources.
+         */
+        this._validateJSON = () => {
+            try {
+                const text = this._editor.model.sharedModel.getSource();
+                JSON.parse(text);
+                this.node.classList.remove('jp-mod-error');
+            }
+            catch (error) {
+                this.node.classList.add('jp-mod-error');
+            }
+            this._checkValidation();
+        };
+        this.addClass('jp-JSONEditor');
+        this._checkValidation = checkValidation;
+        const editorHostNode = document.createElement('div');
+        editorHostNode.className = 'jp-JSONEditor-host';
+        const model = new CodeEditor.Model({ mimeType: 'application/json' });
+        const content = JSON.stringify(initialArgs, null, 2);
+        model.sharedModel.setSource(content);
+        this._editor = editorFactory({
+            host: editorHostNode,
+            model,
+            config: {
+                readOnly: false
+            }
+        });
+        this.node.appendChild(editorHostNode);
+        this._editor.model.sharedModel.changed.connect(this._validateJSON, this);
+    }
+    /**
+     * Get the current JSON text.
+     */
+    getJSON() {
+        return this._editor.model.sharedModel.getSource();
+    }
+    /**
+     * Dispose of the resources.
+     */
+    dispose() {
+        this._editor.model.sharedModel.changed.disconnect(this._validateJSON, this);
+        this._editor.dispose();
+        super.dispose();
+    }
+}
+//# sourceMappingURL=ShortcutCustomOptions.js.map

package/lib/components/ShortcutCustomOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutCustomOptions.js","sourceRoot":"","sources":["../../src/components/ShortcutCustomOptions.tsx"],"names":[],"mappings":"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"}

package/lib/components/ShortcutItem.d.ts

@@ -9,8 +9,14 @@ export interface IShortcutItemProps {
     resetKeybindings: IShortcutUI['resetKeybindings'];
     deleteKeybinding: IShortcutUI['deleteKeybinding'];
     findConflictsFor: IShortcutRegistry['findConflictsFor'];
+    setCustomOptions: IShortcutUI['setCustomOptions'];
     showSelectors: boolean;
     external: IShortcutUI.IExternalBundle;
+    newShortcutUtils?: {
+        searchQuery: string;
+        updateCommand: (command: string, category: string) => void;
+        saveShortcut: () => Promise<void>;
+    };
 }
 /** State for ShortcutItem component */
 export interface IShortcutItemState {
@@ -26,7 +32,7 @@ export declare class ShortcutItem extends React.Component<IShortcutItemProps, IS
     private _onActionRequested;
     /** Toggle display state of input box */
     private toggleInputNew;
-    /** Transform special key names into unicode characters */
+    /** Transform special key names into unicode characters for Mac */
     toSymbols: (value: string) => string;
     getCategoryCell(): JSX.Element;
     getLabelCell(): JSX.Element;
@@ -36,7 +42,7 @@ export declare class ShortcutItem extends React.Component<IShortcutItemProps, IS
     getClassNameForShortCuts(nonEmptyBindings: IKeybinding[]): string;
     toggleInputReplaceMethod(location: number): void;
     getDisplayReplaceInput(location: number): boolean;
-    getOrDiplayIfNeeded(force: boolean): JSX.Element;
+    getOrDisplayIfNeeded(force: boolean): JSX.Element;
     getShortCutAsInput(binding: IKeybinding, location: number): JSX.Element;
     getShortCutForDisplayOnly(binding: IKeybinding): JSX.Element[];
     isLocationBeingEdited(location: number): boolean;
@@ -53,6 +59,7 @@ export declare class ShortcutItem extends React.Component<IShortcutItemProps, IS
      * Create a unique conflict identifier.
      */
     private _conflictId;
+    private _getFilteredCommands;
     private get _nonEmptyBindings();
     render(): JSX.Element;
     private _trans;

package/lib/components/ShortcutItem.js

@@ -2,9 +2,19 @@
  * Copyright (c) Jupyter Development Team.
  * Distributed under the terms of the Modified BSD License.
  */
+import { Button } from '@jupyter/react-components';
+import { checkIcon, editIcon, HTMLSelect, infoIcon } from '@jupyterlab/ui-components';
 import { Platform } from '@lumino/domutils';
 import * as React from 'react';
+import { CustomOptionsDialog } from './ShortcutCustomOptions';
 import { CONFLICT_CONTAINER_CLASS, ShortcutInput } from './ShortcutInput';
+import { ShortcutRegistry } from '../registry';
+const MAC_SYMBOLS = {
+    Ctrl: '⌃',
+    Alt: '⌥',
+    Shift: '⇧',
+    Accel: '⌘'
+};
 /** React component for each command shortcut item */
 export class ShortcutItem extends React.Component {
     constructor(props) {
@@ -17,28 +27,18 @@ export class ShortcutItem extends React.Component {
                 conflicts: new Map()
             });
         };
-        /** Transform special key names into unicode characters */
+        /** Transform special key names into unicode characters for Mac */
         this.toSymbols = (value) => {
-            return value.split(' ').reduce((result, key) => {
-                if (key === 'Ctrl') {
-                    return (result + ' ⌃').trim();
-                }
-                else if (key === 'Alt') {
-                    return (result + ' ⌥').trim();
-                }
-                else if (key === 'Shift') {
-                    return (result + ' ⇧').trim();
-                }
-                else if (key === 'Accel' && Platform.IS_MAC) {
-                    return (result + ' ⌘').trim();
-                }
-                else if (key === 'Accel') {
-                    return (result + ' ⌃').trim();
-                }
-                else {
-                    return (result + ' ' + key).trim();
-                }
-            }, '');
+            if (!Platform.IS_MAC) {
+                return value
+                    .split(' ')
+                    .map(key => (key === 'Accel' ? 'Ctrl' : key))
+                    .join(' ');
+            }
+            return value
+                .split(' ')
+                .map(key => { var _a; return (_a = MAC_SYMBOLS[key]) !== null && _a !== void 0 ? _a : key; })
+                .join(' ');
         };
         this._trans = this.props.external.translator.load('jupyterlab');
         this.state = {
@@ -75,17 +75,62 @@ export class ShortcutItem extends React.Component {
     }
     getLabelCell() {
         var _a;
-        return (React.createElement("div", { className: "jp-Shortcuts-Cell" },
-            React.createElement("div", { className: "jp-label" }, (_a = this.props.shortcut.label) !== null && _a !== void 0 ? _a : this._trans.__('(Command label missing)'))));
+        if (this.props.newShortcutUtils) {
+            const filteredShortcuts = this._getFilteredCommands();
+            return (React.createElement("div", { className: "jp-Shortcuts-Cell" },
+                React.createElement(HTMLSelect, { value: this.props.shortcut.command, options: [
+                        { value: '', label: this._trans.__('Select a command') },
+                        ...filteredShortcuts.map(shortcut => ({
+                            value: shortcut.command,
+                            label: `${shortcut.category}: ${shortcut.label}`
+                        }))
+                    ], onChange: e => {
+                        var _a, _b, _c;
+                        const shortcut = filteredShortcuts.find(shortcut => shortcut.command === e.target.value);
+                        (_a = this.props.newShortcutUtils) === null || _a === void 0 ? void 0 : _a.updateCommand((_b = shortcut === null || shortcut === void 0 ? void 0 : shortcut.command) !== null && _b !== void 0 ? _b : '', (_c = shortcut === null || shortcut === void 0 ? void 0 : shortcut.category) !== null && _c !== void 0 ? _c : '');
+                    } })));
+        }
+        else {
+            return (React.createElement("div", { className: "jp-Shortcuts-Cell" },
+                React.createElement("div", { className: "jp-label" }, (_a = this.props.shortcut.label) !== null && _a !== void 0 ? _a : this._trans.__('(Command label missing)'))));
+        }
     }
     getResetShortCutLink() {
-        return (React.createElement("a", { className: "jp-Shortcuts-Reset", onClick: () => this.props.resetKeybindings(this.props.shortcut) }, this._trans.__('Reset')));
+        return (React.createElement("a", { className: "jp-Shortcuts-Reset", onClick: () => this.props.resetKeybindings(this.props.shortcut) }, this.props.shortcut.userDefined
+            ? this._trans.__('Delete')
+            : this._trans.__('Reset')));
     }
     getSourceCell() {
+        var _a;
         const allDefault = this.props.shortcut.keybindings.every(binding => binding.isDefault);
+        const editable = this.props.shortcut.userDefined || !!this.props.newShortcutUtils;
+        const showOptionsButtonTitle = editable
+            ? this._trans.__('Custom options')
+            : this._trans.__('Show options');
         return (React.createElement("div", { className: "jp-Shortcuts-Cell" },
-            React.createElement("div", { className: "jp-Shortcuts-SourceCell" }, allDefault ? this._trans.__('Default') : this._trans.__('Custom')),
-            !allDefault ? this.getResetShortCutLink() : ''));
+            !this.props.newShortcutUtils && (React.createElement("div", { className: "jp-Shortcuts-SourceCell" }, allDefault ? this._trans.__('Default') : this._trans.__('Custom'))),
+            !allDefault ? this.getResetShortCutLink() : '',
+            this.props.external.editorFactory && (React.createElement(Button, { className: "jp-mod-styled jp-mod-reject jp-Shortcuts-CustomOptions", onClick: async () => {
+                    if (!this.props.external.editorFactory) {
+                        console.error('Cannot build the custom options form');
+                        return;
+                    }
+                    const dialog = new CustomOptionsDialog({
+                        shortcut: this.props.shortcut,
+                        translator: this.props.external.translator,
+                        editorFactory: this.props.external.editorFactory,
+                        readOnly: !editable
+                    });
+                    const result = await dialog.launch();
+                    if (result.button.accept && editable && result.value) {
+                        await this.props.setCustomOptions(this.props.shortcut, result.value);
+                    }
+                }, title: showOptionsButtonTitle, "aria-label": showOptionsButtonTitle, appearance: 'neutral' }, editable ? (React.createElement(editIcon.react, { tag: null })) : (React.createElement(infoIcon.react, { tag: null })))),
+            !!this.props.newShortcutUtils && (React.createElement(React.Fragment, null,
+                React.createElement(Button, { className: "jp-mod-styled jp-mod-accept jp-Shortcuts-SaveNew", onClick: (_a = this.props.newShortcutUtils) === null || _a === void 0 ? void 0 : _a.saveShortcut, title: this._trans.__('Save shortcut'), "aria-label": this._trans.__('Save shortcut'), appearance: "neutral", disabled: !this.props.shortcut.command ||
+                        !this.props.shortcut.keybindings.length ||
+                        this.props.shortcut.keybindings.every(binding => !binding.keys || binding.keys.length === 0) },
+                    React.createElement(checkIcon.react, { tag: null }))))));
     }
     getOptionalSelectorCell() {
         return this.props.showSelectors ? (React.createElement("div", { className: "jp-Shortcuts-Cell" },
@@ -117,7 +162,7 @@ export class ShortcutItem extends React.Component {
     getDisplayReplaceInput(location) {
         return this.state.displayReplaceInput[location];
     }
-    getOrDiplayIfNeeded(force) {
+    getOrDisplayIfNeeded(force) {
         const classes = ['jp-Shortcuts-Or'];
         if (force || this.state.displayNewInput) {
             classes.push('jp-Shortcuts-Or-Forced');
@@ -133,7 +178,11 @@ export class ShortcutItem extends React.Component {
     }
     getShortCutForDisplayOnly(binding) {
         return binding.keys.map((keyboardKey, index) => (React.createElement("div", { className: "jp-Shortcuts-ShortcutKeysContainer", key: index },
-            React.createElement("div", { className: "jp-Shortcuts-ShortcutKeys" }, this.toSymbols(keyboardKey)),
+            React.createElement("div", { className: "jp-Shortcuts-ShortcutKeys" }, this.toSymbols(keyboardKey)
+                .split(' ')
+                .map((keyPart, keyPartIndex, keyParts) => (React.createElement(React.Fragment, { key: `${index}-${keyPart}-${keyPartIndex}` },
+                React.createElement("span", { className: "jp-ContextualShortcut-Key" }, keyPart),
+                keyPartIndex + 1 < keyParts.length ? ' + ' : null)))),
             index + 1 < binding.keys.length ? (React.createElement("div", { className: "jp-Shortcuts-Comma" }, ",")) : null)));
     }
     isLocationBeingEdited(location) {
@@ -146,7 +195,7 @@ export class ShortcutItem extends React.Component {
                 : this.getShortCutForDisplayOnly(binding),
             !(index === this._nonEmptyBindings.length - 1 &&
                 Object.values(this.state.displayReplaceInput).some(Boolean)) &&
-                this.getOrDiplayIfNeeded(index < this._nonEmptyBindings.length - 1)));
+                this.getOrDisplayIfNeeded(index < this._nonEmptyBindings.length - 1)));
     }
     getAddLink() {
         return (React.createElement("a", { className: !this.state.displayNewInput ? 'jp-Shortcuts-Plus' : '', onClick: () => {
@@ -220,12 +269,37 @@ export class ShortcutItem extends React.Component {
             '_' +
             conflict.conflictsWith.map(target => target.id).join(''));
     }
+    _getFilteredCommands() {
+        var _a, _b;
+        const registry = new ShortcutRegistry({
+            commandRegistry: this.props.external.commandRegistry,
+            allCommands: true
+        });
+        const filteredShortcuts = ShortcutRegistry.matchItems(registry, (_b = (_a = this.props.newShortcutUtils) === null || _a === void 0 ? void 0 : _a.searchQuery) !== null && _b !== void 0 ? _b : '')
+            .map((item) => item.item)
+            .filter(target => !target.command.startsWith('__internal:'));
+        filteredShortcuts.sort((a, b) => {
+            var _a, _b;
+            const compareA = a.category;
+            const compareB = b.category;
+            const compareResult = compareA.localeCompare(compareB);
+            if (compareResult) {
+                return compareResult;
+            }
+            else {
+                const aLabel = (_a = a['label']) !== null && _a !== void 0 ? _a : '';
+                const bLabel = (_b = b['label']) !== null && _b !== void 0 ? _b : '';
+                return aLabel.localeCompare(bLabel);
+            }
+        });
+        return filteredShortcuts;
+    }
     get _nonEmptyBindings() {
         return this.props.shortcut.keybindings.filter(binding => binding.keys.filter(k => k != '').length !== 0);
     }
     render() {
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "jp-Shortcuts-Row", "data-shortcut": this.props.shortcut.id },
+            React.createElement("div", { className: `jp-Shortcuts-Row${this.props.newShortcutUtils ? ' jp-Shortcuts-Row-newShortcut' : ''}`, "data-shortcut": this.props.shortcut.id },
                 this.getCategoryCell(),
                 this.getLabelCell(),
                 this.getShortCutsCell(this._nonEmptyBindings),