@ckeditor/ckeditor5-ui 39.0.2 → 40.1.0

package/src/panel/sticky/stickypanelview.js

@@ -7,8 +7,11 @@
  */
 import View from '../../view';
 import Template from '../../template';
-import { getElementsIntersectionRect, getScrollableAncestors, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
-// @if CK_DEBUG_STICKYPANEL // const RectDrawer = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' ).default
+import { global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
+// @if CK_DEBUG_STICKYPANEL // const {
+// @if CK_DEBUG_STICKYPANEL // 	default: RectDrawer,
+// @if CK_DEBUG_STICKYPANEL // 	diagonalStylesBlack
+// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
 import '../../../theme/components/panel/stickypanel.css';
 const toPx = toUnit('px');
 /**
@@ -89,8 +92,8 @@ export default class StickyPanelView extends View {
         // Check if the panel should go into the sticky state immediately.
         this.checkIfShouldBeSticky();
         // Update sticky state of the panel as the window and ancestors are being scrolled.
-        this.listenTo(global.document, 'scroll', (evt, data) => {
-            this.checkIfShouldBeSticky(data.target);
+        this.listenTo(global.document, 'scroll', () => {
+            this.checkIfShouldBeSticky();
         }, { useCapture: true });
         // Synchronize with `model.isActive` because sticking an inactive panel is pointless.
         this.listenTo(this, 'change:isActive', () => {
@@ -100,23 +103,23 @@ export default class StickyPanelView extends View {
     /**
      * Analyzes the environment to decide whether the panel should be sticky or not.
      * Then handles the positioning of the panel.
-     *
-     * @param [scrollTarget] The element which is being scrolled.
      */
-    checkIfShouldBeSticky(scrollTarget) {
+    checkIfShouldBeSticky() {
         // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
         if (!this.limiterElement || !this.isActive) {
             this._unstick();
             return;
         }
-        const scrollableAncestors = getScrollableAncestors(this.limiterElement);
-        if (scrollTarget && !scrollableAncestors.includes(scrollTarget)) {
-            return;
-        }
-        const visibleAncestorsRect = getElementsIntersectionRect(scrollableAncestors, this.viewportTopOffset);
         const limiterRect = new Rect(this.limiterElement);
-        // @if CK_DEBUG_STICKYPANEL // if ( visibleAncestorsRect ) {
-        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleAncestorsRect,
+        let visibleLimiterRect = limiterRect.getVisible();
+        if (visibleLimiterRect) {
+            const windowRect = new Rect(global.window);
+            windowRect.top += this.viewportTopOffset;
+            windowRect.height -= this.viewportTopOffset;
+            visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
+        }
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
         // @if CK_DEBUG_STICKYPANEL // 		{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
         // @if CK_DEBUG_STICKYPANEL // 		'Visible anc'
         // @if CK_DEBUG_STICKYPANEL // 	);
@@ -129,48 +132,40 @@ export default class StickyPanelView extends View {
         // Stick the panel only if
         // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
         // * and the limiter's top edge is above the visible ancestors' top edge.
-        if (visibleAncestorsRect && limiterRect.top < visibleAncestorsRect.top) {
-            const visibleLimiterRect = limiterRect.getIntersection(visibleAncestorsRect);
-            // Sticky the panel only if the limiter's visible rect is at least partially visible in the
-            // visible ancestors' rects intersection.
-            if (visibleLimiterRect) {
-                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
-                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
-                // @if CK_DEBUG_STICKYPANEL // 		backgroundColor: 'rgba(255, 0, 255, .3)' },
-                // @if CK_DEBUG_STICKYPANEL // 	'Visible limiter'
+        if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
+            // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
+            // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
+            // @if CK_DEBUG_STICKYPANEL // 		backgroundColor: 'rgba(255, 0, 255, .3)' },
+            // @if CK_DEBUG_STICKYPANEL // 	'Visible limiter'
+            // @if CK_DEBUG_STICKYPANEL // );
+            const visibleLimiterTop = visibleLimiterRect.top;
+            // Check if there's a change the panel can be sticky to the bottom of the limiter.
+            if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
+                const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
+                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
+                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
+                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
+                // @if CK_DEBUG_STICKYPANEL // } );
+                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
+                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
+                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset'
                 // @if CK_DEBUG_STICKYPANEL // );
-                const visibleAncestorsTop = visibleAncestorsRect.top;
-                // Check if there's a change the panel can be sticky to the bottom of the limiter.
-                if (visibleAncestorsTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
-                    const stickyBottomOffset = Math.max(limiterRect.bottom - visibleAncestorsRect.bottom, 0) + this.limiterBottomOffset;
-                    // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
-                    // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
-                    // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
-                    // @if CK_DEBUG_STICKYPANEL // } );
-                    // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
-                    // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
-                    // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset'
-                    // @if CK_DEBUG_STICKYPANEL // );
-                    // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
-                    // move upwards if there's not enough space for it.
-                    if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
-                        this._stickToBottomOfLimiter(stickyBottomOffset);
-                    }
-                    else {
-                        this._unstick();
-                    }
+                // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
+                // move upwards if there's not enough space for it.
+                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
+                    this._stickToBottomOfLimiter(stickyBottomOffset);
                 }
                 else {
-                    if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                        this._stickToTopOfAncestors(visibleAncestorsTop);
-                    }
-                    else {
-                        this._unstick();
-                    }
+                    this._unstick();
                 }
             }
             else {
-                this._unstick();
+                if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
+                    this._stickToTopOfAncestors(visibleLimiterTop);
+                }
+                else {
+                    this._unstick();
+                }
             }
         }
         else {
@@ -181,6 +176,14 @@ export default class StickyPanelView extends View {
         // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
         // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
         // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
+        // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
+        // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)' },
+        // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect'
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
     }
     /**
      * Sticks the panel at the given CSS `top` offset.

package/src/search/filteredview.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { FocusableView } from '../focuscycler';
+/**
+ * @module ui/search/filteredview
+ */
+/**
+ * A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
+ */
+export default interface FilteredView extends FocusableView {
+    /**
+     * Filters the view by the given regular expression.
+     */
+    filter(regExp: RegExp | null): {
+        resultsCount: number;
+        totalItemsCount: number;
+    };
+}
+/**
+ * Fired when the user selects an autocomplete option. The event data should contain the selected value.
+ *
+ * @eventName ~FilteredView#execute
+ */
+export interface FilteredViewExecuteEvent {
+    name: 'execute';
+    args: [{
+        value: string;
+    }];
+}

package/src/search/filteredview.js

@@ -0,0 +1,5 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/search/searchinfoview.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/search/searchinfoview
+*/
+import type { FocusableView } from '../focuscycler';
+import View from '../view';
+/**
+ * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
+ *
+ * @internal
+ */
+export default class SearchInfoView extends View implements FocusableView {
+    /**
+     * Controls whether the view is visible.
+     *
+     * @observable
+     * @default false
+     */
+    isVisible: boolean;
+    /**
+     * Controls the primary line of text in the info.
+     *
+     * @observable
+     * @default ''
+     */
+    primaryText: string;
+    /**
+     * Controls the secondary line of text in the info.
+     *
+     * @observable
+     * @default ''
+     */
+    secondaryText: string;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * Focuses the view
+     */
+    focus(): void;
+}

package/src/search/searchinfoview.js

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2023, 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';
+/**
+ * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
+ *
+ * @internal
+ */
+export default class SearchInfoView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        const bind = this.bindTemplate;
+        this.set({
+            isVisible: false,
+            primaryText: '',
+            secondaryText: ''
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-search__info',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ],
+                tabindex: -1
+            },
+            children: [
+                {
+                    tag: 'span',
+                    children: [
+                        {
+                            text: [bind.to('primaryText')]
+                        }
+                    ]
+                },
+                {
+                    tag: 'span',
+                    children: [
+                        {
+                            text: [bind.to('secondaryText')]
+                        }
+                    ]
+                }
+            ]
+        });
+    }
+    /**
+     * Focuses the view
+     */
+    focus() {
+        this.element.focus();
+    }
+}

