@skyscanner/backpack-web 33.4.0 → 34.0.0-premajor.1

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -22,33 +22,43 @@ import { useEffect, useRef } from 'react';
 import BpkCloseButton from "../../../bpk-component-close-button";
 import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
 import { cssModules, withDefaultProps } from "../../../bpk-react-utils";
+import { MODAL_STYLING } from "../BpkModalInner";
 import STYLES from "./BpKModal.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const Header = ({
   closeLabel,
   id,
+  modalStyle,
   onClose,
   title
 }) => {
   if (title) {
     return /*#__PURE__*/_jsxs("div", {
       id: id,
-      className: getClassName('bpk-modal__header-title'),
+      className: [getClassName('bpk-modal__header-title'), getClassName(`bpk-modal__header-title-style--${modalStyle}`)].join(' '),
       children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-modal__header-title-container'),
         children: /*#__PURE__*/_jsx(Heading, {
           children: title
         })
-      }), /*#__PURE__*/_jsx(BpkCloseButton, {
+      }), /*#__PURE__*/_jsx(BpkCloseButton
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
+        className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
         label: closeLabel,
         onClick: onClose
       })]
     });
   }
   return /*#__PURE__*/_jsx("div", {
-    className: getClassName('bpk-modal__button-container'),
-    children: /*#__PURE__*/_jsx(BpkCloseButton, {
+    className: [getClassName('bpk-modal__button-container'), getClassName(`bpk-modal__button-container-style--${modalStyle}`)].join(' '),
+    children: /*#__PURE__*/_jsx(BpkCloseButton
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
+      className: getClassName(`bpk-modal__close-button-style--${modalStyle}`),
       label: closeLabel,
       onClick: onClose
     })
@@ -56,8 +66,7 @@ const Header = ({
 };
 const Heading = withDefaultProps(BpkText, {
   textStyle: TEXT_STYLES.label1,
-  tagName: 'h2',
-  className: getClassName('bpk-modal__title')
+  tagName: 'h2'
 });
 // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
 const dialogSupported = typeof HTMLDialogElement === 'function';
@@ -78,6 +87,7 @@ export const BpkModalV2 = props => {
     fullScreenOnDesktop,
     id,
     isOpen,
+    modalStyle = MODAL_STYLING.default,
     noFullScreenOnMobile,
     onClose,
     padded,
@@ -130,7 +140,7 @@ export const BpkModalV2 = props => {
     };
   }, [id, isOpen, onClose]);
   const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
-  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
+  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded', modalStyle === MODAL_STYLING.surfaceContrast && 'bpk-modal__container--surface-contrast');
   return isOpen ? /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
     children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
@@ -148,7 +158,8 @@ export const BpkModalV2 = props => {
         id: `${id}-title`,
         title: title,
         closeLabel: closeLabel,
-        onClose: onClose
+        onClose: onClose,
+        modalStyle: modalStyle
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames,
         children: children

package/bpk-component-navigation-bar/index.js

@@ -17,8 +17,8 @@
  */
 
 import BpkNavigationBar, { BAR_STYLES } from "./src/BpkNavigationBar";
-import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import BpkNavigationBarButtonLink from "./src/BpkNavigationBarButtonLink";
+import BpkNavigationBarIconButton from "./src/BpkNavigationBarIconButton";
 import themeAttributes from "./src/themeAttributes";
 export { BpkNavigationBarIconButton, BpkNavigationBarButtonLink, themeAttributes, BAR_STYLES };
 export default BpkNavigationBar;

package/bpk-component-navigation-bar/src/BpkNavigationBar.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkNavigationBar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassNames = cssModules(STYLES);
@@ -47,11 +47,13 @@ const BpkNavigationBar = props => {
     children: [leadingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__leading-item', `bpk-navigation-bar__leading-item--${barStyle}`),
       children: leadingButton
-    }), typeof title === 'string' ? /*#__PURE__*/_jsx(BpkText, {
-      id: titleId,
-      textStyle: TEXT_STYLES.heading5,
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx("span", {
       className: getClassNames('bpk-navigation-bar__title', `bpk-navigation-bar__title--${barStyle}`),
-      children: title
+      children: /*#__PURE__*/_jsx(BpkText, {
+        id: titleId,
+        textStyle: TEXT_STYLES.heading5,
+        children: title
+      })
     }) : title, trailingButton && /*#__PURE__*/_jsx("div", {
       className: getClassNames('bpk-navigation-bar__trailing-item', `bpk-navigation-bar__trailing-item-${barStyle}`),
       children: trailingButton

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -28,7 +28,10 @@ const BpkNavigationBarButtonLink = ({
   children,
   className,
   ...rest
-}) => /*#__PURE__*/_jsx(BpkButtonLink, {
+}) => /*#__PURE__*/_jsx(BpkButtonLink
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-navigation-bar-button-link', `bpk-navigation-bar-button-link--${barStyle}`, className),
   ...rest,
   children: children

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -29,7 +29,10 @@ const BpkNavigationBarIconButton = ({
   icon,
   ...rest
 }) => /*#__PURE__*/_jsx(BpkIconButton, {
-  customIcon: icon,
+  customIcon: icon
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  ,
   className: getClassName('bpk-navigation-bar-icon-button', `bpk-navigation-bar-icon-button--${barStyle}`, className),
   ...rest
 });

package/bpk-component-nudger/index.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import BpkNudger from "./src/BpkNudger";
 import BpkConfigurableNudger from "./src/BpkConfigurableNudger";
+import BpkNudger from "./src/BpkNudger";
 import themeAttributes from "./src/themeAttributes";
 export default BpkNudger;
 export { themeAttributes, BpkConfigurableNudger };

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -59,9 +59,15 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(decrementValue(value)),
       disabled: minButtonDisabled,
       title: decreaseButtonLabel,
-      "aria-controls": id,
+      "aria-controls": id
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedMinusIcon, {
+      children: /*#__PURE__*/_jsx(AlignedMinusIcon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: minusIconClassNames
       })
     }), /*#__PURE__*/_jsx("input", {
@@ -79,9 +85,15 @@ const BpkConfigurableNudger = ({
       onClick: () => onChange(incrementValue(value)),
       disabled: maxButtonDisabled,
       title: increaseButtonLabel,
-      "aria-controls": id,
+      "aria-controls": id
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: getClassName('bpk-nudger__button'),
-      children: /*#__PURE__*/_jsx(AlignedPlusIcon, {
+      children: /*#__PURE__*/_jsx(AlignedPlusIcon
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: plusIconClassNames
       })
     })]

package/bpk-component-nudger/src/BpkNudger.js

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import BpkConfigurableNudger from "./BpkConfigurableNudger";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,7 +40,11 @@ const BpkNudger = ({
   const classNames = getClassName(title && 'bpk-nudger__container');
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [title && /*#__PURE__*/_jsxs(BpkLabel, {
+    children: [title &&
+    /*#__PURE__*/
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsxs(BpkLabel, {
       htmlFor: id,
       className: getClassName('bpk-nudger__label'),
       children: [icon, /*#__PURE__*/_jsxs("span", {
@@ -51,7 +55,11 @@ const BpkNudger = ({
         children: [/*#__PURE__*/_jsx(BpkText, {
           textStyle: TEXT_STYLES.heading5,
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        }), subtitle &&
+        /*#__PURE__*/
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        _jsx(BpkText, {
           className: getClassName('bpk-nudger__label--subtitle'),
           children: subtitle
         })]
@@ -61,7 +69,10 @@ const BpkNudger = ({
       compareValues: compareValues,
       incrementValue: incrementValue,
       decrementValue: decrementValue,
-      formatValue: formatValue,
+      formatValue: formatValue
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      ,
       className: className,
       buttonType: buttonType,
       id: id,

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971}.bpk-page-indicator__indicator--active-overImage{background-color:#fff}
+.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage{background-color:rgba(255,255,255,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage{background-color:#fff;pointer-events:none}

package/bpk-component-page-indicator/src/NavButton.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,8 +18,8 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import BpkPaginationPage from "./BpkPaginationPage";
 import BpkPaginationBreak from "./BpkPaginationBreak";
+import BpkPaginationPage from "./BpkPaginationPage";
 import STYLES from "./BpkPaginationList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,19 +17,25 @@
  */
 
 import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPaginationNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedArrowLeftIcon = withRtlSupport(ArrowLeftIcon);
 const AlignedArrowRightIcon = withRtlSupport(ArrowRightIcon);
-const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon, {
+const nudgerIcon = forward => forward ? /*#__PURE__*/_jsx(AlignedArrowRightIcon
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-pagination-nudger__icon')
-}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon, {
+}) : /*#__PURE__*/_jsx(AlignedArrowLeftIcon
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-pagination-nudger__icon')
 });
 const BpkPaginationNudger = props => {
@@ -42,7 +48,10 @@ const BpkPaginationNudger = props => {
   return /*#__PURE__*/_jsxs(BpkButtonV2, {
     type: BUTTON_TYPES.link,
     onClick: onNudge,
-    disabled: disabled,
+    disabled: disabled
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: getClassName('bpk-pagination-nudger'),
     children: [nudgerIcon(forward), /*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-pagination-nudger__text--hidden'),

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -35,7 +35,10 @@ const BpkPaginationPage = props => {
   }
   return /*#__PURE__*/_jsx(BpkButtonV2, {
     type: !isSelected ? BUTTON_TYPES.primaryOnDark : BUTTON_TYPES.primary,
-    onClick: onSelect,
+    onClick: onSelect
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: classNames.join(' '),
     "aria-label": pageLabel(page, isSelected),
     "aria-current": isSelected,

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -15,10 +15,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
 import BpkInput, { INPUT_TYPES } from "../../bpk-component-input";
 import BpkLabel from "../../bpk-component-label";
 import BpkSelect from "../../bpk-component-select";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPhoneInput.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -86,12 +86,17 @@ const BpkPhoneInput = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       children: [/*#__PURE__*/_jsx(BpkLabel, {
         htmlFor: dialingCodeProps.id,
-        disabled: disabled,
+        disabled: disabled
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-phone-input__label'),
         children: dialingCodeProps.label
       }), /*#__PURE__*/_jsx(BpkSelect, {
         ...commonProps,
         ...dialingCodeProps,
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
         className: getClassName(dialingCodeProps.className),
         wrapperClassName: getClassName(dialingCodeProps.wrapperClassName),
         value: dialingCode,
@@ -113,7 +118,10 @@ const BpkPhoneInput = props => {
       className: getClassName('bpk-phone-input__phone-number'),
       children: [/*#__PURE__*/_jsx(BpkLabel, {
         htmlFor: id,
-        disabled: disabled,
+        disabled: disabled
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-phone-input__label'),
         children: label
       }), /*#__PURE__*/_jsx(BpkInput, {
@@ -123,7 +131,10 @@ const BpkPhoneInput = props => {
         name: name,
         value: displayValue,
         type: INPUT_TYPES.tel,
-        onChange: handleChange,
+        onChange: handleChange
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName(className)
       })]
     })]

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,14 +14,23 @@
  * 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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { BpkButtonLink } from "../../bpk-component-link";
+ */
+
+import { useState, cloneElement, useRef } from 'react';
+import { useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingArrow, arrow } 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";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
@@ -35,107 +44,128 @@ const bindEventSource = (source, callback) => event => {
     source
   });
 };
-const BpkPopover = 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 arrowRef = useRef(null);
   const {
-    children,
-    className,
-    closeButtonIcon,
-    closeButtonProps,
-    closeButtonText,
-    id,
-    label,
-    labelAsTitle,
-    onClose,
-    padded,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-popover')];
-  const bodyClassNames = [];
-
-  // outer classNames
-  if (className) {
-    classNames.push(className);
-  }
+    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);
 
-  // inner classNames
-  if (padded) {
-    bodyClassNames.push(getClassName('bpk-popover__body--padded'));
-  }
+  // Merge all the interactions into prop getters
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([click, dismiss]);
+  const targetElement = /*#__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__*/_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.join(' '),
-      ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        id: ARROW_ID,
-        className: getClassName('bpk-popover__arrow'),
-        role: "presentation",
-        "data-popper-arrow": true
-      }), 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, {
-          className: getClassName('bpk-popover__close-button'),
-          label: closeButtonText,
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose),
-          ...closeButtonProps
-        }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
-        })]
-      }) : /*#__PURE__*/_jsx("span", {
-        id: labelId,
-        className: getClassName('bpk-popover__label'),
-        children: label
-      }), /*#__PURE__*/_jsx("div", {
-        className: bodyClassNames.join(' '),
-        children: children
-      }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
-        className: getClassName('bpk-popover__footer'),
-        children: /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetElement, 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: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: context,
+              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
+              })
+            })]
+          })
         })
-      })]
-    })
+      })
+    })]
   });
 };
-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
-};
 export default BpkPopover;