[EuiFocusTrap] accept style prop (#3916)

* upgrade react-focus-on

* add test

* CL

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed bug in `EuiCodeBlock` content overlapping with control buttons when `whiteSpace` was set to `"pre"` ([#3853](https://github.com/elastic/eui/pull/3853))
+- Fixed `EuiFocusTrap` not applying provided `style` prop ([#3916](https://github.com/elastic/eui/pull/3916))
 
 ## [`28.0.0`](https://github.com/elastic/eui/tree/v28.0.0)
 

package.json

@@ -68,7 +68,7 @@
     "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
     "react-dropzone": "^10.2.1",
-    "react-focus-on": "^3.4.1",
+    "react-focus-on": "^3.5.0",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
     "react-virtualized-auto-sizer": "^1.0.2",

src/components/focus_trap/__snapshots__/focus_trap.test.tsx.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiFocusTrap accepts className and style 1`] = `
+Array [
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="-1"
+  />,
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="-1"
+  />,
+  <div
+    class="testing"
+    data-focus-lock-disabled="disabled"
+    style="height:100%"
+  >
+    <div />
+  </div>,
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="-1"
+  />,
+]
+`;
+
 exports[`EuiFocusTrap can be disabled 1`] = `
 Array [
   <div

src/components/focus_trap/focus_trap.test.tsx

@@ -49,6 +49,16 @@ describe('EuiFocusTrap', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('accepts className and style', () => {
+    const component = render(
+      <EuiFocusTrap className="testing" style={{ height: '100%' }}>
+        <div />
+      </EuiFocusTrap>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('behavior', () => {
     describe('focus', () => {
       test('is set on the first focusable element by default', () => {

yarn.lock

@@ -14290,14 +14290,14 @@ react-focus-lock@^2.3.1:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-focus-on@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.4.1.tgz#e184f3c44185e341598c5d9d44b2987ad459b240"
-  integrity sha512-KGRIl0iAu+1k1dcX7eQCXF5ZR/nl+XyXN5Ukw/OY80vLaK2b6vDzNqnX0HdYbY5xSUhIRUvMWEzSsdEyPjvk/Q==
+react-focus-on@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/react-focus-on/-/react-focus-on-3.5.0.tgz#3cdebbefee26a083976e1700ba75f7377040f7f1"
+  integrity sha512-RqGAHOxhRAaMSVHIN5IpY7YL6AJkD/DMa/+iPDV7aB6XWRQfg3v2q35egIZgMWP2xhXaRVai3B80dpVWyj4Rcw==
   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"
@@ -14373,10 +14373,10 @@ react-remove-scroll-bar@^2.1.0:
     react-style-singleton "^2.1.0"
     tslib "^1.0.0"
 
-react-remove-scroll@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.3.0.tgz#3af06fe2f7130500704b676cdef94452c08fe593"
-  integrity sha512-UqVimLeAe+5EHXKfsca081hAkzg3WuDmoT9cayjBegd6UZVhlTEchleNp9J4TMGkb/ftLve7ARB5Wph+HJ7A5g==
+react-remove-scroll@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.0.tgz#190c16eb508c5927595935499e8f5dd9ab0e75cf"
+  integrity sha512-BZIO3GaEs0Or1OhA5C//n1ibUP1HdjJmqUVUsOCMxwoIpaCocbB9TFKwHOkBa/nyYy3slirqXeiPYGwdSDiseA==
   dependencies:
     react-remove-scroll-bar "^2.1.0"
     react-style-singleton "^2.1.0"