feat: allow ref forwarding

Author: theKashey

example/app.tsx

@@ -57,6 +57,8 @@ export default class App extends Component <{}, AppState> {
                   shards={[this.scrollRef]}
                   onActivation={() => console.log("activated")}
                   onDeactivation={() => console.log("deactivated")}
+
+                  className="test-class-name"
                 >
                   Holala!! {on ? "on" : "off"}
                   <button onClick={() => alert('ok')}>test inside event</button>

package.json

@@ -44,6 +44,7 @@
     "react-focus-lock": "^2.1.1",
     "react-remove-scroll": "^2.0.4",
     "react-style-singleton": "^2.0.0",
+    "use-callback-ref": "^1.1.0",
     "use-sidecar": "^1.0.1"
   },
   "engines": {

src/Combination.tsx

@@ -7,11 +7,10 @@ const RequireSideCar = (props: any) => {
   return <SideCar {...props} />;
 };
 
-export function FocusOn(props: ReactFocusOnProps) {
-  return (
-    <ReactFocusOn
-      {...props}
-      sideCar={RequireSideCar}
-    />
-  );
-}
+export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnProps>((props, ref) => (
+  <ReactFocusOn
+    {...props}
+    ref={ref}
+    sideCar={RequireSideCar}
+  />
+));

src/UI.tsx

@@ -7,47 +7,52 @@ import ReactFocusLock from 'react-focus-lock/UI'
 import {EffectProps, ReactFocusOnSideProps, LockProps} from "./types";
 import {effectCar} from "./medium";
 
-export function FocusOn(props: ReactFocusOnSideProps) {
+export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>((props, parentRef) => {
   const [lockProps, setLockProps] = React.useState<LockProps>(false as any);
 
-  const {children, autoFocus, shards, enabled = true, scrollLock = true, focusLock = true, returnFocus = true, inert, sideCar, ...rest} = props;
+  const {children, autoFocus, shards, enabled = true, scrollLock = true, focusLock = true, returnFocus = true, inert, sideCar, className, ...rest} = props;
 
   const SideCar: SideCarComponent<EffectProps> = sideCar;
 
   const {onActivation, onDeactivation, ...restProps} = lockProps;
 
   return (
     <>
-      <RemoveScroll
+      <ReactFocusLock
+        ref={parentRef}
+
         sideCar={sideCar}
-        enabled={enabled && scrollLock}
+        disabled={!(lockProps && enabled && focusLock)}
+
+        returnFocus={returnFocus}
+        autoFocus={autoFocus}
+
         shards={shards}
-        inert={inert}
+
+        onActivation={onActivation}
+        onDeactivation={onDeactivation}
+
+        className={className}
+
+        as={RemoveScroll}
+        lockProps={{
+          ...restProps,
+          sideCar,
+          shards,
+          inert,
+          enabled: enabled && scrollLock,
+        }}
       >
-        {enabled && <SideCar
-          {...rest}
-          sideCar={effectCar}
-          setLockProps={setLockProps}
-          shards={shards}
-        />}
-        <ReactFocusLock
-          sideCar={sideCar}
-          disabled={!(lockProps && enabled && focusLock)}
-
-          returnFocus={returnFocus}
-          autoFocus={autoFocus}
-
-          shards={shards}
-
-          lockProps={restProps}
-          onActivation={onActivation}
-          onDeactivation={onDeactivation}
-        >
-          {children}
-        </ReactFocusLock>
-      </RemoveScroll>
+        {children}
+      </ReactFocusLock>
+      {enabled && <SideCar
+        {...rest}
+        sideCar={effectCar}
+        setLockProps={setLockProps}
+        shards={shards}
+      />}
     </>
   );
-}
+})
 
 export * from './reExports';

src/types.ts

@@ -31,6 +31,7 @@ export interface ReactFocusOnProps extends CommonProps {
   autoFocus?: boolean;
   returnFocus?: boolean | FocusOptions;
 
+  className?: string;
   children: React.ReactNode;
 }
 

yarn.lock

@@ -9552,6 +9552,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.1.0.tgz#e41d2b29aea8a568a6dbefe0af56155eac1b6884"
+  integrity sha512-a2j1dVM9UTxdIfZjbdhcD8nCDMDBkTp9rFasSBj3QPcVclYdpKbmLzqLddH3R6WuOff9W6Xo50VedPoVNu8z8A==
+
 use-sidecar@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.1.tgz#75c7a5fdacc14bd3ab64992c638e45a396ad2fad"