@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

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

@@ -14,53 +14,29 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
-
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { BpkButtonLink } from '../../bpk-component-link';
-import BpkCloseButton from '../../bpk-component-close-button';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkPopover.module.scss';
-import { ARROW_ID } from './constants';
-
+ */import PropTypes from 'prop-types';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { BpkButtonLink } from "../../bpk-component-link";
+import BpkCloseButton from "../../bpk-component-close-button";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkPopover.module.css";
+import { ARROW_ID } from "./constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
-  CLOSE_LINK: 'CLOSE_LINK',
+  CLOSE_LINK: 'CLOSE_LINK'
 };
-
-const bindEventSource = (source, callback) => (event) => {
+const bindEventSource = (source, callback) => event => {
   if (event.persist) {
     event.persist();
   }
-
-  callback(event, { source });
-};
-
-export type Props = {
-  children: Node,
-  closeButtonIcon: boolean,
-  closeButtonText: string,
-  id: string,
-  label: string,
-  labelAsTitle: boolean,
-  onClose: (
-    event: SyntheticEvent<>,
-    props: { source: $Values<typeof EVENT_SOURCES> },
-  ) => mixed,
-  padded: boolean,
-  className: ?string,
-  closeButtonProps: ?Object,
+  callback(event, {
+    source
+  });
 };
-
-const BpkPopover = (props: Props) => {
+const BpkPopover = props => {
   const {
     children,
     className,
@@ -74,7 +50,6 @@ const BpkPopover = (props: Props) => {
     padded,
     ...rest
   } = props;
-
   const classNames = [getClassName('bpk-popover')];
   const bodyClassNames = [];
 
@@ -87,79 +62,58 @@ const BpkPopover = (props: Props) => {
   if (padded) {
     bodyClassNames.push(getClassName('bpk-popover__body--padded'));
   }
-
   const labelId = `bpk-popover-label-${id}`;
-
-  return (
-    <TransitionInitialMount
-      appearClassName={getClassName('bpk-popover--appear')}
-      appearActiveClassName={getClassName('bpk-popover--appear-active')}
-      transitionTimeout={200}
-    >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <section
-        id={id}
-        tabIndex="-1"
-        role="dialog"
-        aria-labelledby={labelId}
-        className={classNames.join(' ')}
-        {...rest}
-      >
-        <span
-          id={ARROW_ID}
-          className={getClassName('bpk-popover__arrow')}
-          role="presentation"
-          data-popper-arrow
-        />
-        {labelAsTitle ? (
-          <header className={getClassName('bpk-popover__header')}>
-            <BpkText tagName="h2" id={labelId} textStyle={TEXT_STYLES.label1}>
-              {label}
-            </BpkText>
-            &nbsp;
-            {closeButtonIcon ? (
-              <BpkCloseButton
-                className={getClassName('bpk-popover__close-button')}
-                label={closeButtonText}
-                onClick={bindEventSource(
-                  EVENT_SOURCES.CLOSE_BUTTON,
-                  props.onClose,
-                )}
-                {...closeButtonProps}
-              />
-            ) : (
-              <BpkButtonLink
-                onClick={bindEventSource(
-                  EVENT_SOURCES.CLOSE_LINK,
-                  props.onClose,
-                )}
-                {...closeButtonProps}
-              >
-                {closeButtonText}
-              </BpkButtonLink>
-            )}
-          </header>
-        ) : (
-          <span id={labelId} className={getClassName('bpk-popover__label')}>
-            {label}
-          </span>
-        )}
-        <div className={bodyClassNames.join(' ')}>{children}</div>
-        {!labelAsTitle && (
-          <footer className={getClassName('bpk-popover__footer')}>
-            <BpkButtonLink
-              onClick={bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose)}
-              {...closeButtonProps}
-            >
-              {closeButtonText}
-            </BpkButtonLink>
-          </footer>
-        )}
-      </section>
-    </TransitionInitialMount>
-  );
+  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
+        })
+      })]
+    })
+  });
 };
