@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/List.js

@@ -16,6 +16,8 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isTabNext, isSpace, isEnter, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
+import findClosestPosition from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
@@ -23,9 +25,13 @@ import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEff
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
-import ListMode from "./types/ListMode.js";
+import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import "./ListItemBase.js";
+import DropIndicator from "./DropIndicator.js";
 import ListSeparators from "./types/ListSeparators.js";
 import BusyIndicator from "./BusyIndicator.js";
 // Template
@@ -37,67 +43,60 @@ import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import { LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE, ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_DELETABLE, } from "./generated/i18n/i18n-defaults.js";
 import "./CheckBox.js";
 import "./RadioButton.js";
+import ListItemGroup, { isInstanceOfListItemGroup } from "./ListItemGroup.js";
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 const PAGE_UP_DOWN_SIZE = 10;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-list</code> component allows displaying a list of items, advanced keyboard
+ * The `ui5-list` component allows displaying a list of items, advanced keyboard
  * handling support for navigating between items, and predefined modes to improve the development efficiency.
- * <br><br>
- * The <code>ui5-list</code> is a container for the available list items:
- * <ul>
- * <li><code>ui5-li</code></li>
- * <li><code>ui5-li-custom</code></li>
- * <li><code>ui5-li-groupheader</code></li>
- * </ul>
- * <br><br>
+ *
+ * The `ui5-list` is a container for the available list items:
+ *
+ * - `ui5-li`
+ * - `ui5-li-custom`
+ * - `ui5-li-group`
+ *
  * To benefit from the built-in selection mechanism, you can use the available
  * selection modes, such as
- * <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>.
- * <br><br>
- * Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.
+ * `Single`, `Multiple` and `Delete`.
+ *
+ * Additionally, the `ui5-list` provides header, footer, and customization for the list item separators.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Basic Navigation</h4>
- * The <code>ui5-list</code> provides advanced keyboard handling.
+ * #### Basic Navigation
+ * The `ui5-list` provides advanced keyboard handling.
  * When a list is focused the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
  *
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the items</li>
- * <li>[HOME] - Navigates to first item</li>
- * <li>[END] - Navigates to the last item</li>
- * </ul>
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
  *
  * The user can use the following keyboard shortcuts to perform actions (such as select, delete),
