SplitterLayout: fix reset behavior

Author: Lukas742

package.json

@@ -15,7 +15,7 @@
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
     "test:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
-    "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages",
+    "test": "yarn test:prepare && cypress run --component --browser chrome --spec packages/main/src/components/SplitterLayout",
     "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",

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

@@ -52,8 +52,11 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
   const _size = typeof size === 'number' ? `${size}px` : size;
   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 });
+  const flexStyles = reset
+    ? undefined
+    : _size !== 'auto'
+      ? { flex: `0 1 ${_size}` }
+      : (observedFlex ?? { flex: '1 0 min-content', ...safariStyles });
 
   useStylesheet(styleData, SplitterElement.displayName);
   useEffect(() => {
@@ -86,6 +89,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
     }
   }, [reset]);
 
+  console.log(flexStyles, reset);
+
   return (
     <div
       ref={componentRef}

packages/main/src/internal/useObserveHeights.ts

@@ -54,7 +54,7 @@ export const useObserveHeights = (
     if (headerContentRef.current && headerCollapsed !== undefined) {
       setHeaderContentHeight(headerContentRef.current.getBoundingClientRect().height);
     }
-  }, [headerCollapsed]);
+  }, [headerCollapsed, headerContentRef]);
 
   useEffect(() => {
     const page = pageRef.current;
@@ -64,7 +64,7 @@ export const useObserveHeights = (
     return () => {
       page.removeEventListener('scroll', onScroll);
     };
-  }, [onScroll, fixedHeader, preserveHeaderStateOnScroll]);
+  }, [onScroll, fixedHeader, preserveHeaderStateOnScroll, pageRef]);
 
   // top header
   useEffect(() => {
@@ -78,7 +78,7 @@ export const useObserveHeights = (
     return () => {
       headerContentResizeObserver.disconnect();
     };
-  }, []);
+  }, [topHeaderRef]);
 
   // header content
   useEffect(() => {
@@ -95,7 +95,7 @@ export const useObserveHeights = (
     return () => {
       headerContentResizeObserver.disconnect();
     };
-  }, [isIntersecting, fixedHeader]);
+  }, [isIntersecting, fixedHeader, headerContentRef]);
   const totalHeaderHeight = noHeader ? 0 : topHeaderHeight + headerContentHeight;
 
   return { topHeaderHeight, headerContentHeight, totalHeaderHeight, headerCollapsed };

packages/main/src/webComponents/Card/Card.stories.tsx

@@ -72,7 +72,7 @@ const simpleDataSet = [
 ];
 
 export const WithAnalyticalCardHeader = {
-  render: (args) => {
+  render: () => {
     return (
       <Card
         header={

packages/main/src/webComponents/CheckBox/CheckBox.stories.tsx

@@ -20,7 +20,7 @@ export const Default: Story = {};
 
 export const CheckBoxStates: Story = {
   name: 'CheckBox States',
-  render(args) {
+  render() {
     return (
       <>
         <CheckBox text="Error" valueState={ValueState.Negative} />