Make the resizable hook inert when resizable is not enabled

packages/eui/src/components/flyout/use_flyout_resizable.test.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { useEuiFlyoutResizable } from './use_flyout_resizable';
+
+describe('useEuiFlyoutResizable', () => {
+  const mockProps = {
+    enabled: false,
+    minWidth: 200,
+    maxWidth: 1000,
+    onResize: jest.fn(),
+    side: 'right' as const,
+    size: '50vw',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return original size when disabled (resizable=false)', () => {
+    const { result } = renderHook(() =>
+      useEuiFlyoutResizable({
+        ...mockProps,
+        enabled: false,
+        size: '50vw',
+      })
+    );
+
+    // Should return the original responsive size, not a pixel value
+    expect(result.current.size).toBe('50vw');
+  });
+
+  it('should return original size when enabled but not measured yet (resizable=true)', () => {
+    const { result } = renderHook(() =>
+      useEuiFlyoutResizable({
+        ...mockProps,
+        enabled: true,
+        size: 400, // Use number size for simpler testing
+      })
+    );
+
+    // When enabled but no flyout width measured yet, should return original size
+    expect(result.current.size).toBe(400);
+  });
+});

packages/eui/src/components/flyout/use_flyout_resizable.ts

@@ -56,18 +56,20 @@ export const useEuiFlyoutResizable = ({
   const [flyoutRef, setFlyoutRef] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
+    if (!enabled) return; // Don't measure when resizing is disabled
     if (!flyoutWidth && flyoutRef) {
       setCallOnResize(false); // Don't call `onResize` for non-user width changes
       setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
     }
-  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
 
   // Update flyout width when consumers pass in a new `size`
   useEffect(() => {
+    if (!enabled) return; // Don't update width when resizing is disabled
     setCallOnResize(false);
     // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
     setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
-  }, [_size, getFlyoutMinMaxWidth]);
+  }, [_size, getFlyoutMinMaxWidth, enabled]);
 
   // Initial numbers to calculate from, on resize drag start
   const initialWidth = useRef(0);
@@ -169,7 +171,10 @@ export const useEuiFlyoutResizable = ({
     }
   }, [onResize, callOnResize, flyoutWidth, enabled]);
 
-  const size = useMemo(() => flyoutWidth || _size, [flyoutWidth, _size]);
+  const size = useMemo(
+    () => (enabled ? flyoutWidth || _size : _size),
+    [enabled, flyoutWidth, _size]
+  );
 
   return {
     onKeyDown,