@skyscanner/backpack-web 34.0.0-premajor → 34.0.0-premajor.2

package/bpk-component-popover/index.js

@@ -14,7 +14,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkPopoverPortal, { propTypes as bpkPopoverPortalPropTypes, defaultProps as bpkPopoverPortalDefaultProps } from "./src/BpkPopoverPortal";
+ */import BpkPopover from "./src/BpkPopover";
 import themeAttributes from "./src/themeAttributes";
-export { themeAttributes, bpkPopoverPortalPropTypes, bpkPopoverPortalDefaultProps };
-export default BpkPopoverPortal;
+export { themeAttributes };
+export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.js

@@ -14,172 +14,96 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { useState, cloneElement } from 'react';
-import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useInteractions, FloatingFocusManager } from '@floating-ui/react';
-import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import { ARROW_ID } from "./constants";
-import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
+ */
+
+import { useState, useRef } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from "./PopperUtils";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
   CLOSE_LINK: 'CLOSE_LINK'
 };
-const bindEventSource = (source, callback) => event => {
-  if (event.persist) {
-    event.persist();
-  }
-  callback(event, {
-    source
-  });
-};
-const BpkPopover = props => {
-  const {
-    children,
-    className,
-    closeButtonIcon,
-    closeButtonProps,
-    closeButtonText,
-    id,
-    isOpen,
-    label,
-    labelAsTitle,
-    onClose,
-    padded,
-    placement,
-    popperModifiers,
-    portalStyle,
-    renderTarget,
-    target,
-    ...rest
-  } = props;
+const BpkPopover = ({
+  // children,
+  // className = null,
+  // closeButtonIcon = true,
+  // closeButtonProps = {},
+  // closeButtonText,
+  // id,
+  isOpen = false,
+  // label,
+  // labelAsTitle = false,
+  // onClose,
+  // padded = true,
+  placement = 'bottom',
+  showArrow = true,
+  target,
+  ...rest
+}) => {
   const [isOpenState, setIsOpenState] = useState(isOpen);
-  const {
-    context,
-    floatingStyles,
-    refs
-  } = useFloating({
-    open: isOpenState,
-    onOpenChange: setIsOpenState,
-    middleware: [offset(17), popperModifiers],
-    whileElementsMounted: autoUpdate
-  });
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
+  const arrowRef = useRef(null);
+
+  // const { context, floatingStyles, refs } = useFloating({
+  //   open: isOpenState,
+  //   onOpenChange: setIsOpenState,
+  //   placement,
+  //   middleware: [
+  //     showArrow && offset(14),
+  //     flip({ fallbackAxisSideDirection: 'start' }),
+  //     arrow({ element: arrowRef }),
+  //   ],
+  //   whileElementsMounted: autoUpdate,
+  // });
+
+  // const click = useClick(context);
+  // const dismiss = useDismiss(context);
 
   // Merge all the interactions into prop getters
-  const {
-    getFloatingProps,
-    getReferenceProps
-  } = useInteractions([click, dismiss]);
+  // const { getFloatingProps, getReferenceProps } = useInteractions([
+  //   click,
+  //   dismiss,
+  // ]);
 
-  // const getTargetElement = () => typeof target === 'function' ? target() : (target as JSXElementWithRefProps)?.ref.current
+  // const targetElement = cloneElement(target, {
+  //   ...getReferenceProps(),
+  //   ref: refs.setReference,
+  // });
+  // const classNames = getClassName('bpk-popover', className);
+  // const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
 
-  // const targetEl = cloneElement(getRenderTarget(renderTarget), { ...getReferenceProps(), ref: refs.setReference });
-  // console.error('renderTarget', renderTarget());
-  const targetEl = /*#__PURE__*/cloneElement(target, {
-    ...getReferenceProps(),
-    ref: refs.setReference
-  });
-  const classNames = getClassName('bpk-popover', className);
-  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
-  const labelId = `bpk-popover-label-${id}`;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [targetEl, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
-      context: context,
-      modal: false,
-      children: /*#__PURE__*/_jsx("div", {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
-          appearClassName: getClassName('bpk-popover--appear'),
-          appearActiveClassName: getClassName('bpk-popover--appear-active'),
-          transitionTimeout: 200,
-          children: /*#__PURE__*/_jsxs("section", {
-            id: id,
-            tabIndex: "-1",
-            role: "dialog",
-            "aria-labelledby": labelId,
-            className: classNames,
-            ...rest,
-            children: [labelAsTitle ? /*#__PURE__*/_jsxs("header", {
-              className: getClassName('bpk-popover__header'),
-              children: [/*#__PURE__*/_jsx(BpkText, {
-                tagName: "h2",
-                id: labelId,
-                textStyle: TEXT_STYLES.label1,
-                children: label
-              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton
-              // TODO: className to be removed
-              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-              , {
-                className: getClassName('bpk-popover__close-button'),
-                label: closeButtonText,
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps
-              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps,
-                children: closeButtonText
-              })]
-            }) : /*#__PURE__*/_jsx("span", {
-              id: labelId,
-              className: getClassName('bpk-popover__label'),
-              children: label
-            }), /*#__PURE__*/_jsx("div", {
-              className: bodyClassNames,
-              children: children
-            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
-              className: getClassName('bpk-popover__footer'),
-              children: /*#__PURE__*/_jsx(BpkButtonLink, {
-                onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
-                  setIsOpenState(false);
-                },
-                ...closeButtonProps,
-                children: closeButtonText
-              })
-            })]
-          })
-        })
-      })
-    })]
-  });
-};
-export const propTypes = {
-  children: PropTypes.node.isRequired,
-  closeButtonText: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeButtonIcon: PropTypes.bool,
-  closeButtonProps: PropTypes.object,
-  labelAsTitle: PropTypes.bool,
-  padded: PropTypes.bool
-};
-export const defaultProps = {
-  className: null,
-  closeButtonIcon: true,
-  closeButtonProps: null,
-  labelAsTitle: false,
-  padded: true
-};
-BpkPopover.propTypes = {
-  ...propTypes
-};
-BpkPopover.defaultProps = {
-  ...defaultProps
+  // const labelId = `bpk-popover-label-${id}`;
+
+  return (
+    /*#__PURE__*/
+    // <>
+    //   {targetElement}
+    //   {isOpenState && (
+    //     <FloatingFocusManager context={context} modal={false}>
+    //       <div
+    //         ref={refs.setFloating}
+    //         style={floatingStyles}
+    //         {...getFloatingProps()}
+    //       >
+    //       </div>
+    //     </FloatingFocusManager>
+    //   )}
+    // </>
+    _jsxs(Popover, {
+      open: isOpenState,
+      onOpenChange: setIsOpenState,
+      arrowRef: arrowRef,
+      showArrow: showArrow,
+      placement: placement,
+      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
+        onClick: () => setIsOpenState(v => !v),
+        children: target
+      }), /*#__PURE__*/_jsx(PopoverContent, {
+        setState: setIsOpenState,
+        arrowRef: arrowRef,
+        showArrow: showArrow,
+        ...rest
+      })]
+    })
+  );
 };
 export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:absolute;width:1.5rem;height:1.5rem;transform:rotate(45deg);border:.0625rem solid rgba(0,0,0,0);background:inherit}.bpk-popover-portal[data-popper-placement=top] .bpk-popover__arrow{bottom:-0.6875rem;border-right-color:#e0e4e9;border-bottom-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=right] .bpk-popover__arrow{left:-0.6875rem;border-bottom-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=bottom] .bpk-popover__arrow{top:-0.6875rem;border-top-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=left] .bpk-popover__arrow{right:-0.6875rem;border-top-color:#e0e4e9;border-right-color:#e0e4e9}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir=rtl] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/PopperUtils.js

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager, arrow, FloatingArrow } from '@floating-ui/react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { ARROW_ID } from "./constants";
+import STYLES from "./BpkPopover.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export function usePopover({
+  arrowRef,
+  modal,
+  onOpenChange: setControlledOpen,
+  open: controlledOpen,
+  placement,
+  showArrow
+} = {}) {
+  const open = controlledOpen;
+  const setOpen = setControlledOpen;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [showArrow && offset(14), arrow({
+      element: arrowRef
+    }), flip({
+      fallbackAxisSideDirection: 'start'
+    })]
+  });
+  const {
+    context
+  } = data;
+  const click = useClick(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const interactions = useInteractions([click, dismiss, role]);
+  return React.useMemo(() => ({
+    open,
+    setOpen,
+    ...interactions,
+    ...data,
+    modal
+  }), [open, setOpen, interactions, data, modal]);
+}
+const PopoverContext = /*#__PURE__*/React.createContext(null);
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+  return context;
+};
+export function Popover({
+  children,
+  modal = false,
+  ...restOptions
+}) {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({
+    modal,
+    ...restOptions
+  });
+  return /*#__PURE__*/_jsx(PopoverContext.Provider, {
+    value: popover,
+    children: children
+  });
+}
+export const PopoverTrigger = /*#__PURE__*/React.forwardRef(({
+  asChild = false,
+  children,
+  ...props
+}, propRef) => {
+  const context = usePopoverContext();
+  const childrenRef = children.ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, context.getReferenceProps({
+      ref,
+      ...props,
+      ...children.props,
+      'data-state': context.open ? 'open' : 'closed'
+    }));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref
+    // The user can style the trigger based on the state
+    ,
+    "data-state": context.open ? 'open' : 'closed',
+    ...context.getReferenceProps(props),
+    children: children
+  });
+});
+const EVENT_SOURCES = {
+  CLOSE_BUTTON: 'CLOSE_BUTTON',
+  CLOSE_LINK: 'CLOSE_LINK'
+};
+const bindEventSource = (source, callback) => event => {
+  if (event.persist) {
+    event.persist();
+  }
+  callback(event, {
+    source
+  });
+};
+export const PopoverContent = /*#__PURE__*/React.forwardRef(({
+  arrowRef,
+  children,
+  className = null,
+  closeButtonIcon = true,
+  closeButtonProps = {},
+  closeButtonText,
+  id,
+  isOpen = false,
+  label,
+  labelAsTitle = false,
+  onClose,
+  padded = true,
+  placement = 'bottom',
+  setState: setIsOpenState,
+  showArrow,
+  target,
+  ...rest
+}, propRef) => {
+  // const [isOpenState, setIsOpenState] = React.useState(isOpen);
+
+  const {
+    context: floatingContext,
+    ...context
+  } = usePopoverContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const classNames = getClassName('bpk-popover', className);
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
+  const labelId = `bpk-popover-label-${id}`;
+  if (!floatingContext.open) return null;
+  return /*#__PURE__*/_jsx(FloatingPortal, {
+    children: /*#__PURE__*/_jsx(FloatingFocusManager, {
+      context: floatingContext,
+      modal: context.modal,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: ref,
+        style: {
+          ...context.floatingStyles
+        },
+        ...context.getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-popover--appear'),
+          appearActiveClassName: getClassName('bpk-popover--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: -1,
+            role: "dialog",
+            "aria-labelledby": labelId,
+            className: classNames,
+            ...rest,
+            children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: floatingContext,
+              id: ARROW_ID
+              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+              ,
+              className: getClassName('bpk-popover__arrow'),
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: 0.0625
+            }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
+              className: getClassName('bpk-popover__header'),
+              children: [/*#__PURE__*/_jsx(BpkText, {
+                tagName: "h2",
+                id: labelId,
+                textStyle: TEXT_STYLES.label1,
+                children: label
+              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
+                label: closeButtonText,
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps
+              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })]
+            }) : /*#__PURE__*/_jsx("span", {
+              id: labelId,
+              className: getClassName('bpk-popover__label'),
+              children: label
+            }), /*#__PURE__*/_jsx("div", {
+              className: bodyClassNames,
+              children: children
+            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
+              className: getClassName('bpk-popover__footer'),
+              children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: () => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })
+            })]
+          })
+        })
+      })
+    })
+  });
+});

