fix: Prevent styled component props from propagating to DOM

Author: b-zurg

src/components/Resizer/helpers.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 type OrientationProps = {
-  isVertical: boolean;
+  $isVertical: boolean;
 };
 export const topBottomCss = css`
   top: 0;
@@ -23,10 +23,10 @@ interface ButtonContainerProps extends OrientationProps {
 }
 export const ButtonContainer = styled.div<ButtonContainerProps>`
   position: absolute;
-  ${props => (props.isVertical ? topBottomCss : leftRightCss)}
-  ${props => (props.isVertical ? 'width: 5rem' : 'height: 5rem')};
+  ${props => (props.$isVertical ? topBottomCss : leftRightCss)}
+  ${props => (props.$isVertical ? 'width: 5rem' : 'height: 5rem')};
   transform: ${props =>
-    props.isVertical
+    props.$isVertical
       ? `translateX(${props.isLtr ? '-' : ''}50%) ${
           props.grabberSize ? `translateX(calc(${props.grabberSize} / 2))` : ''
         }`
@@ -41,18 +41,21 @@ export const ButtonContainer = styled.div<ButtonContainerProps>`
   justify-content: center;
 `;
 
-export const ResizeGrabber = styled.div<OrientationProps>`
+interface GrabberProps extends OrientationProps {
+  $isCollapsed: boolean;
+}
+export const ResizeGrabber = styled.div<GrabberProps>`
   position: absolute;
   z-index: 3;
-  transform: ${props => (props.isVertical ? 'translateX(-50%)' : 'translateY(-50%)')};
-  cursor: ${props => (props.isVertical ? 'col-resize' : 'row-resize')};
-  ${props => (props.isVertical ? topBottomCss : leftRightCss)}
+  transform: ${props => (props.$isVertical ? 'translateX(-50%)' : 'translateY(-50%)')};
+  cursor: ${props => !props.$isCollapsed && (props.$isVertical ? 'col-resize' : 'row-resize')};
+  ${props => (props.$isVertical ? topBottomCss : leftRightCss)}
 `;
 
-export const ResizePresentation = styled.div<{ isVertical: boolean }>`
+export const ResizePresentation = styled.div<OrientationProps>`
   z-index: 2;
   position: absolute;
-  ${props => (props.isVertical ? topBottomCss : leftRightCss)}
+  ${props => (props.$isVertical ? topBottomCss : leftRightCss)}
 `;
 
 export const getSizeWithUnit = (size: string | number): string =>

src/components/Resizer/index.tsx

@@ -103,15 +103,15 @@ export const Resizer = ({
     [collapseOptions]
   );
   const collapseButton = collapseOptions ? (
-    <ButtonContainer isVertical={isVertical} grabberSize={grabberSizeWithUnit} isLtr={isLtr}>
+    <ButtonContainer $isVertical={isVertical} grabberSize={grabberSizeWithUnit} isLtr={isLtr}>
       <ButtonPositionOffset style={{ flexBasis: preButtonFlex }} />
       <Transition
         in={isHovered}
         timeout={collapseOptions.buttonTransitionTimeout}
         style={{ flex: '0 0 0', position: 'relative' }}
       >
         <ButtonWrapper
-          isVertical={isVertical}
+          $isVertical={isVertical}
           onClick={handleButtonClick}
           onMouseDown={handleButtonMousedown}
         >
@@ -125,7 +125,8 @@ export const Resizer = ({
   return (
     <div style={{ position: 'relative' }}>
       <ResizeGrabber
-        isVertical={isVertical}
+        $isVertical={isVertical}
+        $isCollapsed={isCollapsed}
         style={getWidthOrHeight(grabberSize)}
         role="presentation"
         className={classes}
@@ -137,11 +138,11 @@ export const Resizer = ({
         {collapseButton}
       </ResizeGrabber>
       <Fade in={!isHovered}>
-        <ResizePresentation isVertical={isVertical} style={{ ...getWidthOrHeight(1), ...css }} />
+        <ResizePresentation $isVertical={isVertical} style={{ ...getWidthOrHeight(1), ...css }} />
       </Fade>
       <Fade in={isHovered}>
         <ResizePresentation
-          isVertical={isVertical}
+          $isVertical={isVertical}
           style={{ ...getWidthOrHeight(1), ...hoverCss }}
         />
       </Fade>