package/src/search/searchresultsview.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/search/searchresultsview
+ */
+import View from '../view';
+import type ViewCollection from '../viewcollection';
+import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
+import { default as FocusCycler, type FocusableView } from '../focuscycler';
+/**
+ * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
+ */
+export default class SearchResultsView extends View implements FocusableView {
+    /**
+     * Tracks information about the DOM focus in the view.
+     *
+     * @readonly
+     */
+    focusTracker: FocusTracker;
+    /**
+     * The collection of the child views inside of the list item {@link #element}.
+     *
+     * @readonly
+     */
+    children: ViewCollection;
+    /**
+     * Provides the focus management (keyboard navigation) in the view.
+     *
+     * @readonly
+     */
+    protected _focusCycler: FocusCycler;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the view.
+     */
+    focus(): void;
+    /**
+     * Focuses the first child view.
+     */
+    focusFirst(): void;
+    /**
+     * Focuses the last child view.
+     */
+    focusLast(): void;
+}

package/src/search/searchresultsview.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/search/searchresultsview
+ */
+import View from '../view';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
+import { default as FocusCycler } from '../focuscycler';
+/**
+ * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
+ */
+export default class SearchResultsView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        this.children = this.createCollection();
+        this.focusTracker = new FocusTracker();
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-search__results'
+                ],
+                tabindex: -1
+            },
+            children: this.children
+        });
+        this._focusCycler = new FocusCycler({
+            focusables: this.children,
+            focusTracker: this.focusTracker
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        for (const child of this.children) {
+            this.focusTracker.add(child.element);
+        }
+    }
+    /**
+     * Focuses the view.
+     */
+    focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+     * Focuses the first child view.
+     */
+    focusFirst() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+     * Focuses the last child view.
+     */
+    focusLast() {
+        this._focusCycler.focusLast();
+    }
+}

