Splitter: save initial size for collapsed panels on initialization (#33059)

Co-authored-by: dmlvr <lvr@dmlvr.com>

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/splitter/splitter.ts

@@ -69,13 +69,13 @@ import {
   type RenderQueueItem,
 } from './utils/types';
 
-const SPLITTER_CLASS = 'dx-splitter';
-const SPLITTER_ITEM_CLASS = 'dx-splitter-item';
-const SPLITTER_ITEM_HIDDEN_CONTENT_CLASS = 'dx-splitter-item-hidden-content';
+export const SPLITTER_CLASS = 'dx-splitter';
+export const SPLITTER_ITEM_CLASS = 'dx-splitter-item';
+export const SPLITTER_ITEM_HIDDEN_CONTENT_CLASS = 'dx-splitter-item-hidden-content';
+export const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 const SPLITTER_ITEM_DATA_KEY = 'dxSplitterItemData';
 const HORIZONTAL_ORIENTATION_CLASS = 'dx-splitter-horizontal';
 const VERTICAL_ORIENTATION_CLASS = 'dx-splitter-vertical';
-const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 
 const DEFAULT_RESIZE_HANDLE_SIZE = 8;
 
@@ -118,9 +118,11 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
 
   private _renderQueue: RenderQueueItem[] = [];
 
-  private _panesCacheSize: (PaneCache | undefined)[] = [];
+  // @ts-expect-error ts-error
+  private _panesCacheSize: (PaneCache | undefined)[];
 
-  private _panesCacheSizeVisible: (PaneCache | undefined)[] = [];
+  // @ts-expect-error ts-error
+  private _panesCacheSizeVisible: (PaneCache | undefined)[];
 
   private _savedCollapsingEvent?: DxEvent<InteractionEvent>;
 
@@ -201,11 +203,11 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
 
     this._toggleOrientationClass();
 
-    super._initMarkup();
-
     this._panesCacheSize = [];
     this._panesCacheSizeVisible = [];
 
+    super._initMarkup();
+
     this._attachResizeObserverSubscription();
   }
 
@@ -240,6 +242,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
       this._layout = this._getDefaultLayoutBasedOnSize();
 
       this._applyStylesFromLayout(this._layout);
+      this._setPanesCacheSize();
       this._updateItemSizes();
 
       this._shouldRecalculateLayout = false;
@@ -255,6 +258,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
     if (this._isVisible()) {
       this._layout = this._getDefaultLayoutBasedOnSize();
       this._applyStylesFromLayout(this._layout);
+      this._setPanesCacheSize();
 
       this._updateItemSizes();
     } else {
@@ -264,6 +268,45 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
     this._processRenderQueue();
   }
 
+  _setPanesCacheSize(): void {
+    const { items = [] } = this.option();
+
+    items.forEach((item: Item, index) => {
+      const restriction = this._itemRestrictions[index];
+
+      if (!isDefined(restriction?.size)) {
+        return;
+      }
+
+      if (item.collapsed === true) {
+        const isLastNonCollapsed = index >= findLastIndexOfNonCollapsedItem(items);
+        const isLastVisible = this._isLastVisibleItem(index);
+
+        const direction = isLastVisible || isLastNonCollapsed
+          ? CollapseExpandDirection.Previous
+          : CollapseExpandDirection.Next;
+
+        this._panesCacheSize[index] = {
+          size: restriction.size,
+          direction,
+        };
+      }
+
+      if (item.visible === false) {
+        const isLastVisible = index >= findLastIndexOfVisibleItem(items);
+
+        const direction = isLastVisible
+          ? CollapseExpandDirection.Previous
+          : CollapseExpandDirection.Next;
+
+        this._panesCacheSizeVisible[index] = {
+          size: restriction.size,
+          direction,
+        };
+      }
+    });
+  }
+
   _processRenderQueue(): void {
     if (this._isRenderQueueEmpty()) {
       return;
@@ -665,6 +708,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
         this._layout = this._getDefaultLayoutBasedOnSize(item);
 
         this._applyStylesFromLayout(this.getLayout());
+        this._setPanesCacheSize();
         this._updateItemSizes();
         break;
       case 'maxSize':