[EuiPopover][EuiInputPopover] Allow more control via focusTrapProps (…

…#6955)

* Give consumers more control over `focusTrapProps`

- the number of consumers with edge cases / enough knowledge to start overriding props is going to be very small, and they should be allowed to do so if needed

* Remove `onTrapDeactivation` prop in favor of `focusTrapProps.onDeactivation`

* changelog

* [EuiInputPopover] Extend same `focusTrapProps` flexibility

- this is more of a bugfix IMO since this should have been working before

src/components/popover/input_popover.tsx

@@ -46,6 +46,7 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   children,
   className,
   disableFocusTrap = false,
+  focusTrapProps,
   input,
   fullWidth = false,
   onPanelResize,
@@ -123,7 +124,11 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
       className={classes}
       {...props}
     >
-      <EuiFocusTrap clickOutsideDisables={true} disabled={disableFocusTrap}>
+      <EuiFocusTrap
+        clickOutsideDisables={true}
+        disabled={disableFocusTrap}
+        {...focusTrapProps}
+      >
         <div onKeyDown={onKeyDown}>{children}</div>
       </EuiFocusTrap>
     </EuiPopover>

src/components/popover/popover.tsx

@@ -20,7 +20,6 @@ import { focusable } from 'tabbable';
 
 import { CommonProps, NoArgCallback } from '../common';
 import { FocusTarget, EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
-import { ReactFocusOnProps } from 'react-focus-on/dist/es5/types';
 
 import {
   cascadingMenuKeys,
@@ -103,14 +102,7 @@ export interface EuiPopoverProps extends CommonProps {
   /**
    * Object of props passed to EuiFocusTrap
    */
-  focusTrapProps?: Pick<
-    EuiFocusTrapProps,
-    | 'clickOutsideDisables'
-    | 'onClickOutside'
-    | 'noIsolation'
-    | 'scrollLock'
-    | 'shards'
-  >;
+  focusTrapProps?: Partial<EuiFocusTrapProps>;
   /**
    * Show arrow indicating to originating button
    */
@@ -181,10 +173,6 @@ export interface EuiPopoverProps extends CommonProps {
    * component; pass `zIndex` to override
    */
   zIndex?: number;
-  /**
-   * Function callback for when the focus trap is deactivated
-   */
-  onTrapDeactivation?: ReactFocusOnProps['onDeactivation'];
   /**
    * Distance away from the anchor that the popover will render
    */
@@ -627,7 +615,6 @@ export class EuiPopover extends Component<Props, State> {
       display,
       offset,
       onPositionChange,
-      onTrapDeactivation,
       buffer,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -703,14 +690,13 @@ export class EuiPopover extends Component<Props, State> {
           <EuiFocusTrap
             clickOutsideDisables={true}
             onClickOutside={this.onClickOutside}
-            {...focusTrapProps}
             returnFocus={returnFocus} // Ignore temporary state of indecisive focus
             initialFocus={initialFocus}
-            onDeactivation={onTrapDeactivation}
             onEscapeKey={this.onEscapeKey}
             disabled={
               !ownFocus || !this.state.isOpenStable || this.state.isClosing
             }
+            {...focusTrapProps}
           >
             <EuiPopoverPanel
               {...(panelProps as EuiPopoverPanelProps)}

upcoming_changelogs/6955.md

@@ -0,0 +1,10 @@
+- Updated `EuiPopover` to allow consumer control of all `focusTrapProps`
+
+**Bug fixes**
+
+- Fixed `EuiInputPopover` to allow consumer control of its focus trap via `focusTrapProps`
+
+**Breaking changes**
+
+- Removed `onTrapDeactivation` prop from `EuiPopover`. Use `focusTrapProps.onDeactivation` instead
+