@vaadin/split-layout 23.0.0-alpha1 → 23.0.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/split-layout",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,7 @@
   },
   "main": "vaadin-split-layout.js",
   "module": "vaadin-split-layout.js",
+  "type": "module",
   "files": [
     "src",
     "theme",
@@ -32,17 +33,16 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
+    "@vaadin/component-base": "23.0.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha5",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
 }

package/src/vaadin-split-layout.d.ts

@@ -1,9 +1,8 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -138,13 +137,6 @@ export interface SplitLayoutEventMap extends HTMLElementEventMap, SplitLayoutCus
  * </vaadin-split-layout>
  * ```
  *
- * ### Resize Notification
- *
- * This element implements `IronResizableBehavior` to notify the nested resizables
- * when the splitter is dragged. In order to define a resizable and receive that
- * notification in a nested element, include `IronResizableBehavior` and listen
- * for the `iron-resize` event.
- *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
@@ -158,15 +150,15 @@ export interface SplitLayoutEventMap extends HTMLElementEventMap, SplitLayoutCus
  *
  * @fires {Event} splitter-dragend - Fired after dragging the splitter have ended.
  */
-declare class SplitLayout extends ElementMixin(ThemableMixin(GestureEventListeners(HTMLElement))) {
+declare class SplitLayout extends ElementMixin(ThemableMixin(HTMLElement)) {
   /**
    * The split layout's orientation. Possible values are: `horizontal|vertical`.
    */
   orientation: 'horizontal' | 'vertical';
 
   /**
-   * Can be called to manually notify a resizable and its descendant
-   * resizables of a resize change.
+   * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
+   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
    */
   notifyResize(): void;
 

package/src/vaadin-split-layout.js

@@ -1,14 +1,12 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2016 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { addListener } from '@vaadin/component-base/src/gestures.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -152,11 +150,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes GestureEventListeners
  */
-class SplitLayout extends ElementMixin(
-  ThemableMixin(GestureEventListeners(mixinBehaviors([IronResizableBehavior], PolymerElement)))
-) {
+class SplitLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -207,13 +202,7 @@ class SplitLayout extends ElementMixin(
         }
       </style>
       <slot id="primary" name="primary"></slot>
-      <div
-        part="splitter"
-        id="splitter"
-        on-track="_onHandleTrack"
-        on-down="_setPointerEventsNone"
-        on-up="_restorePointerEvents"
-      >
+      <div part="splitter" id="splitter">
         <div part="handle"></div>
       </div>
       <slot id="secondary" name="secondary"></slot>
@@ -248,11 +237,16 @@ class SplitLayout extends ElementMixin(
   ready() {
     super.ready();
     this.__observer = new FlattenedNodesObserver(this, this._processChildren);
+
+    const splitter = this.$.splitter;
+    addListener(splitter, 'track', this._onHandleTrack.bind(this));
+    addListener(splitter, 'down', this._setPointerEventsNone.bind(this));
+    addListener(splitter, 'up', this._restorePointerEvents.bind(this));
   }
 
   /** @private */
   _processChildren() {
-    this.getEffectiveChildren().forEach((child, i) => {
+    [...this.children].forEach((child, i) => {
       if (i === 0) {
         this._primaryChild = child;
         child.setAttribute('slot', 'primary');
@@ -321,8 +315,6 @@ class SplitLayout extends ElementMixin(
     this._setFlexBasis(this._primaryChild, this._startSize.primary + dirDistance, this._startSize.container);
     this._setFlexBasis(this._secondaryChild, this._startSize.secondary - dirDistance, this._startSize.container);
 
-    this.notifyResize();
-
     if (event.detail.state === 'end') {
       this.dispatchEvent(new CustomEvent('splitter-dragend'));
 
@@ -331,23 +323,15 @@ class SplitLayout extends ElementMixin(
   }
 
   /**
-   * Can be called to manually notify a resizable and its descendant
-   * resizables of a resize change.
+   * @deprecated Since Vaadin 23, `notifyResize()` is deprecated. The component uses a
+   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
    */
   notifyResize() {
-    // NOTE: we have this method here to include it to the API docs,
-    // as we do not use `IronResizableBehavior` in type definitions.
-    super.notifyResize();
+    console.warn(
+      `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
+    );
   }
 
-  /**
-   * Fired when the splitter is dragged. Non-bubbling. Fired for the splitter
-   * element and any nested elements with `IronResizableBehavior`.
-   *
-   * DEPRECATED: This event will be dropped in one of the future Vaadin versions. Use a ResizeObserver instead.
-   * @event iron-resize
-   */
-
   /**
    * Fired after dragging the splitter have ended.
    *