SplitterLayout: fix lint errors

Author: Lukas742

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

@@ -11,7 +11,7 @@ import announce from '@ui5/webcomponents-base/dist/util/InvisibleMessage.js';
 import iconSearch from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
 import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
 import { CANCEL, CLEAR, SEARCH, SELECT, SELECTED, SELECTED_ITEMS } from '../../i18n/i18n-defaults.js';
@@ -188,7 +188,9 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const [searchValue, setSearchValue] = useState('');
   const [selectedItems, setSelectedItems] = useState([]);
-  const [listComponentRef, listRef] = useSyncRef<ListDomRefWithPrivateAPIs>((listProps as any).ref);
+  const [listComponentRef, listRef] = useSyncRef<ListDomRefWithPrivateAPIs>(
+    (listProps as SelectDialogPropTypes['listProps'] & { ref: RefObject<ListDomRefWithPrivateAPIs> }).ref,
+  );
   const [internalOpen, setInternalOpen] = useState(open);
   useEffect(() => {
     setInternalOpen(open);

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

@@ -59,7 +59,7 @@ const Splitter = forwardRef<HTMLDivElement, SplitterPropTypes>((props, ref) => {
   const positionKeys = vertical ? verticalPositionInfo : horizontalPositionInfo;
 
   const [isDragging, setIsDragging] = useState<boolean | string>(false);
-  const [isSiblings, setIsSiblings] = useState(['previousSibling', 'nextSibling']);
+  const isSiblings = isRtl && !vertical ? ['nextSibling', 'previousSibling'] : ['previousSibling', 'nextSibling'];
 
   const animationFrameIdRef = useRef(null);
   const fireOnResize = (prevSibling: HTMLElement, nextSibling: HTMLElement) => {
@@ -282,10 +282,6 @@ const Splitter = forwardRef<HTMLDivElement, SplitterPropTypes>((props, ref) => {
     };
   }, [isDragging]);
 
-  useEffect(() => {
-    setIsSiblings(isRtl && !vertical ? ['nextSibling', 'previousSibling'] : ['previousSibling', 'nextSibling']);
-  }, [isRtl, vertical]);
-
   const currentTheme = useCurrentTheme();
   const isHighContrast =
     currentTheme === 'sap_fiori_3_hcb' ||

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

@@ -50,47 +50,41 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
   const { vertical, reset } = useContext(SplitterLayoutContext);
   const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 1 auto' } : {};
   const _size = typeof size === 'number' ? `${size}px` : size;
-  const defaultFlexStyles = _size !== 'auto' ? { flex: `0 1 ${_size}` } : { flex: '1 0 min-content', ...safariStyles };
-  const [flexStyles, setFlexStyles] = useState(defaultFlexStyles);
   const [flexBasisApplied, setFlexBasisApplied] = useState(false);
+  const [observedFlex, setObservedFlex] = useState<CSSProperties | null>(null);
+  const flexStyles =
+    _size !== 'auto' ? { flex: `0 1 ${_size}` } : (observedFlex ?? { flex: '1 0 min-content', ...safariStyles });
 
   useStylesheet(styleData, SplitterElement.displayName);
-
   useEffect(() => {
+    if (_size !== 'auto') return;
+
     const elementObserver = new ResizeObserver(([element]) => {
       if (element.target.getBoundingClientRect().width !== 0 && !flexBasisApplied) {
         const resetSafariStyles = Device.isSafari() ? { width: 'unset' } : {};
-        setFlexStyles({
+        setObservedFlex({
           flex: `0 0 ${element.target.getBoundingClientRect()[vertical ? 'height' : 'width']}px`,
           ...resetSafariStyles,
         });
         setFlexBasisApplied(true);
       }
     });
 
-    if (_size === 'auto' && splitterElementRef.current) {
+    if (splitterElementRef.current) {
       elementObserver.observe(splitterElementRef.current);
-    } else {
-      setFlexStyles({ flex: `0 1 ${_size}` });
     }
 
     return () => {
       elementObserver.disconnect();
     };
-  }, [_size, flexBasisApplied, vertical]);
+  }, [_size, flexBasisApplied, splitterElementRef, vertical]);
 
   useIsomorphicLayoutEffect(() => {
     if (reset) {
-      setFlexStyles(undefined);
+      setObservedFlex(null);
       setFlexBasisApplied(false);
     }
-  }, [reset, _size]);
-
-  useIsomorphicLayoutEffect(() => {
-    if (flexStyles === undefined) {
-      setFlexStyles(defaultFlexStyles);
-    }
-  }, [flexStyles]);
+  }, [reset]);
 
   return (
     <div

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

@@ -53,6 +53,8 @@ const SplitterLayout = forwardRef<HTMLDivElement, SplitterLayoutPropTypes>((prop
       setReset(true);
     }
     initialCustomDep.current = false;
+    // Can't determine external dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, options?.resetOnCustomDepsChange ?? []);
 
   useEffect(() => {
@@ -76,7 +78,7 @@ const SplitterLayout = forwardRef<HTMLDivElement, SplitterLayoutPropTypes>((prop
         layoutObserver.disconnect();
       };
     }
-  }, [vertical, options?.resetOnSizeChange]);
+  }, [vertical, options?.resetOnSizeChange, sLRef]);
 
   useEffect(() => {
     if (reset) {