Splitter: Initially collapsed pane cannot be expanded if an adjacent pane's maxSize is specified (T1240306) (#28646) (#28649)

Author: EugeniyKiyashko

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

@@ -40,6 +40,17 @@ export function findLastIndexOfNonCollapsedItem(items: Item[]): number {
   return -1;
 }
 
+export function findLastVisibleExpandedItemIndex(items: Item[]): number {
+  for (let i = items.length - 1; i >= 0; i -= 1) {
+    const { collapsed, visible } = items[i];
+
+    if (collapsed !== true && visible !== false) {
+      return i;
+    }
+  }
+  return -1;
+}
+
 export function findIndexOfNextVisibleItem(items: Item[], index: number): number {
   for (let i = index + 1; i < items.length; i += 1) {
     if (items[i].visible !== false) {

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

@@ -1,7 +1,11 @@
 import { toFixed } from '@js/common/core/localization/utils';
 import { isDefined } from '@js/core/utils/type';
 
-import { findLastIndexOfVisibleItem, normalizePanelSize } from './layout';
+import {
+  findLastIndexOfVisibleItem,
+  findLastVisibleExpandedItemIndex,
+  normalizePanelSize,
+} from './layout';
 import { compareNumbersWithPrecision, PRECISION } from './number_comparison';
 import type { PaneRestrictions } from './types';
 
@@ -135,9 +139,9 @@ export function getDefaultLayout(layoutRestrictions: PaneRestrictions[]): number
     }
 
     if (remainingSize > 0) {
-      const paneIndex = findLastIndexOfVisibleItem(layoutRestrictions);
+      const paneIndex = findLastVisibleExpandedItemIndex(layoutRestrictions);
 
-      if (layoutRestrictions[paneIndex].collapsed === false) {
+      if (paneIndex !== -1) {
         nextLayout[paneIndex] += remainingSize;
       }
     }

packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js

@@ -728,6 +728,24 @@ QUnit.module('Pane sizing', moduleConfig, () => {
     }, {
         items: [{ }, { collapsed: true }],
         expectedLayout: ['100', '0'],
+    }, {
+        items: [{ maxSize: '75%' }, { collapsed: true }],
+        expectedLayout: ['100', '0'],
+    }, {
+        items: [{ collapsed: true }, { visible: false }, { maxSize: '75%' }],
+        expectedLayout: ['0', '0', '100'],
+    }, {
+        items: [{ maxSize: '75%' }, { visible: false }, { collapsed: true }],
+        expectedLayout: ['100', '0', '0'],
+    }, {
+        items: [{ visible: false }, { collapsed: true }, { maxSize: '75%' }, { visible: false }],
+        expectedLayout: ['0', '0', '100', '0'],
+    }, {
+        items: [{ visible: false }, { maxSize: '75%' }, { visible: false }, { collapsed: true }, { visible: false }],
+        expectedLayout: ['0', '100', '0', '0', '0'],
+    }, {
+        items: [{ collapsed: true }, { maxSize: '75%' }],
+        expectedLayout: ['0', '100'],
     }, {
         items: [{ collapsed: true }, { collapsed: true }, { collapsed: true }],
         expectedLayout: ['0', '0', '0'],
@@ -773,6 +791,8 @@ QUnit.module('Pane sizing', moduleConfig, () => {
         { position: 'prev', expectedLayout: ['0', '100'], items: [{ maxSize: '75%', collapsible: true }, { collapsible: true }] },
         { position: 'prev', expectedLayout: ['0', '100'], items: [{ maxSize: '75%', collapsible: true }, { collapsible: true }] },
         { position: 'prev', expectedLayout: ['0', '100'], items: [{ maxSize: '75%', collapsible: true }, { collapsible: true }] },
+        { position: 'prev', expectedLayout: ['50', '50'], items: [{ maxSize: '75%', collapsible: false }, { collapsed: true, collapsible: true }] },
+        { position: 'next', expectedLayout: ['50', '50'], items: [{ collapsed: true, collapsible: true }, { maxSize: '75%', collapsible: false }] },
         { position: 'prev', expectedLayout: ['10.0806', '89.9194'], items: [{ collapsible: true, collapsedSize: 100 }, { collapsible: true, collapsedSize: 100 }] },
         { position: 'next', expectedLayout: ['89.9194', '10.0806'], items: [{ collapsible: true, collapsedSize: 100 }, { collapsible: true, collapsedSize: 100 }] },
         { position: 'next', expectedLayout: ['100', '0'], items: [{ minSize: '15%', collapsible: true }, { collapsible: true }] },