feat: add 'as' and 'style' props

__tests__/UI.tsx

@@ -3,6 +3,7 @@ import {configure, mount} from 'enzyme';
 import {FocusOn} from '../src/UI';
 import {sidecar} from "use-sidecar";
 import * as Adapter from 'enzyme-adapter-react-16';
+import {RemoveScroll} from "../../react-remove-scroll/src/UI";
 
 configure({ adapter: new Adapter() });
 
@@ -19,4 +20,19 @@ describe('UI', () => {
     await tick();
     expect(wrapper.html()).toContain('content');
   });
+
+  it('smoke as style class', async () => {
+    const wrapper = mount(
+      <FocusOn
+        sideCar={car}
+        as="span"
+        style={{width:'auto'}}
+        className="name"
+      >
+        content
+      </FocusOn>
+    );
+    await tick();
+    expect(wrapper.html()).toContain('<span data-focus-lock-disabled="disabled" style="width: auto;" class="name">content</span>');
+  });
 });

package.json

@@ -42,7 +42,7 @@
   "dependencies": {
     "aria-hidden": "^1.1.1",
     "react-focus-lock": "^2.3.1",
-    "react-remove-scroll": "^2.3.0",
+    "react-remove-scroll": "^2.4.0",
     "react-style-singleton": "^2.1.0",
     "use-callback-ref": "^1.2.3",
     "use-sidecar": "^1.0.1"

src/UI.tsx

@@ -25,6 +25,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       className,
       shouldIgnore,
       style,
+      as,
       ...rest
     } = props;
 
@@ -51,6 +52,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
             sideCar,
             shards,
             allowPinchZoom,
+            as,
             inert,
             style,
             enabled: enabled && scrollLock,

src/types.ts

@@ -11,31 +11,89 @@ export interface LockProps {
 }
 
 export interface CommonProps {
+  /**
+   * action to perform on Esc key press
+   */
   onEscapeKey?: (event: Event) => void;
+  /**
+   * action to perform on click outside
+   */
   onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 
+  /**
+   * callback on lock activation
+   * @param node the main node
+   */
   onActivation?: (node: HTMLElement) => void;
+  /**
+   * callback on lock deactivation
+   */
   onDeactivation?: () => void;
 
+  /**
+   * [scroll-lock] control isolation
+   * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
+   */
   noIsolation?: boolean;
+  /**
+   * [scroll-lock] full page inert (event suppression)
+   * @default false
+   * @see {@link https://github.com/theKashey/react-remove-scroll#usage}
+   */
   inert?: boolean;
+  /**
+   * [scroll-lock] allows scroll based zoom
+   * @default false
+   * @see https://github.com/theKashey/react-remove-scroll#usage
+   */
   allowPinchZoom?: boolean;
 
+  /**
+   * a list of elements which should be considered as a part of the lock
+   */
   shards?: Array<React.RefObject<any> | HTMLElement>;
 }
 
 export interface ReactFocusOnProps extends CommonProps {
+  /**
+   * The main switch
+   */
   enabled?: boolean;
+  /**
+   * Controls scroll lock behavior
+   */
   scrollLock?: boolean;
+  /**
+   * Controls focus lock behavior
+   */
   focusLock?: boolean;
 
+  /**
+   * [focus-lock] control autofocus
+   * @default true
+   */
   autoFocus?: boolean;
+  /**
+   * [focus-lock] control returnFocus
+   * @default true
+   */
   returnFocus?: boolean | FocusOptions;
 
+  /**
+   * [focus-lock] allows "ignoring" focus on some elements
+   * @see {@link https://github.com/theKashey/react-focus-lock#api}
+   */
+  shouldIgnore?: (candidate: HTMLElement) => boolean;
+
+  /**
+   * allows replacement of the host node
+   * @default div
+   */
+  as?: string | React.ElementType;
+
+  style?: React.CSSProperties;
   className?: string;
   children: React.ReactNode;
-  shouldIgnore?: (candidate: HTMLElement) => boolean;
-  style?: React.CSSProperties
 }
 
 export interface ReactFocusOnSideProps extends ReactFocusOnProps {