package/bpk-component-popover/src/themeAttributes.js

@@ -14,5 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.0.0-premajor",
+  "version": "34.0.0-premajor.2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,7 +22,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@react-google-maps/api": "^2.12.0",

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -1,222 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { createPopper } from '@popperjs/core';
-import focusStore from 'a11y-focus-store';
-import { Portal, cssModules } from "../../bpk-react-utils";
-import BpkPopover from "./BpkPopover";
-import keyboardFocusScope from "./keyboardFocusScope";
-import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-class BpkPopoverPortal extends Component {
-  constructor() {
-    super();
-    this.popper = null;
-    this.previousTargetElement = null;
-  }
-
-  // onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
-  //   this.position(popoverElement, targetElement);
-  // };
-
-  // The order of events here is as follows:
-  // - `onClose` is called by `Portal`
-  // - The consumer changes `isOpen` to `false`
-  // - `beforeClose` is called by `Portal`
-  // - `beforeClose` calls the `done` callback which closes the `Portal`
-
-  // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
-  // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
-  // onClose = (event: Object, information: { source: string }) => {
-  //   // If the user has clicked outside the popover then we don't want focus to be restored
-  //   // otherwise it will be stolen back from the element they clicked on.
-  //   // Here we suppress restoring focus before the consumer is told about the close and updates state.
-  //   this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
-
-  //   if (this.props.onClose) {
-  //     this.props.onClose(event, information);
-  //   }
-  // };
-
-  // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
-  // As a result, `onClose` is called first, followed by `beforeClose`.
-  // beforeClose = (done: () => void) => {
-  //   if (this.popper) {
-  //     this.popper.destroy();
-  //     this.popper = null;
-  //     this.previousTargetElement = null;
-  //   }
-
-  //   keyboardFocusScope.unscopeFocus();
-  //   if (!this.suppressRestoreFocus) {
-  //     focusStore.restoreFocus();
-  //     this.suppressRestoreFocus = false;
-  //   }
-
-  //   done();
-  // };
-
-  // position(popoverElement: HTMLElement, targetElement: ?HTMLElement) {
-  //   if (!targetElement) {
-  //     return;
-  //   }
-
-  //   const targetElementHasChanged =
-  //     targetElement !== this.previousTargetElement;
-
-  //   if (targetElementHasChanged && this.popper) {
-  //     this.popper.destroy();
-  //     this.popper = null;
-  //   }
-
-  //   // Custom modifier that makes the arrow display at the edge of the target.
-  //   const applyArrowHide = {
-  //     name: 'applyArrowHide',
-  //     enabled: true,
-  //     phase: 'write',
-  //     fn({ state }) {
-  //       const { arrow } = state.elements;
-  //       if (arrow) {
-  //         if (state.modifiersData.arrow.centerOffset !== 0) {
-  //           arrow.setAttribute('data-hide', '');
-  //         } else {
-  //           arrow.removeAttribute('data-hide');
-  //         }
-  //       }
-  //     },
-  //   };
-
-  //   // The default modifiers for the popper
-  //   // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
-  //   // which can cause blurriness in Safari and Chrome.
-  //   const stdModifiers = [
-  //     {
-  //       name: 'computeStyles',
-  //       options: {
-  //         gpuAcceleration: false,
-  //       },
-  //     },
-  //     {
-  //       name: 'offset',
-  //       options: {
-  //         offset: [0, 17],
-  //       },
-  //     },
-  //     applyArrowHide,
-  //   ];
-
-  //   if (!this.popper) {
-  //     this.popper = createPopper(targetElement, popoverElement, {
-  //       placement: this.props.placement,
-  //       onFirstUpdate: () => {
-  //         if (targetElement) {
-  //           targetElement.focus();
-  //         }
-  //         focusStore.storeFocus();
-  //         keyboardFocusScope.scopeFocus(popoverElement);
-  //       },
-  //       modifiers: this.props.popperModifiers
-  //         ? [...this.props.popperModifiers, ...stdModifiers]
-  //         : stdModifiers,
-  //     });
-  //   }
-
-  //   this.previousTargetElement = targetElement;
-  //   if (this.popper) {
-  //     this.popper.update();
-  //   }
-  // }
-
-  render() {
-    const {
-      // isOpen,
-      // onClose,
-      // placement,
-      // popperModifiers,
-      portalClassName,
-      // portalStyle,
-      // renderTarget,
-      // target,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-popover-portal', portalClassName);
-
-    // if (portalClassName) {
-    //   classNames.push(portalClassName);
-    // }
-
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: /*#__PURE__*/_jsx(BpkPopover, {
-        className: classNames,
-        onClose: this.onClose,
-        ...rest
-      })
-    });
-  }
-}
-export const propTypes = {
-  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
-  children: PropTypes.node.isRequired,
-  closeButtonText: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeButtonIcon: PropTypes.bool,
-  closeButtonProps: PropTypes.object,
-  labelAsTitle: PropTypes.bool,
-  padded: PropTypes.bool,
-  // BpkPopoverPortal additional props
-  /**
-   * In order to attach the popover to a regular DOM element, provide a function which returns it to `target`.
-   * `target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
-   */
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  portalStyle: PropTypes.object,
-  portalClassName: PropTypes.string,
-  renderTarget: PropTypes.func,
-  /**
-   * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
-   * You can achieve various behaviours such as allowing the popover to overflow the viewport etc.
-   */
-  popperModifiers: PropTypes.arrayOf(PropTypes.object)
-};
-export const defaultProps = {
-  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
-  className: null,
-  closeButtonIcon: true,
-  closeButtonProps: null,
-  labelAsTitle: false,
-  padded: true,
-  // BpkPopoverPortal additional props
-  placement: 'bottom',
-  portalStyle: null,
-  portalClassName: null,
-  renderTarget: null,
-  popperModifiers: null
-};
-BpkPopoverPortal.propTypes = {
-  ...propTypes
-};
-BpkPopoverPortal.defaultProps = {
-  ...defaultProps
-};
-export default BpkPopoverPortal;

