fix(SplitterLayout - TypeScript): extend children type (#7457)

The type now allows conditional rendering. The change also moves types
to a dedicated file.

Author: Lukas742

packages/main/src/components/SplitterLayout/index.tsx

@@ -2,46 +2,13 @@
 
 import { debounce, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { CSSProperties, DependencyList, ReactElement } from 'react';
+import type { CSSProperties } from 'react';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { SplitterLayoutContext } from '../../internal/SplitterLayoutContext.js';
-import type { CommonProps } from '../../types/index.js';
-import type { SplitterElementPropTypes } from '../SplitterElement/index.js';
 import { classNames, styleData } from './SplitterLayout.module.css.js';
+import type { SplitterLayoutPropTypes } from './types.js';
 import { useConcatSplitterElements } from './useConcatSplitterElements.js';
 
-interface SplitterLayoutOptions {
-  /**
-   * Defines whether the `SplitterLayout` should be reset when its size changes depending on the orientation.
-   */
-  resetOnSizeChange?: boolean;
-  /**
-   * Defines whether the `SplitterLayout` should be reset when its `children` change.
-   */
-  resetOnChildrenChange?: boolean;
-  /**
-   * Defines a list of dependencies that trigger a reset of the `SplitterLayout` when they are changed.
-   *
-   * __Note:__ The order and size of arrays of dependencies must remain constant in React, it's therefore not possible to change size or order between renders.
-   */
-  resetOnCustomDepsChange?: DependencyList;
-}
-
-export interface SplitterLayoutPropTypes extends CommonProps {
-  /**
-   * Controls if a vertical or horizontal `SplitterLayout` is rendered.
-   */
-  vertical?: boolean;
-  /**
-   * The content areas (optional) to be split. The control will show n-1 splitter bars between n controls in this aggregation.
-   */
-  children?: ReactElement<SplitterElementPropTypes> | ReactElement<SplitterElementPropTypes>[];
-  /**
-   * Defines options to customize the behavior of the SplitterLayout.
-   */
-  options?: SplitterLayoutOptions;
-}
-
 /**
  * A layout that contains several content areas. The content that is added to the `SplitterLayout` should be wrapped
  * into 0-n `SplitterElement`s which define the size and size constraints of the content area.
@@ -137,4 +104,5 @@ const SplitterLayout = forwardRef<HTMLDivElement, SplitterLayoutPropTypes>((prop
 
 SplitterLayout.displayName = 'SplitterLayout';
 
+export type { SplitterLayoutPropTypes };
 export { SplitterLayout };

packages/main/src/components/SplitterLayout/types.ts

@@ -0,0 +1,37 @@
+import type { CommonProps } from '@ui5/webcomponents-react-base';
+import type { DependencyList, ReactElement } from 'react';
+import type { SplitterElementPropTypes } from '../SplitterElement/index.js';
+
+interface SplitterLayoutOptions {
+  /**
+   * Defines whether the `SplitterLayout` should be reset when its size changes depending on the orientation.
+   */
+  resetOnSizeChange?: boolean;
+  /**
+   * Defines whether the `SplitterLayout` should be reset when its `children` change.
+   */
+  resetOnChildrenChange?: boolean;
+  /**
+   * Defines a list of dependencies that trigger a reset of the `SplitterLayout` when they are changed.
+   *
+   * __Note:__ The order and size of arrays of dependencies must remain constant in React, it's therefore not possible to change size or order between renders.
+   */
+  resetOnCustomDepsChange?: DependencyList;
+}
+
+type SplitterLayoutChild = ReactElement<SplitterElementPropTypes> | undefined | false | null;
+
+export interface SplitterLayoutPropTypes extends CommonProps {
+  /**
+   * Controls if a vertical or horizontal `SplitterLayout` is rendered.
+   */
+  vertical?: boolean;
+  /**
+   * The content areas (optional) to be split. The control will show n-1 splitter bars between n controls in this aggregation.
+   */
+  children?: SplitterLayoutChild | SplitterLayoutChild[];
+  /**
+   * Defines options to customize the behavior of the SplitterLayout.
+   */
+  options?: SplitterLayoutOptions;
+}

packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx

@@ -2,9 +2,10 @@ import type { CSSProperties, ReactElement } from 'react';
 import { Children, cloneElement, isValidElement, useMemo } from 'react';
 import { Splitter } from '../Splitter/index.js';
 import type { SplitterElementPropTypes } from '../SplitterElement/index.js';
+import type { SplitterLayoutPropTypes } from './types.js';
 
 interface ConcatSplitterElements {
-  children: ReactElement<SplitterElementPropTypes> | ReactElement<SplitterElementPropTypes>[];
+  children: SplitterLayoutPropTypes['children'];
   width: CSSProperties['width'];
   height: CSSProperties['height'];
   vertical: boolean;