package/src/search/text/searchtextqueryview.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/search/text/searchtextqueryview
+ */
+import ButtonView from '../../button/buttonview';
+import IconView from '../../icon/iconview';
+import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
+import type InputBase from '../../input/inputbase';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
+ *
+ * @internal
+ * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
+ */
+export default class SearchTextQueryView<TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends LabeledFieldView<TQueryFieldView> {
+    /**
+     * The loupe icon displayed next to the {@link #fieldView}.
+     */
+    iconView?: IconView;
+    /**
+     * The button that clears and focuses the {@link #fieldView}.
+     */
+    resetButtonView?: ButtonView;
+    /**
+     * A reference to the view configuration.
+     */
+    private readonly _viewConfig;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, config: SearchTextQueryViewConfig<TQueryFieldView>);
+    /**
+     * Resets the search field to its default state.
+     */
+    reset(): void;
+}
+/**
+ * An event fired when the field is reset using the
+ * {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView#resetButtonView}.
+ *
+ * @eventName ~SearchTextQueryView#reset
+ */
+export type SearchTextQueryViewResetEvent = {
+    name: 'reset';
+    args: [];
+};
+/**
+ * The configuration of the {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView} view.
+ */
+export interface SearchTextQueryViewConfig<TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>> {
+    /**
+     * The human-readable label of the search field.
+     */
+    label: string;
+    /**
+     * Determines whether the button that resets the search should be visible.
+     *
+     * @default true
+     */
+    showResetButton?: boolean;
+    /**
+     * Determines whether the loupe icon should be visible.
+     *
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * The function that creates the search field input view. By default, a plain
+     * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.
+     */
+    creator?: LabeledFieldViewCreator<TConfigSearchField>;
+}

package/src/search/text/searchtextqueryview.js

@@ -0,0 +1,75 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/search/text/searchtextqueryview
+ */
+import ButtonView from '../../button/buttonview';
+import IconView from '../../icon/iconview';
+import LabeledFieldView from '../../labeledfield/labeledfieldview';
+import { createLabeledInputText } from '../../labeledfield/utils';
+import { icons } from '@ckeditor/ckeditor5-core';
+/**
+ * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
+ *
+ * @internal
+ * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
+ */
+export default class SearchTextQueryView extends LabeledFieldView {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, config) {
+        const t = locale.t;
+        const viewConfig = Object.assign({}, {
+            showResetButton: true,
+            showIcon: true,
+            creator: createLabeledInputText
+        }, config);
+        super(locale, viewConfig.creator);
+        this.label = config.label;
+        this._viewConfig = viewConfig;
+        if (this._viewConfig.showIcon) {
+            this.iconView = new IconView();
+            this.iconView.content = icons.loupe;
+            this.fieldWrapperChildren.add(this.iconView, 0);
+            this.extendTemplate({
+                attributes: {
+                    class: 'ck-search__query_with-icon'
+                }
+            });
+        }
+        if (this._viewConfig.showResetButton) {
+            this.resetButtonView = new ButtonView(locale);
+            this.resetButtonView.set({
+                label: t('Clear'),
+                icon: icons.cancel,
+                class: 'ck-search__reset',
+                isVisible: false,
+                tooltip: true
+            });
+            this.resetButtonView.on('execute', () => {
+                this.reset();
+                this.focus();
+                this.fire('reset');
+            });
+            this.resetButtonView.bind('isVisible').to(this.fieldView, 'isEmpty', isEmpty => !isEmpty);
+            this.fieldWrapperChildren.add(this.resetButtonView);
+            this.extendTemplate({
+                attributes: {
+                    class: 'ck-search__query_with-reset'
+                }
+            });
+        }
+    }
+    /**
+     * Resets the search field to its default state.
+     */
+    reset() {
+        this.fieldView.reset();
+        if (this._viewConfig.showResetButton) {
+            this.resetButtonView.isVisible = false;
+        }
+    }
+}