Add support for gapMode

- Kibana ignores `margin`, so we default to `padding` instead

src/components/focus_trap/focus_trap.spec.tsx

@@ -10,7 +10,7 @@
 /// <reference types="cypress-real-events" />
 /// <reference types="../../../cypress/support" />
 
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { EuiFocusTrap } from './focus_trap';
 import { EuiPortal } from '../portal';
 
@@ -288,5 +288,72 @@ describe('EuiFocusTrap', () => {
         expect($el[0].scrollTop).not.to.equal(0);
       });
     });
+
+    describe('scrollbar gap', () => {
+      const ToggledFocusTrap = (focusTrapProps: any) => {
+        const [isFocusTrapOpen, setIsFocusTrapOpen] = useState(false);
+
+        return (
+          <div style={{ height: 2000, backgroundColor: '#555' }}>
+            <button
+              data-test-subj="openFocusTrap"
+              onClick={() => setIsFocusTrapOpen(true)}
+            >
+              Toggle focus trap
+            </button>
+            {isFocusTrapOpen && (
+              <EuiFocusTrap scrollLock {...focusTrapProps}>
+                Test
+              </EuiFocusTrap>
+            )}
+          </div>
+        );
+      };
+
+      // Depending on the machine running these tests, scrollbars might not
+      // have a width (e.g. some Mac system settings) - if so, skip them
+      const skipIfNoScrollbars = () => {
+        cy.window().then((win) => {
+          const htmlWidth = Cypress.$('body')[0].scrollWidth;
+          const scrollBarWidth = win.innerWidth - htmlWidth;
+
+          if (scrollBarWidth === 0) {
+            cy.log('Skipping test - no scrollbars detected');
+            // @ts-ignore - this works even if Cypress doesn't type it
+            Cypress.mocha.getRunner().suite.ctx.skip();
+          }
+        });
+      };
+
+      it('preserves the scrollbar width when locked', () => {
+        cy.realMount(<ToggledFocusTrap />);
+        skipIfNoScrollbars();
+        cy.get('[data-test-subj="openFocusTrap"]').click();
+
+        cy.get('body').then(($body) => {
+          const styles = window.getComputedStyle($body[0]);
+
+          const padding = parseFloat(styles.getPropertyValue('padding-right'));
+          expect(padding).to.be.gt(0);
+
+          expect(styles.getPropertyValue('margin-right')).to.equal('0px');
+        });
+      });
+
+      it('allows customizing gapMode', () => {
+        cy.realMount(<ToggledFocusTrap gapMode="margin" />);
+        skipIfNoScrollbars();
+        cy.get('[data-test-subj="openFocusTrap"]').click();
+
+        cy.get('body').then(($body) => {
+          const styles = window.getComputedStyle($body[0]);
+
+          const margin = parseFloat(styles.getPropertyValue('margin-right'));
+          expect(margin).to.be.gt(0);
+
+          expect(styles.getPropertyValue('padding-right')).to.equal('0px');
+        });
+      });
+    });
   });
 });

src/components/focus_trap/focus_trap.tsx

@@ -10,6 +10,7 @@ import React, { Component, CSSProperties } from 'react';
 import { FocusOn } from 'react-focus-on';
 import { ReactFocusOnProps } from 'react-focus-on/dist/es5/types';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
+import type { BodyScroll as RemoveScrollBarProps } from 'react-remove-scroll-bar/dist/es5/component.d.ts';
 
 import { CommonProps } from '../common';
 import { findElementBySelectorOrRef, ElementTarget } from '../../services';
@@ -37,6 +38,7 @@ interface EuiFocusTrapInterface {
 export interface EuiFocusTrapProps
   extends CommonProps,
     Omit<ReactFocusOnProps, 'enabled'>, // Inverted `disabled` prop used instead
+    Pick<RemoveScrollBarProps, 'gapMode'>,
     EuiFocusTrapInterface {}
 
 interface State {
@@ -50,6 +52,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     returnFocus: true,
     noIsolation: true,
     scrollLock: false,
+    gapMode: 'padding',
   };
 
   state: State = {
@@ -119,6 +122,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
       returnFocus,
       noIsolation,
       scrollLock,
+      gapMode,
       ...rest
     } = this.props;
     const isDisabled = disabled || this.state.hasBeenDisabledByClick;
@@ -138,7 +142,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     return (
       <FocusOn {...focusOnProps}>
         {children}
-        {scrollLock && <RemoveScrollBar />}
+        {scrollLock && <RemoveScrollBar gapMode={gapMode} />}
       </FocusOn>
     );
   }