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

package/bpk-scrim-utils/src/withScrimmedPortal.js

@@ -18,8 +18,8 @@
 
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import withScrim from "./withScrim";
 import BpkScrim from "./BpkScrim";
+import withScrim from "./withScrim";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getPortalElement = target => {
   const portalElement = target && typeof target === 'function' ? target() : null;

package/bpk-theming/src/BpkThemeProvider.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const uniq = (arr = []) => {
   const seen = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.4.0",
+  "version": "34.0.0-premajor.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,9 +22,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@floating-ui/react": "^0.26.12",
+    "@popperjs/core": "^2.11.8",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.5.3",
+    "@skyscanner/bpk-foundations-web": "^17.9.0",
     "@skyscanner/bpk-svgs": "^19.1.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",

package/unstable__bpk-mixins/_chips.scss

@@ -237,4 +237,13 @@
     color: tokens.$bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  &--icon-only {
+    padding-inline-end: tokens.bpk-spacing-md();
+    padding-inline-start: tokens.bpk-spacing-md();
+
+    &__leading-accessory-view {
+      @include margins.bpk-margin-trailing(0);
+    }
+  }
 }

package/bpk-component-button/src/commonButtonTests.js

@@ -1,133 +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 { render } from '@testing-library/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const commonButtonTests = ButtonToTest => {
-  describe('ButtonToTest', () => {
-    it('should render correctly', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "href" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "disabled" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        disabled: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "large" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with an "iconOnly" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        iconOnly: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should respect the class names entered as a string', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        className: "custom-class-1 custom-class-2",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should add only bpk specific classes if className prop is set to empty string', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        className: "",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "blank" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        blank: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "rel" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        rel: "rel-attr",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "blank" and "rel" attributes', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        blank: true,
-        rel: "rel-overwrite",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "disabled" and "href" attributes', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        disabled: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-};
-
-// We export these to reuse them in other tests for buttons.
-// eslint-disable-next-line jest/no-export
-export default commonButtonTests;

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

@@ -1,216 +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 keyboardFocusScope from "./keyboardFocusScope";
-import BpkPopover from "./BpkPopover";
-import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-class BpkPopoverPortal extends Component {
-  constructor() {
-    super();
-    this.popper = null;
-    this.previousTargetElement = null;
-  }
-  onRender = (popoverElement, targetElement) => {
-    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, information) => {
-    // 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 => {
-    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, targetElement) {
-    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')];
-    if (portalClassName) {
-      classNames.push(portalClassName);
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [typeof target !== 'function' && target, /*#__PURE__*/_jsx(Portal, {
-        beforeClose: this.beforeClose,
-        className: classNames.join(' '),
-        isOpen: isOpen,
-        onClose: this.onClose,
-        onRender: this.onRender,
-        style: portalStyle,
-        renderTarget: renderTarget,
-        target: target,
-        children: /*#__PURE__*/_jsx(BpkPopover, {
-          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 tabbable from 'tabbable';
-import focusin from 'focusin';
-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
-};