-
 export const propTypes = {
   children: PropTypes.node.isRequired,
   closeButtonText: PropTypes.string.isRequired,
@@ -170,18 +124,19 @@ export const propTypes = {
   closeButtonIcon: PropTypes.bool,
   closeButtonProps: PropTypes.object,
   labelAsTitle: PropTypes.bool,
-  padded: PropTypes.bool,
+  padded: PropTypes.bool
 };
-
 export const defaultProps = {
   className: null,
   closeButtonIcon: true,
   closeButtonProps: null,
   labelAsTitle: false,
-  padded: true,
+  padded: true
 };
-
-BpkPopover.propTypes = { ...propTypes };
-BpkPopover.defaultProps = { ...defaultProps };
-
-export default BpkPopover;
+BpkPopover.propTypes = {
+  ...propTypes
+};
+BpkPopover.defaultProps = {
+  ...defaultProps
+};
+export default BpkPopover;

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

@@ -14,49 +14,29 @@
  * 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.
- */
-
-/* @flow strict */
-
-import { createPopper } from '@popperjs/core';
+ */import { createPopper } from '@popperjs/core';
 import PropTypes from 'prop-types';
-import type { Node } from 'react';
 import { Component } from 'react';
 import focusStore from 'a11y-focus-store';
-
-import { Portal, cssModules } from '../../bpk-react-utils';
-
-import keyboardFocusScope from './keyboardFocusScope';
-import STYLES from './BpkPopover.module.scss';
-import BpkPopover, {
-  propTypes as popoverPropTypes,
-  defaultProps as popoverDefaultProps,
-  type Props as PopoverProps,
-} from './BpkPopover';
-
+import { Portal, cssModules } from "../../bpk-react-utils";
+import keyboardFocusScope from "./keyboardFocusScope";
+import STYLES from "./BpkPopover.module.css";
+import BpkPopover, { propTypes as popoverPropTypes, defaultProps as popoverDefaultProps } from "./BpkPopover";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-export type Props = {
-  ...$Exact<PopoverProps>,
-  target: (() => ?HTMLElement) | Node,
-  isOpen: boolean,
-  placement: ?('top' | 'right' | 'bottom' | 'left'),
-  portalStyle: ?Object,
-  portalClassName: ?string,
-  renderTarget: ?() => ?HTMLElement,
-  popperModifiers: ?Array<Object>,
-};
-
 export const propTypes = {
   ...popoverPropTypes,
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  portalStyle: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
   portalClassName: PropTypes.string,
   renderTarget: PropTypes.func,
-  popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
+  popperModifiers: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
 };
 
 export const defaultProps = {
@@ -65,28 +45,17 @@ export const defaultProps = {
   portalStyle: null,
   portalClassName: null,
   renderTarget: null,
-  popperModifiers: null,
+  popperModifiers: null
 };
-
-class BpkPopoverPortal extends Component<Props> {
-  popper: ?typeof createPopper;
-
-  suppressRestoreFocus: boolean;
-
-  previousTargetElement: ?HTMLElement;
-
+class BpkPopoverPortal extends Component {
   static propTypes = propTypes;
-
   static defaultProps = defaultProps;
-
   constructor() {
     super();
-
     this.popper = null;
     this.previousTargetElement = null;
   }
-
-  onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
+  onRender = (popoverElement, targetElement) => {
     this.position(popoverElement, targetElement);
   };
 
@@ -98,12 +67,11 @@ class BpkPopoverPortal extends Component<Props> {
 
   // `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 }) => {
+  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);
     }
@@ -111,30 +79,24 @@ class BpkPopoverPortal extends Component<Props> {
 
   // `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) => {
+  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: HTMLElement, targetElement: ?HTMLElement) {
+  position(popoverElement, targetElement) {
     if (!targetElement) {
       return;
     }
-
-    const targetElementHasChanged =
-      targetElement !== this.previousTargetElement;
-
+    const targetElementHasChanged = targetElement !== this.previousTargetElement;
     if (targetElementHasChanged && this.popper) {
       this.popper.destroy();
       this.popper = null;
@@ -145,8 +107,12 @@ class BpkPopoverPortal extends Component<Props> {
       name: 'applyArrowHide',
       enabled: true,
       phase: 'write',
-      fn({ state }) {
-        const { arrow } = state.elements;
+      fn({
+        state
+      }) {
+        const {
+          arrow
+        } = state.elements;
         if (arrow) {
           if (state.modifiersData.arrow.centerOffset !== 0) {
             arrow.setAttribute('data-hide', '');
@@ -154,28 +120,23 @@ class BpkPopoverPortal extends Component<Props> {
             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,
-    ];
-
+    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,
@@ -186,18 +147,14 @@ class BpkPopoverPortal extends Component<Props> {
           focusStore.storeFocus();
           keyboardFocusScope.scopeFocus(popoverElement);
         },
-        modifiers: this.props.popperModifiers
-          ? [...this.props.popperModifiers, ...stdModifiers]
-          : stdModifiers,
+        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
       });
     }
-
     this.previousTargetElement = targetElement;
     if (this.popper) {
       this.popper.update();
     }
   }
-
   render() {
     const {
       isOpen,
@@ -210,32 +167,26 @@ class BpkPopoverPortal extends Component<Props> {
       target,
       ...rest
     } = this.props;
-
     const classNames = [getClassName('bpk-popover-portal')];
-
     if (portalClassName) {
       classNames.push(portalClassName);
     }
-
-    return (
-      <>
-        {typeof target !== 'function' && target}
-        <Portal
-          beforeClose={this.beforeClose}
-          className={classNames.join(' ')}
-          isOpen={isOpen}
-          onClose={this.onClose}
-          onRender={this.onRender}
-          style={portalStyle}
-          renderTarget={renderTarget}
-          target={target}
-        >
-          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-          <BpkPopover onClose={this.onClose} {...rest} />
-        </Portal>
-      </>
-    );
+    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 default BpkPopoverPortal;
+export default BpkPopoverPortal;

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

@@ -14,10 +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.
- */
-
-/* @flow strict */
-
-export const ARROW_ID = 'js-bpk-popover-arrow';
-
-export default { ARROW_ID };
+ */export const ARROW_ID = 'js-bpk-popover-arrow';
+export default {
+  ARROW_ID
+};

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

@@ -23,39 +23,31 @@
 
 import tabbable from 'tabbable';
 import focusin from 'focusin';
-
 let polyfilled = false;
 let focusTrapped = false;
-
-const init = (element) => {
+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) => {
+  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.
@@ -63,24 +55,22 @@ const init = (element) => {
   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) => {
+const scopeFocus = element => {
   if (teardownFn) teardownFn();
   teardownFn = init(element);
 };
-
 const unscopeFocus = () => {
   if (teardownFn) teardownFn();
   teardownFn = null;
 };
-
-export default { scopeFocus, unscopeFocus };
+export default {
+  scopeFocus,
+  unscopeFocus
+};

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

@@ -14,10 +14,5 @@
  * 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.
- */
-
-/* @flow strict */
-
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
-
-export default [...linkAttributes];
+ */import { themeAttributes as linkAttributes } from "../../bpk-component-link";
+export default [...linkAttributes];

package/bpk-component-price/index.js

@@ -14,11 +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.
- */
-/* @flow strict */
-
-import BpkPrice from './src/BpkPrice';
-import { SIZES, ALIGNS } from './src/common-types';
-
+ */import BpkPrice from "./src/BpkPrice";
+import { SIZES, ALIGNS } from "./src/common-types";
 export default BpkPrice;
-export { SIZES, ALIGNS };
+export { SIZES, ALIGNS };