package/bpk-component-popover/src/keyboardFocusScope.js

@@ -1,76 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// This code is based on that from `a11y-focus-scope`.
-// Instead of completely preventing focus leaving the target element,
-// it only prevents it leaving due to keyboard events.
-// Clicks outside the target element will move focus as normal.
-
-import focusin from 'focusin';
-import tabbable from 'tabbable';
-let polyfilled = false;
-let focusTrapped = false;
-const init = element => {
-  // lazily polyfill focusin for firefox
-  if (!polyfilled) {
-    focusin.polyfill();
-    polyfilled = true;
-  }
-  const focus = () => {
-    (tabbable(element)[0] || element).focus();
-  };
-  const enableFocusTrapping = () => {
-    focusTrapped = true;
-  };
-  const disableFocusTrapping = () => {
-    focusTrapped = false;
-  };
-  const checkFocus = event => {
-    if (!focusTrapped) {
-      return;
-    }
-    if (element !== event.target && !element.contains(event.target)) {
-      focus();
-    }
-  };
-  focus();
-
-  // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
-  // This means that focus is trapped when pressing the tab key, but not trapped for other navigation events such as mouse clicks.
-  document.addEventListener('keydown', enableFocusTrapping);
-  document.addEventListener('focusin', checkFocus);
-  document.addEventListener('keyup', disableFocusTrapping);
-  return () => {
-    document.removeEventListener('keydown', enableFocusTrapping);
-    document.removeEventListener('focusin', checkFocus);
-    document.removeEventListener('keyup', disableFocusTrapping);
-  };
-};
-let teardownFn;
-const scopeFocus = element => {
-  if (teardownFn) teardownFn();
-  teardownFn = init(element);
-};
-const unscopeFocus = () => {
-  if (teardownFn) teardownFn();
-  teardownFn = null;
-};
-export default {
-  scopeFocus,
-  unscopeFocus
-};