@ckeditor/ckeditor5-ui 41.3.0-alpha.3 → 41.3.0

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -6,7 +6,7 @@
  * @module ui/editorui/accessibilityhelp/accessibilityhelp
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { ButtonView, Dialog } from '../../index.js';
+import { ButtonView, MenuBarMenuListItemButtonView, Dialog } from '../../index.js';
 import AccessibilityHelpContentView from './accessibilityhelpcontentview.js';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils';
 import accessibilityIcon from '../../../theme/icons/accessibility.svg';
@@ -46,17 +46,19 @@ export default class AccessibilityHelp extends Plugin {
     init() {
         const editor = this.editor;
         const t = editor.locale.t;
-        editor.ui.componentFactory.add('accessibilityHelp', locale => {
-            const buttonView = new ButtonView(locale);
-            buttonView.set({
-                label: t('Accessibility help'),
+        editor.ui.componentFactory.add('accessibilityHelp', () => {
+            const button = this._createButton(ButtonView);
+            button.set({
                 tooltip: true,
                 withText: false,
-                keystroke: 'Alt+0',
-                icon: accessibilityIcon
+                label: t('Accessibility help')
             });
-            buttonView.on('execute', () => this._showDialog());
-            return buttonView;
+            return button;
+        });
+        editor.ui.componentFactory.add('menuBar:accessibilityHelp', () => {
+            const button = this._createButton(MenuBarMenuListItemButtonView);
+            button.label = t('Accessibility');
+            return button;
         });
         editor.keystrokes.set('Alt+0', (evt, cancel) => {
             this._showDialog();
@@ -64,6 +66,20 @@ export default class AccessibilityHelp extends Plugin {
         });
         this._setupRootLabels();
     }
+    /**
+     * Creates a button to show accessibility help dialog, for use either in toolbar or in menu bar.
+     */
+    _createButton(ButtonClass) {
+        const editor = this.editor;
+        const locale = editor.locale;
+        const view = new ButtonClass(locale);
+        view.set({
+            keystroke: 'Alt+0',
+            icon: accessibilityIcon
+        });
+        view.on('execute', () => this._showDialog());
+        return view;
+    }
     /**
      * Injects a help text into each editing root's `aria-label` attribute allowing assistive technology users
      * to discover the availability of the Accessibility help dialog.

package/src/index.d.ts

@@ -5,7 +5,6 @@
 /**
  * @module ui
  */
-export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin, type ViewWithCssTransitionDisabler } from './bindings/csstransitiondisablermixin.js';
@@ -13,11 +12,12 @@ export { default as submitHandler } from './bindings/submithandler.js';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid.js';
 export { default as AccessibilityHelp } from './editorui/accessibilityhelp/accessibilityhelp.js';
 export { default as BodyCollection } from './editorui/bodycollection.js';
-export { type ButtonExecuteEvent } from './button/button.js';
+export { default as Button, type ButtonExecuteEvent } from './button/button.js';
 export type { default as ButtonLabel } from './button/buttonlabel.js';
 export { default as ButtonView } from './button/buttonview.js';
 export { default as ButtonLabelView } from './button/buttonlabelview.js';
 export { default as SwitchButtonView } from './button/switchbuttonview.js';
+export { default as FileDialogButtonView } from './button/filedialogbuttonview.js';
 export { default as CollapsibleView } from './collapsible/collapsibleview.js';
 export * from './colorgrid/utils.js';
 export { default as ColorGridView, type ColorDefinition } from './colorgrid/colorgridview.js';
@@ -50,6 +50,7 @@ export { type LabeledFieldViewCreator, default as LabeledFieldView } from './lab
 export * from './labeledfield/utils.js';
 export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
+export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
 export { default as Notification } from './notification/notification.js';
 export { default as ViewModel } from './model.js';
@@ -59,7 +60,7 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
 export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';
 export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview.js';
 export { default as SearchInfoView } from './search/searchinfoview.js';
-export type { default as FilteredView, FilteredViewExecuteEvent } from './search/filteredview.js';
+export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template, type TemplateDefinition } from './template.js';
@@ -70,5 +71,13 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar, type BalloonToolbarShowEvent } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
+export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
+export { default as MenuBarView, type MenuBarConfig } from './menubar/menubarview.js';
+export { default as MenuBarMenuView } from './menubar/menubarmenuview.js';
+export { default as MenuBarMenuListView } from './menubar/menubarmenulistview.js';
+export { default as MenuBarMenuListItemView } from './menubar/menubarmenulistitemview.js';
+export { default as MenuBarMenuListItemButtonView } from './menubar/menubarmenulistitembuttonview.js';
+export { default as MenuBarMenuListItemFileDialogButtonView } from './menubar/menubarmenulistitemfiledialogbuttonview.js';
+export { normalizeMenuBarConfig, DefaultMenuBarItems } from './menubar/utils.js';
 import './augmentation.js';

package/src/index.js

@@ -5,8 +5,6 @@
 /**
  * @module ui
  */
-// This import must be at the top to ensure that `globals.css` is imported first
-export { default as View } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin.js';
@@ -17,6 +15,7 @@ export { default as BodyCollection } from './editorui/bodycollection.js';
 export { default as ButtonView } from './button/buttonview.js';
 export { default as ButtonLabelView } from './button/buttonlabelview.js';
 export { default as SwitchButtonView } from './button/switchbuttonview.js';
+export { default as FileDialogButtonView } from './button/filedialogbuttonview.js';
 export { default as CollapsibleView } from './collapsible/collapsibleview.js';
 export * from './colorgrid/utils.js';
 export { default as ColorGridView } from './colorgrid/colorgridview.js';
@@ -48,6 +47,7 @@ export { default as LabeledFieldView } from './labeledfield/labeledfieldview.js'
 export * from './labeledfield/utils.js';
 export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
+export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
 export { default as Notification } from './notification/notification.js';
 export { default as ViewModel } from './model.js';
@@ -67,5 +67,13 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
+export { default as View } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
+export { default as MenuBarView } from './menubar/menubarview.js';
+export { default as MenuBarMenuView } from './menubar/menubarmenuview.js';
+export { default as MenuBarMenuListView } from './menubar/menubarmenulistview.js';
+export { default as MenuBarMenuListItemView } from './menubar/menubarmenulistitemview.js';
+export { default as MenuBarMenuListItemButtonView } from './menubar/menubarmenulistitembuttonview.js';
+export { default as MenuBarMenuListItemFileDialogButtonView } from './menubar/menubarmenulistitemfiledialogbuttonview.js';
+export { normalizeMenuBarConfig, DefaultMenuBarItems } from './menubar/utils.js';
 import './augmentation.js';

package/src/menubar/menubarmenubuttonview.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenubuttonview
+ */
+import IconView from '../icon/iconview.js';
+import ButtonView from '../button/buttonview.js';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/menubar/menubarmenubutton.css';
+/**
+ * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
+ * open both top-level bar menus as well as sub-menus.
+ */
+export default class MenuBarMenuButtonView extends ButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    readonly arrowView: IconView;
+    /**
+     * Creates an instance of the menu bar button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Creates the {@link #arrowView} instance.
+     */
+    private _createArrowView;
+}

package/src/menubar/menubarmenubuttonview.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenubuttonview
+ */
+import IconView from '../icon/iconview.js';
+import ButtonView from '../button/buttonview.js';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
+import '../../theme/components/menubar/menubarmenubutton.css';
+/**
+ * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
+ * open both top-level bar menus as well as sub-menus.
+ */
+export default class MenuBarMenuButtonView extends ButtonView {
+    /**
+     * Creates an instance of the menu bar button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set({
+            withText: true,
+            role: 'menuitem'
+        });
+        this.arrowView = this._createArrowView();
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-menu-bar__menu__button'
+                ],
+                'aria-haspopup': true,
+                'aria-expanded': this.bindTemplate.to('isOn', value => String(value)),
+                'data-cke-tooltip-disabled': bind.to('isOn')
+            },
+            on: {
+                'mouseenter': bind.to('mouseenter')
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.arrowView);
+    }
+    /**
+     * Creates the {@link #arrowView} instance.
+     */
+    _createArrowView() {
+        const arrowView = new IconView();
+        arrowView.content = dropdownArrowIcon;
+        arrowView.extendTemplate({
+            attributes: {
+                class: 'ck-menu-bar__menu__button__arrow'
+            }
+        });
+        return arrowView;
+    }
+}

package/src/menubar/menubarmenulistitembuttonview.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenulistitembuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import ButtonView from '../button/buttonview.js';
+import '../../theme/components/menubar/menubarmenulistitembutton.css';
+/**
+ * A menu bar list button view. Buttons like this one execute user actions.
+ */
+export default class MenuBarMenuListItemButtonView extends ButtonView {
+    /**
+     * Creates an instance of the menu bar list button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+}

package/src/menubar/menubarmenulistitembuttonview.js

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ButtonView from '../button/buttonview.js';
+import '../../theme/components/menubar/menubarmenulistitembutton.css';
+/**
+ * A menu bar list button view. Buttons like this one execute user actions.
+ */
+export default class MenuBarMenuListItemButtonView extends ButtonView {
+    /**
+     * Creates an instance of the menu bar list button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.set({
+            withText: true,
+            withKeystroke: true,
+            tooltip: false,
+            role: 'menuitem'
+        });
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-menu-bar__menu__item__button']
+            }
+        });
+    }
+}

package/src/menubar/menubarmenulistitemfiledialogbuttonview.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenulistitemfiledialogbuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import FileDialogButtonView from '../button/filedialogbuttonview.js';
+import '../../theme/components/menubar/menubarmenulistitembutton.css';
+/**
+ * A menu bar list file dialog button view. Buttons like this one execute user actions.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ */
+export default class MenuBarMenuListItemFileDialogButtonView extends FileDialogButtonView {
+    /**
+     * Creates an instance of the menu bar list button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+}

package/src/menubar/menubarmenulistitemfiledialogbuttonview.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import FileDialogButtonView from '../button/filedialogbuttonview.js';
+import '../../theme/components/menubar/menubarmenulistitembutton.css';
+/**
+ * A menu bar list file dialog button view. Buttons like this one execute user actions.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ */
+export default class MenuBarMenuListItemFileDialogButtonView extends FileDialogButtonView {
+    /**
+     * Creates an instance of the menu bar list button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.set({
+            withText: true,
+            withKeystroke: true,
+            tooltip: false,
+            role: 'menuitem'
+        });
+        this.extendTemplate({
+            attributes: {
+                class: ['ck-menu-bar__menu__item__button']
+            }
+        });
+    }
+}

package/src/menubar/menubarmenulistitemview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenulistitemview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import ListItemView from '../list/listitemview.js';
+import type MenuBarMenuView from './menubarmenuview.js';
+import '../../theme/components/menubar/menubarmenulistitem.css';
+/**
+ * A menu bar list item view, a child of {@link module:ui/menubar/menubarmenulistview~MenuBarMenuListView}.
+ *
+ * Populate this item with a {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} instance
+ * or a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance to create a sub-menu.
+ */
+export default class MenuBarMenuListItemView extends ListItemView {
+    /**
+     * Creates an instance of the list item view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale, parentMenuView: MenuBarMenuView);
+}

package/src/menubar/menubarmenulistitemview.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ListItemView from '../list/listitemview.js';
+import '../../theme/components/menubar/menubarmenulistitem.css';
+/**
+ * A menu bar list item view, a child of {@link module:ui/menubar/menubarmenulistview~MenuBarMenuListView}.
+ *
+ * Populate this item with a {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} instance
+ * or a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance to create a sub-menu.
+ */
+export default class MenuBarMenuListItemView extends ListItemView {
+    /**
+     * Creates an instance of the list item view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale, parentMenuView) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-menu-bar__menu__item'
+                ]
+            },
+            on: {
+                'mouseenter': bind.to('mouseenter')
+            }
+        });
+        this.delegate('mouseenter').to(parentMenuView);
+    }
+}

package/src/menubar/menubarmenulistview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenulistview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import ListView from '../list/listview.js';
+/**
+ * A list of menu bar items, a child of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView}.
+ *
+ * Use this class to create a list of items (options, buttons) to be displayed in a menu bar.
+ *
+ * To populate this list, use {@link module:ui/menubar/menubarmenulistitemview~MenuBarMenuListItemView} instances.
+ */
+export default class MenuBarMenuListView extends ListView {
+    /**
+     * Creates an instance of the list view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+}

package/src/menubar/menubarmenulistview.js

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ListView from '../list/listview.js';
+/**
+ * A list of menu bar items, a child of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView}.
+ *
+ * Use this class to create a list of items (options, buttons) to be displayed in a menu bar.
+ *
+ * To populate this list, use {@link module:ui/menubar/menubarmenulistitemview~MenuBarMenuListItemView} instances.
+ */
+export default class MenuBarMenuListView extends ListView {
+    /**
+     * Creates an instance of the list view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        this.role = 'menu';
+    }
+}

package/src/menubar/menubarmenupanelview.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/menubar/menubarmenupanelview
+ */
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import type { FocusableView } from '../focuscycler.js';
+import type ViewCollection from '../viewcollection.js';
+import View from '../view.js';
+import '../../theme/components/menubar/menubarmenupanel.css';
+/**
+ * A view representing a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView} of a menu.
+ */
+export default class MenuBarMenuPanelView extends View implements FocusableView {
+    /**
+     * Collection of the child views in this panel.
+     */
+    readonly children: ViewCollection<FocusableView>;
+    /**
+     * Controls whether the panel is visible.
+     *
+     * @observable
+     */
+    isVisible: boolean;
+    /**
+     * The name of the position of the panel, relative to the parent.
+     *
+     * This property is reflected in the CSS class suffix set to {@link #element} that controls
+     * the position of the panel.
+     *
+     * @observable
+     * @default 'se'
+     */
+    position: MenuBarMenuPanelPosition;
+    /**
+     * Creates an instance of the menu panel view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale?: Locale);
+    /**
+     * Focuses the first child of the panel (default) or the last one if the `direction` is `-1`.
+     */
+    focus(direction?: -1 | 1): void;
+}
+/**
+ * The names of the positions of the {@link module:ui/menubar/menubarmenupanelview~MenuBarMenuPanelView}.
+ *
+ * They are reflected as CSS class suffixes on the panel view element.
+ */
+export type MenuBarMenuPanelPosition = 'se' | 'sw' | 'ne' | 'nw' | 'w' | 'e';

package/src/menubar/menubarmenupanelview.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import View from '../view.js';
+import '../../theme/components/menubar/menubarmenupanel.css';
+/**
+ * A view representing a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView} of a menu.
+ */
+export default class MenuBarMenuPanelView extends View {
+    /**
+     * Creates an instance of the menu panel view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isVisible', false);
+        this.set('position', 'se');
+        this.children = this.createCollection();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-reset',
+                    'ck-menu-bar__menu__panel',
+                    bind.to('position', value => `ck-menu-bar__menu__panel_position_${value}`),
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ],
+                tabindex: '-1'
+            },
+            children: this.children,
+            on: {
+                // Drag and drop in the panel should not break the selection in the editor.
+                // https://github.com/ckeditor/ckeditor5-ui/issues/228
+                selectstart: bind.to(evt => {
+                    if (evt.target.tagName.toLocaleLowerCase() === 'input') {
+                        return;
+                    }
+                    evt.preventDefault();
+                })
+            }
+        });
+    }
+    /**
+     * Focuses the first child of the panel (default) or the last one if the `direction` is `-1`.
+     */
+    focus(direction = 1) {
+        if (this.children.length) {
+            if (direction === 1) {
+                this.children.first.focus();
+            }
+            else {
+                this.children.last.focus();
+            }
+        }
+    }
+}