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

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,10 +14,17 @@
  * 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 { 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";
@@ -37,27 +44,25 @@ const bindEventSource = (source, 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 arrowRef = useRef(null);
   const {
     context,
     floatingStyles,
@@ -65,7 +70,12 @@ const BpkPopover = props => {
   } = useFloating({
     open: isOpenState,
     onOpenChange: setIsOpenState,
-    middleware: [offset(17), popperModifiers],
+    placement,
+    middleware: [showArrow && offset(14), flip({
+      fallbackAxisSideDirection: 'start'
+    }), arrow({
+      element: arrowRef
+    })],
     whileElementsMounted: autoUpdate
   });
   const click = useClick(context);
@@ -76,12 +86,7 @@ const BpkPopover = props => {
     getFloatingProps,
     getReferenceProps
   } = useInteractions([click, dismiss]);
-
-  // const getTargetElement = () => typeof target === 'function' ? target() : (target as JSXElementWithRefProps)?.ref.current
-
-  // const targetEl = cloneElement(getRenderTarget(renderTarget), { ...getReferenceProps(), ref: refs.setReference });
-  // console.error('renderTarget', renderTarget());
-  const targetEl = /*#__PURE__*/cloneElement(target, {
+  const targetElement = /*#__PURE__*/cloneElement(target, {
     ...getReferenceProps(),
     ref: refs.setReference
   });
@@ -89,7 +94,7 @@ const BpkPopover = props => {
   const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [targetEl, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
+    children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
       context: context,
       modal: false,
       children: /*#__PURE__*/_jsx("div", {
@@ -102,32 +107,38 @@ const BpkPopover = props => {
           transitionTimeout: 200,
           children: /*#__PURE__*/_jsxs("section", {
             id: id,
-            tabIndex: "-1",
+            tabIndex: -1,
             role: "dialog",
             "aria-labelledby": labelId,
             className: classNames,
             ...rest,
-            children: [labelAsTitle ? /*#__PURE__*/_jsxs("header", {
+            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
-              // TODO: className to be removed
-              // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-              , {
-                className: getClassName('bpk-popover__close-button'),
+              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
                 label: closeButtonText,
                 onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose);
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps
               }) : /*#__PURE__*/_jsx(BpkButtonLink, {
                 onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps,
@@ -144,7 +155,7 @@ const BpkPopover = props => {
               className: getClassName('bpk-popover__footer'),
               children: /*#__PURE__*/_jsx(BpkButtonLink, {
                 onClick: () => {
-                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose);
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose);
                   setIsOpenState(false);
                 },
                 ...closeButtonProps,
@@ -157,29 +168,4 @@ const BpkPopover = props => {
     })]
   });
 };
-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;

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/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.1",
   "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
-};