- * when the <code>mode</code> property is in use:
- * <ul>
- * <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li>
- * <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li>
- * </ul>
+ * when the `selectionMode` property is in use:
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * - [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection
+ * - [Delete] - Delete an item if `selectionMode` property is `Delete`
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/List.js";`
  *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents/dist/StandardListItem.js";` (for `ui5-li`)
  *
- * <code>import "@ui5/webcomponents/dist/List.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/StandardListItem.js";</code> (for <code>ui5-li</code>)
- * <br>
- * <code>import "@ui5/webcomponents/dist/CustomListItem.js";</code> (for <code>ui5-li-custom</code>)
- * <br>
- * <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
+ * `import "@ui5/webcomponents/dist/CustomListItem.js";` (for `ui5-li-custom`)
  *
+ * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ui5-li-group`)
  * @constructor
  * @extends UI5Element
  * @public
@@ -125,16 +124,35 @@ let List = List_1 = class List extends UI5Element {
         // Indicates the List bottom most part has been detected by the IntersectionObserver
         // for the first time.
         this.initialIntersection = true;
+        this.onItemFocusedBound = this.onItemFocused.bind(this);
+        this.onForwardAfterBound = this.onForwardAfter.bind(this);
+        this.onForwardBeforeBound = this.onForwardBefore.bind(this);
+        this.onItemTabIndexChangeBound = this.onItemTabIndexChange.bind(this);
+    }
+    /**
+     * Returns an array containing the list item instances without the groups in a flat structure.
+     * @default []
+     * @since 2.0.0
+     * @public
+     */
+    get listItems() {
+        return this.getItems();
+    }
+    onEnterDOM() {
+        DragRegistry.subscribe(this);
     }
     onExitDOM() {
         this.unobserveListEnd();
         this.resizeListenerAttached = false;
         ResizeHandler.deregister(this.getDomRef(), this._handleResize);
+        DragRegistry.unsubscribe(this);
     }
     onBeforeRendering() {
+        this.detachGroupHeaderEvents();
         this.prepareListItems();
     }
     onAfterRendering() {
+        this.attachGroupHeaderEvents();
         if (this.growsOnScroll) {
             this.observeListEnd();
         }
@@ -146,6 +164,28 @@ let List = List_1 = class List extends UI5Element {
             this.attachForResize();
         }
     }
+    attachGroupHeaderEvents() {
+        // events fired by the group headers are not bubbling through the shadow
+        // dom of the groups because of capture: false of the custom events
+        this.getItems().forEach(item => {
+            if (item.hasAttribute("ui5-li-group-header")) {
+                item.addEventListener("ui5-_focused", this.onItemFocusedBound);
+                item.addEventListener("ui5-_forward-after", this.onForwardAfterBound);
+                item.addEventListener("ui5-_forward-before", this.onForwardBeforeBound);
+                item.addEventListener("ui5-_tabindex-change", this.onItemTabIndexChangeBound);
+            }
+        });
+    }
+    detachGroupHeaderEvents() {
+        this.getItems().forEach(item => {
+            if (item.hasAttribute("ui5-li-group-header")) {
+                item.removeEventListener("ui5-_focused", this.onItemFocusedBound);
+                item.removeEventListener("ui5-_forward-after", this.onForwardAfterBound);
+                item.removeEventListener("ui5-_forward-before", this.onForwardBeforeBound);
+                item.removeEventListener("ui5-_tabindex-change", this.onItemTabIndexChangeBound);
+            }
+        });
+    }
     attachForResize() {
         if (!this.resizeListenerAttached) {
             this.resizeListenerAttached = true;
@@ -164,6 +204,9 @@ let List = List_1 = class List extends UI5Element {
     get listEndDOM() {
         return this.shadowRoot.querySelector(".ui5-list-end-marker");
     }
+    get dropIndicatorDOM() {
+        return this.shadowRoot.querySelector("[ui5-drop-indicator]");
+    }
     get hasData() {
         return this.getItems().length !== 0;
     }
@@ -171,25 +214,25 @@ let List = List_1 = class List extends UI5Element {
         return !this.hasData && this.noDataText;
     }
     get isDelete() {
-        return this.mode === ListMode.Delete;
+        return this.selectionMode === ListSelectionMode.Delete;
     }
     get isSingleSelect() {
         return [
-            ListMode.SingleSelect,
-            ListMode.SingleSelectBegin,
-            ListMode.SingleSelectEnd,
-            ListMode.SingleSelectAuto,
-        ].includes(this.mode);
+            ListSelectionMode.Single,
+            ListSelectionMode.SingleStart,
+            ListSelectionMode.SingleEnd,
+            ListSelectionMode.SingleAuto,
+        ].includes(this.selectionMode);
     }
-    get isMultiSelect() {
-        return this.mode === ListMode.MultiSelect;
+    get isMultiple() {
+        return this.selectionMode === ListSelectionMode.Multiple;
     }
     get ariaLabelledBy() {
         if (this.accessibleNameRef || this.accessibleName) {
             return undefined;
         }
         const ids = [];
-        if (this.isMultiSelect || this.isSingleSelect || this.isDelete) {
+        if (this.isMultiple || this.isSingleSelect || this.isDelete) {
             ids.push(this.modeLabelID);
         }
         if (this.shouldRenderH1) {
@@ -202,7 +245,7 @@ let List = List_1 = class List extends UI5Element {
     }
     get ariaLabelModeText() {
         if (this.hasData) {
-            if (this.isMultiSelect) {
+            if (this.isMultiple) {
                 return List_1.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
             }
             if (this.isSingleSelect) {
@@ -224,9 +267,9 @@ let List = List_1 = class List extends UI5Element {
         return this.growing === ListGrowingMode.Button;
     }
     get _growingButtonText() {
-        return List_1.i18nBundle.getText(LOAD_MORE_TEXT);
+        return this.growingButtonText || List_1.i18nBundle.getText(LOAD_MORE_TEXT);
     }
-    get busyIndPosition() {
+    get loadingIndPosition() {
         if (!this.grows) {
             return "absolute";
         }
@@ -234,11 +277,14 @@ let List = List_1 = class List extends UI5Element {
     }
     get styles() {
         return {
-            busyInd: {
-                position: this.busyIndPosition,
+            loadingInd: {
+                position: this.loadingIndPosition,
             },
         };
     }
+    get listAccessibleRole() {
+        return this.accessibleRole.toLowerCase();
+    }
     get classes() {
         return {
             root: {
@@ -254,7 +300,7 @@ let List = List_1 = class List extends UI5Element {
             const showBottomBorder = this.separators === ListSeparators.All
                 || (this.separators === ListSeparators.Inner && !isLastChild);
             if (item.hasConfigurableMode) {
-                item._mode = this.mode;
+                item._selectionMode = this.selectionMode;
             }
             item.hasBorder = showBottomBorder;
         });
@@ -291,8 +337,8 @@ let List = List_1 = class List extends UI5Element {
         const previouslySelectedItems = this.getSelectedItems();
         let selectionChange = false;
         this._selectionRequested = true;
-        if (this.mode !== ListMode.None && this[`handle${this.mode}`]) {
-            selectionChange = this[`handle${this.mode}`](e.detail.item, !!e.detail.selected);
+        if (this.selectionMode !== ListSelectionMode.None && this[`handle${this.selectionMode}`]) {
+            selectionChange = this[`handle${this.selectionMode}`](e.detail.item, !!e.detail.selected);
         }
         if (selectionChange) {
             const changePrevented = !this.fireEvent("selection-change", {
@@ -307,7 +353,7 @@ let List = List_1 = class List extends UI5Element {
             }
         }
     }
-    handleSingleSelect(item) {
+    handleSingle(item) {
         if (item.selected) {
             return false;
         }
@@ -315,16 +361,16 @@ let List = List_1 = class List extends UI5Element {
         item.selected = true;
         return true;
     }
-    handleSingleSelectBegin(item) {
-        return this.handleSingleSelect(item);
+    handleSingleStart(item) {
+        return this.handleSingle(item);
     }
-    handleSingleSelectEnd(item) {
-        return this.handleSingleSelect(item);
+    handleSingleEnd(item) {
+        return this.handleSingle(item);
     }
-    handleSingleSelectAuto(item) {
-        return this.handleSingleSelect(item);
+    handleSingleAuto(item) {
+        return this.handleSingle(item);
     }
-    handleMultiSelect(item, selected) {
+    handleMultiple(item, selected) {
         item.selected = selected;
         return true;
     }
@@ -339,10 +385,22 @@ let List = List_1 = class List extends UI5Element {
         return this.getItems().filter(item => item.selected);
     }
     getEnabledItems() {
-        return this.getItems().filter(item => !item.disabled);
+        return this.getItems().filter(item => item._focusable);
     }
     getItems() {
-        return this.getSlottedNodes("items");
+        // drill down when we see ui5-li-group and get the items
+        const items = [];
+        const slottedItems = this.getSlottedNodes("items");
+        slottedItems.forEach(item => {
+            if (isInstanceOfListItemGroup(item)) {
+                const groupItems = [item.groupHeaderItem, ...item.items].filter(Boolean);
+                items.push(...groupItems);
+            }
+            else {
+                items.push(item);
+            }
+        });
+        return items;
     }
     getItemsForProcessing() {
         return this.getItems();
@@ -419,7 +477,7 @@ let List = List_1 = class List extends UI5Element {
             return;
         }
         if (lastTabbableEl === target) {
-            if (this.getFirstItem(x => x.selected && !x.disabled)) {
+            if (this.getFirstItem(x => x.selected && x._focusable)) {
                 this.focusFirstSelectedItem();
             }
             else if (this.getPreviouslyFocusedItem()) {
@@ -464,6 +522,66 @@ let List = List_1 = class List extends UI5Element {
         }
         this.setForwardingFocus(false);
     }
+    _ondragenter(e) {
+        e.preventDefault();
+    }
+    _ondragleave(e) {
+        if (e.relatedTarget instanceof Node && this.shadowRoot.contains(e.relatedTarget)) {
+            return;
+        }
+        this.dropIndicatorDOM.targetReference = null;
+    }
+    _ondragover(e) {
+        const draggedElement = DragRegistry.getDraggedElement();
+        if (!(e.target instanceof HTMLElement) || !draggedElement) {
+            return;
+        }
+        const closestPosition = findClosestPosition(this.items, e.clientY, Orientation.Vertical);
+        if (!closestPosition) {
+            this.dropIndicatorDOM.targetReference = null;
+            return;
+        }
+        let placements = closestPosition.placements;
+        if (closestPosition.element === draggedElement) {
+            placements = placements.filter(placement => placement !== MovePlacement.On);
+        }
+        const placementAccepted = placements.some(placement => {
+            const beforeItemMovePrevented = !this.fireEvent("move-over", {
+                source: {
+                    element: draggedElement,
+                },
+                destination: {
+                    element: closestPosition.element,
+                    placement,
+                },
+            }, true);
+            if (beforeItemMovePrevented) {
+                e.preventDefault();
+                this.dropIndicatorDOM.targetReference = closestPosition.element;
+                this.dropIndicatorDOM.placement = placement;
+                return true;
+            }
+            return false;
+        });
+        if (!placementAccepted) {
+            this.dropIndicatorDOM.targetReference = null;
+        }
+    }
+    _ondrop(e) {
+        e.preventDefault();
+        const draggedElement = DragRegistry.getDraggedElement();
+        this.fireEvent("move", {
+            source: {
+                element: draggedElement,
+            },
+            destination: {
+                element: this.dropIndicatorDOM.targetReference,
+                placement: this.dropIndicatorDOM.placement,
+            },
+        });
+        this.dropIndicatorDOM.targetReference = null;
+        draggedElement.focus();
+    }
     isForwardElement(element) {
         const elementId = element.id;
         const beforeElement = this.getBeforeElement();
@@ -486,7 +604,7 @@ let List = List_1 = class List extends UI5Element {
         e.stopPropagation();
         this._itemNavigation.setCurrentItem(target);
         this.fireEvent("item-focused", { item: target });
-        if (this.mode === ListMode.SingleSelectAuto) {
+        if (this.selectionMode === ListSelectionMode.SingleAuto) {
             const detail = {
                 item: target,
                 selectionComponentPressed: false,
@@ -501,7 +619,7 @@ let List = List_1 = class List extends UI5Element {
         if (!this.fireEvent("item-click", { item: pressedItem }, true)) {
             return;
         }
-        if (!this._selectionRequested && this.mode !== ListMode.Delete) {
+        if (!this._selectionRequested && this.selectionMode !== ListSelectionMode.Delete) {
             this._selectionRequested = true;
             const detail = {
                 item: pressedItem,
@@ -563,7 +681,7 @@ let List = List_1 = class List extends UI5Element {
      */
     focusFirstItem() {
         // only enabled items are focusable
-        const firstItem = this.getFirstItem(x => !x.disabled);
+        const firstItem = this.getFirstItem(x => x._focusable);
         if (firstItem) {
             firstItem.focus();
         }
@@ -576,7 +694,7 @@ let List = List_1 = class List extends UI5Element {
     }
     focusFirstSelectedItem() {
         // only enabled items are focusable
-        const firstSelectedItem = this.getFirstItem(x => x.selected && !x.disabled);
+        const firstSelectedItem = this.getFirstItem(x => x.selected && x._focusable);
         if (firstSelectedItem) {
             firstSelectedItem.focus();
         }
@@ -655,8 +773,8 @@ __decorate([
     property({ type: Boolean })
 ], List.prototype, "indent", void 0);
 __decorate([
-    property({ type: ListMode, defaultValue: ListMode.None })
-], List.prototype, "mode", void 0);
+    property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
+], List.prototype, "selectionMode", void 0);
 __decorate([
     property()
 ], List.prototype, "noDataText", void 0);
@@ -666,12 +784,15 @@ __decorate([
 __decorate([
     property({ type: ListGrowingMode, defaultValue: ListGrowingMode.None })
 ], List.prototype, "growing", void 0);
+__decorate([
+    property()
+], List.prototype, "growingButtonText", void 0);
 __decorate([
     property({ type: Boolean })
-], List.prototype, "busy", void 0);
+], List.prototype, "loading", void 0);
 __decorate([
     property({ validator: Integer, defaultValue: 1000 })
-], List.prototype, "busyDelay", void 0);
+], List.prototype, "loadingDelay", void 0);
 __decorate([
     property()
 ], List.prototype, "accessibleName", void 0);
@@ -679,11 +800,8 @@ __decorate([
     property({ defaultValue: "" })
 ], List.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ defaultValue: "list" })
+    property({ type: ListAccessibleRole, defaultValue: ListAccessibleRole.List })
 ], List.prototype, "accessibleRole", void 0);
-__decorate([
-    property({ defaultValue: undefined, noAttribute: true })
-], List.prototype, "accessibleRoleDescription", void 0);
 __decorate([
     property({ type: Boolean })
 ], List.prototype, "_inViewport", void 0);
@@ -703,12 +821,11 @@ List = List_1 = __decorate([
         renderer: litRender,
         template: ListTemplate,
         styles: [browserScrollbarCSS, listCss],
-        dependencies: [BusyIndicator],
+        dependencies: [BusyIndicator, DropIndicator, ListItemGroup],
     })
     /**
-     * Fired when an item is activated, unless the item's <code>type</code> property
-     * is set to <code>Inactive</code>.
-     *
+     * Fired when an item is activated, unless the item's `type` property
+     * is set to `Inactive`.
      * @allowPreventDefault
      * @param {HTMLElement} item The clicked item.
      * @public
@@ -723,11 +840,10 @@ List = List_1 = __decorate([
         },
     })
     /**
-     * Fired when the <code>Close</code> button of any item is clicked
-     * <br><br>
-     * <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
-     * not to be confused with <code>item-delete</code>.
+     * Fired when the `Close` button of any item is clicked
      *
+     * **Note:** This event is only applicable to list items that can be closed (such as notification list items),
+     * not to be confused with `item-delete`.
      * @param {HTMLElement} item the item about to be closed.
      * @public
      * @since 1.0.0-rc.8
@@ -742,10 +858,9 @@ List = List_1 = __decorate([
         },
     })
     /**
-     * Fired when the <code>Toggle</code> button of any item is clicked.
-     * <br><br>
-     * <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
+     * Fired when the `Toggle` button of any item is clicked.
      *
+     * **Note:** This event is only applicable to list items that can be toggled (such as notification group list items).
      * @param {HTMLElement} item the toggled item.
      * @public
      * @since 1.0.0-rc.8
@@ -761,10 +876,9 @@ List = List_1 = __decorate([
     })
     /**
      * Fired when the Delete button of any item is pressed.
-     * <br><br>
-     * <b>Note:</b> A Delete button is displayed on each item,
-     * when the component <code>mode</code> property is set to <code>Delete</code>.
      *
+     * **Note:** A Delete button is displayed on each item,
+     * when the component `selectionMode` property is set to `Delete`.
      * @param {HTMLElement} item the deleted item.
      * @public
      */
@@ -779,8 +893,7 @@ List = List_1 = __decorate([
     })
     /**
      * Fired when selection is changed by user interaction
-     * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
-     *
+     * in `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.
      * @allowPreventDefault
      * @param {Array<ListItemBase>} selectedItems An array of the selected items.
      * @param {Array<ListItemBase>} previouslySelectedItems An array of the previously selected items.
@@ -797,15 +910,26 @@ List = List_1 = __decorate([
              * @public
              */
             previouslySelectedItems: { type: Array },
+            /**
+             * protected, holds the event target item
+             * @protected
+             */
             targetItem: { type: HTMLElement },
-            selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
+            /**
+             * protected, indicates if the user used the selection components to change the selection
+             * @protected
+             */
+            selectionComponentPressed: { type: Boolean },
+            /**
+             * @private
+             */
+            key: { type: String },
         },
     })
     /**
      * Fired when the user scrolls to the bottom of the list.
-     * <br><br>
-     * <b>Note:</b> The event is fired when the <code>growing='Scroll'</code> property is enabled.
      *
+     * **Note:** The event is fired when the `growing='Scroll'` property is enabled.
      * @public
      * @since 1.0.0-rc.6
      */