DefinitelyTyped · typescript-bot · Apr 2, 2022 · Apr 1, 2022 · fedemp · Apr 1, 2022
diff --git a/types/ckeditor__ckeditor5-ui/ckeditor__ckeditor5-ui-tests.ts b/types/ckeditor__ckeditor5-ui/ckeditor__ckeditor5-ui-tests.ts
@@ -42,19 +42,19 @@ import {
     ToolbarView,
     TooltipView,
     View,
-    ViewCollection,
+    ViewCollection
 } from '@ckeditor/ckeditor5-ui';
 import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
 import DropdownPanelView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownpanelview';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import IframeView from '@ckeditor/ckeditor5-ui/src/iframe/iframeview';
-import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
-import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
-import ToolbarLineBreakView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarlinebreakview';
-import { DomEmitterMixin, EmitterMixin, FocusTracker, KeystrokeHandler, Locale } from '@ckeditor/ckeditor5-utils';
 import InputView from '@ckeditor/ckeditor5-ui/src/input/inputview';
 import InputNumberView from '@ckeditor/ckeditor5-ui/src/inputnumber/inputnumberview';
 import { createLabeledInputNumber } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
+import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
+import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
+import ToolbarLineBreakView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarlinebreakview';
+import { DomEmitterMixin, FocusTracker, KeystrokeHandler, Locale } from '@ckeditor/ckeditor5-utils';
 
 let num = 0;
 let str = '';
@@ -117,6 +117,11 @@ view.destroy();
 htmlelement = view.element!;
 view.element === null;
 
+// $ExpectType void | undefined
+view.disableCssTransitions?.();
+// $ExpectType void | undefined
+view.enableCssTransitions?.();
+
 /**
  * ViewCollection
  */
@@ -233,7 +238,7 @@ str = tooltip.text;
  * clickOutsideHandler
  */
 clickOutsideHandler({
-    emitter: Object.create(EmitterMixin),
+    emitter: new View(),
     activator: () => false,
     contextElements: [document.createElement('div')],
     callback: () => {},

diff --git a/types/ckeditor__ckeditor5-ui/src/bindings/clickoutsidehandler.d.ts b/types/ckeditor__ckeditor5-ui/src/bindings/clickoutsidehandler.d.ts
@@ -1,8 +1,15 @@
-import { Emitter } from "@ckeditor/ckeditor5-utils/src/emittermixin";
+import { Emitter } from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
 
-export default function clickOutsideHandler(options?: {
+/**
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
+ *
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
+ * properly.
+ */
+export default function clickOutsideHandler(options: {
     emitter: Emitter;
     activator: () => boolean;
-    contextElements: HTMLElement[];
     callback: () => void;
+    contextElements: HTMLElement[];
 }): void;
diff --git a/types/ckeditor__ckeditor5-ui/src/bindings/injectcsstransitiondisabler.d.ts b/types/ckeditor__ckeditor5-ui/src/bindings/injectcsstransitiondisabler.d.ts
@@ -1,3 +1,45 @@
-import View from "../view";
+import View from '../view';
 
+/**
+ * A decorator that brings the possibility to temporarily disable CSS transitions using
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
+ * when the view is first displayed but they should work normal in other cases.
+ *
+ * The methods to control the CSS transitions are:
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
+ * {@link module:ui/view~View#element view element}.
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
+ * {@link module:ui/view~View#element view element}.
+ *
+ * **Note**: This helper extends the {@link module:ui/view~View#template template} and must be used **after**
+ * {@link module:ui/view~View#setTemplate} is called:
+ *
+ *    import injectCssTransitionDisabler from '@ckeditor/ckeditor5-ui/src/bindings/injectcsstransitiondisabler';
+ *
+ *    class MyView extends View {
+ *      constructor() {
+ *        super();
+ *
+ *        // ...
+ *
+ *        this.setTemplate( { ... } );
+ *
+ *        // ...
+ *
+ *        injectCssTransitionDisabler( this );
+ *
+ *        // ...
+ *      }
+ *    }
+ *
+ * The usage comes down to:
+ *
+ *    const view = new MyView();
+ *
+ *    // ...
+ *
+ *    view.disableCssTransitions();
+ *    view.show();
+ *    view.enableCssTransitions();
+ */
 export default function injectCssTransitionDisabler(view: View): void;
diff --git a/types/ckeditor__ckeditor5-ui/src/bindings/preventdefault.d.ts b/types/ckeditor__ckeditor5-ui/src/bindings/preventdefault.d.ts
@@ -1,4 +1,23 @@
-import { TemplateToBinding } from "../template";
-import View from "../view";
+import { TemplateToBinding } from '../template';
+import View from '../view';
 
+/**
+ * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
+ * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
+ * {@link module:ui/view~View#template template}.
+ *
+ *    // In a class extending View.
+ *    import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
+ *
+ *    // ...
+ *
+ *    this.setTemplate( {
+ *      tag: 'div',
+ *
+ *      on: {
+ *        // Prevent the default mousedown action on this view.
+ *        mousedown: preventDefault( this )
+ *      }
+ *    } );
+ */
 export default function preventDefault(view: View): TemplateToBinding;
diff --git a/types/ckeditor__ckeditor5-ui/src/bindings/submithandler.d.ts b/types/ckeditor__ckeditor5-ui/src/bindings/submithandler.d.ts
@@ -1,3 +1,35 @@
-import View from "../view";
+import View from '../view';
 
+/**
+ * A handler useful for {@link module:ui/view~View views} working as HTML forms. It intercepts a native DOM
+ * `submit` event, prevents the default web browser behavior (navigation and page reload) and
+ * fires the `submit` event on a view instead. Such a custom event can be then used by any
+ * {@link module:utils/dom/emittermixin~Emitter emitter}, e.g. to serialize the form data.
+ *
+ *    import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
+ *
+ *    // ...
+ *
+ *    class AnyFormView extends View {
+ *      constructor() {
+ *        super();
+ *
+ *        // ...
+ *
+ *        submitHandler( {
+ *          view: this
+ *        } );
+ *      }
+ *    }
+ *
+ *    // ...
+ *
+ *    const view = new AnyFormView();
+ *
+ *    // A sample listener attached by an emitter working with the view.
+ *    this.listenTo( view, 'submit', () => {
+ *      saveTheFormData();
+ *      hideTheForm();
+ *    } );
+ */
 export default function submitHandler(options: { view: View }): void;
diff --git a/types/ckeditor__ckeditor5-ui/src/view.d.ts b/types/ckeditor__ckeditor5-ui/src/view.d.ts
@@ -347,6 +347,9 @@ export default class View implements DomEmitter, Observable {
      */
     destroy(): void;
 
+    enableCssTransitions?(): void;
+    disableCssTransitions?(): void;
+
     set(option: Record<string, unknown>): void;
     set(name: string, value: unknown): void;
     bind(...bindProperties: string[]): BindChain;