From 0298cc8d10e5e6f8bbc0eff7a8c0f5b99318ddae Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Tue, 13 Nov 2018 17:06:01 +1100
Subject: [PATCH] feat: expose gapMode

---
 README.md         | 1 +
 src/component.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e57d035..684fdae 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ Now you could __focus on__ a single task.
  - `[onDeactivation]` - on deactivation callback
  - `[onClickOutside]` - on click outside of "focus" area. (actually on any event "outside")
  - `[onEscapeKey]` - on Esc key pressed (and not defaultPrevented)
+ - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.
  
 ## Additional API
 ### Exposed from React-Focus-Lock
diff --git a/src/component.tsx b/src/component.tsx
index af82be0..7e74cdf 100644
--- a/src/component.tsx
+++ b/src/component.tsx
@@ -4,12 +4,16 @@ import {ScrollLocky} from 'react-scroll-locky';
 import ReactFocusLock from 'react-focus-lock'
 import {hideOthers} from 'aria-hidden';
 
+type GapMode = 'padding' | 'margin';
+
 export interface ReactFocusOnProps {
   enabled?: boolean;
   autoFocus?: boolean;
   onActivation?: (node: HTMLElement) => void;
   onDeactivation?: () => void;
 
+  gapMode?: GapMode;
+
   onClickOutside?: () => void;
   onEscapeKey?: (event: Event) => void;
 }
@@ -46,11 +50,12 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
   };
 
   render() {
-    const {children, autoFocus, onClickOutside, enabled = true} = this.props;
+    const {children, autoFocus, onClickOutside, gapMode, enabled = true} = this.props;
     return (
       <ScrollLocky
         enabled={enabled}
         onEscape={onClickOutside}
+        gapMode={gapMode}
       >
         <ReactFocusLock
           autoFocus={autoFocus}