Merge pull request #66 from theKashey/wireup-gap

fix: wire up gapMode, fixes #65

__tests__/scroll-lock-integration.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {configure, mount} from 'enzyme';
+import {FocusOn} from '../src/UI';
+import {sidecar} from "use-sidecar";
+import { RemoveScroll } from 'react-remove-scroll/UI';
+import * as Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+
+
+const tick = () => new Promise(resolve => setTimeout(resolve, 10));
+
+const car = sidecar(() => import ('../src/sidecar'));
+
+describe('UI', () => {
+    it('gap off', async () => {
+        const wrapper = mount(
+            <FocusOn sideCar={car}>content</FocusOn>
+        );
+        expect((wrapper).find(RemoveScroll).prop('gapMode')).toBe(undefined);
+    });
+    it('gap off', async () => {
+        const wrapper = mount(
+            <FocusOn sideCar={car} gapMode="padding">content</FocusOn>
+        );
+        expect((wrapper).find(RemoveScroll).prop('gapMode')).toBe('padding');
+    });
+});

src/UI.tsx

@@ -27,6 +27,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       preventScrollOnFocus,
       style,
       as,
+      gapMode,
       ...rest
     } = props;
 
@@ -36,12 +37,18 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
 
     const appliedLockProps = {
         ...restProps,
+
+        as,
+        style,
+
         sideCar,
+
         shards,
+
         allowPinchZoom,
-        as,
+        gapMode,
         inert,
-        style,
+
         enabled: enabled && scrollLock,
     } as const;
 

src/types.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import ReactFocusLock from 'react-focus-lock/UI';
 import {ComponentProps} from "react";
 
+// TODO: reuse from react-remove-scroll-bar
+export type GapMode = 'padding' | 'margin';
+
 export interface LockProps {
   onMouseDown?: ((e: React.MouseEvent) => void) | undefined;
 
@@ -49,6 +52,12 @@ export interface CommonProps {
    * @see https://github.com/theKashey/react-remove-scroll#usage
    */
   allowPinchZoom?: boolean | undefined;
+  /**
+   * [scroll-lock] Controls how body scroll removal is supported. Possible values - `margin` or `padding`
+   * @default 'margin'
+   * @see https://github.com/theKashey/react-remove-scroll-bar#gapmode
+   */
+  gapMode?: GapMode;
 
   /**
    * a list of elements which should be considered as a part of the lock