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

package/bpk-animate-height/index.js

@@ -16,6 +16,5 @@
  * limitations under the License.
  */
 
-import AnimateHeight from './src/AnimateHeight';
-
-export default AnimateHeight;
+import AnimateHeight from "./src/AnimateHeight";
+export default AnimateHeight;

package/bpk-animate-height/src/AnimateHeight.js

@@ -22,37 +22,32 @@ import { Component } from 'react';
 // IE11 doesn't support `Number.isNaN` so we must use the global.
 // When IE11 support drops we can migrate.
 // eslint-disable-next-line no-restricted-globals
-const isNumber = (n) => !isNaN(parseFloat(n)) && isFinite(n);
-
-const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-
+import { jsx as _jsx } from "react/jsx-runtime";
+const isNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
 class AnimateHeight extends Component {
   constructor(props) {
     super(props);
-
     let height = 'auto';
     let overflow = 'visible';
-
     if (isNumber(this.props.height)) {
       height = this.props.height < 0 ? 0 : this.props.height;
       overflow = this.props.transitionOverflow;
     }
-
     this.state = {
       height,
-      overflow,
+      overflow
     };
   }
-
   componentDidMount() {
     if (this.contentElement && this.props.height === 0) {
       this.contentElement.style.display = 'none';
     }
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { height } = this.props;
+    const {
+      height
+    } = this.props;
 
     // Check if 'height' prop has changed
     if (this.contentElement && nextProps.height !== height) {
@@ -61,15 +56,12 @@ class AnimateHeight extends Component {
       this.contentElement.style.overflow = this.props.transitionOverflow;
       const contentHeight = this.contentElement.offsetHeight;
       this.contentElement.style.overflow = '';
-
       let newHeight = null;
       let shouldSetTimeout = false;
       let timeoutHeight = null;
       let timeoutOverflow = this.props.transitionOverflow;
       let timeoutDuration = nextProps.duration;
-
       clearTimeout(this.timeoutID);
-
       if (isNumber(nextProps.height)) {
         // If new height is a number
         newHeight = nextProps.height < 0 ? 0 : nextProps.height;
@@ -81,29 +73,24 @@ class AnimateHeight extends Component {
         timeoutHeight = 'auto';
         timeoutOverflow = 'visible';
       }
-
       if (this.state.height === 'auto') {
         // If previous height was 'auto'
         // set it explicitly to be able to use transition
         shouldSetTimeout = true;
         timeoutHeight = newHeight;
-
         newHeight = contentHeight;
         timeoutDuration = 50;
       }
-
       this.setState((state, props) => ({
         height: newHeight,
-        overflow: props.transitionOverflow,
+        overflow: props.transitionOverflow
       }));
-
       if (shouldSetTimeout) {
         this.timeoutID = setTimeout(() => {
           this.setState({
             height: timeoutHeight,
-            overflow: timeoutOverflow,
+            overflow: timeoutOverflow
           });
-
           if (!isTransitionEndSupported()) {
             this.onTransitionEnd();
           }
@@ -111,12 +98,10 @@ class AnimateHeight extends Component {
       }
     }
   }
-
   componentWillUnmount() {
     clearTimeout(this.timeoutID);
     this.timeoutID = null;
   }
-
   onTransitionEnd = () => {
     if (this.contentElement && this.props.height === 0) {
       this.contentElement.style.display = 'none';
@@ -125,13 +110,19 @@ class AnimateHeight extends Component {
       this.props.onAnimationComplete();
     }
   };
-
   render() {
-    const { children, duration, easing, onAnimationComplete, style, ...rest } =
-      this.props;
-
-    const { height, overflow } = this.state;
-
+    const {
+      children,
+      duration,
+      easing,
+      onAnimationComplete,
+      style,
+      ...rest
+    } = this.props;
+    const {
+      height,
+      overflow
+    } = this.state;
     const componentStyle = {
       ...style,
       height,
@@ -140,30 +131,23 @@ class AnimateHeight extends Component {
       MozTransition: `height ${duration}ms ${easing} `,
       OTransition: `height ${duration}ms ${easing} `,
       msTransition: `height ${duration}ms ${easing} `,
-      transition: `height ${duration}ms ${easing} `,
+      transition: `height ${duration}ms ${easing} `
     };
-
     delete rest.height;
     delete rest.transitionOverflow;
-
-    return (
-      <div
-        style={componentStyle}
-        onTransitionEnd={this.onTransitionEnd}
-        {...rest}
-      >
-        <div
-          ref={(el) => {
-            this.contentElement = el;
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    );
+    return /*#__PURE__*/_jsx("div", {
+      style: componentStyle,
+      onTransitionEnd: this.onTransitionEnd,
+      ...rest,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: el => {
+          this.contentElement = el;
+        },
+        children: children
+      })
+    });
   }
 }
-
 AnimateHeight.propTypes = {
   children: PropTypes.node.isRequired,
   duration: PropTypes.number.isRequired,
@@ -171,14 +155,13 @@ AnimateHeight.propTypes = {
   easing: PropTypes.string,
   transitionOverflow: PropTypes.string,
   onAnimationComplete: PropTypes.func,
-  style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  style: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
 
 AnimateHeight.defaultProps = {
   easing: 'ease',
   transitionOverflow: 'hidden',
   onAnimationComplete: null,
-  style: {},
+  style: {}
 };
-
-export default AnimateHeight;
+export default AnimateHeight;

package/bpk-component-accordion/index.js

@@ -14,18 +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.
- */
-
-/* @flow strict */
-
-import BpkAccordion from './src/BpkAccordion';
-import BpkAccordionItem from './src/BpkAccordionItem';
-import withSingleItemAccordionState from './src/withSingleItemAccordionState';
-import withAccordionItemState from './src/withAccordionItemState';
-
-export {
-  BpkAccordion,
-  BpkAccordionItem,
-  withSingleItemAccordionState,
-  withAccordionItemState,
-};
+ */import BpkAccordion from "./src/BpkAccordion";
+import BpkAccordionItem from "./src/BpkAccordionItem";
+import withSingleItemAccordionState from "./src/withSingleItemAccordionState";
+import withAccordionItemState from "./src/withAccordionItemState";
+export { BpkAccordion, BpkAccordionItem, withSingleItemAccordionState, withAccordionItemState };

package/bpk-component-accordion/src/BpkAccordion.js

@@ -14,56 +14,46 @@
  * 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 PropTypes from 'prop-types';
 import { createContext, Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkAccordion.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkAccordion.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = { children: Node, className: ?string };
-
-export const BpkAccordionContext = createContext({
+export const BpkAccordionContext = /*#__PURE__*/createContext({
   onDark: false,
-  divider: true,
+  divider: true
 });
-
-const BpkAccordion = (props: Props) => {
-  const { children, className, divider, onDark, ...rest } = props;
-
-  const classNames = getClassName(
-    'bpk-accordion',
-    onDark && 'bpk-accordion--on-dark',
+const BpkAccordion = props => {
+  const {
+    children,
     className,
-  );
-
-  return (
-    <BpkAccordionContext.Provider value={{ onDark, divider }}>
-      {/* // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
-      <dl className={classNames} {...rest}>
-        {children}
-      </dl>
-    </BpkAccordionContext.Provider>
-  );
+    divider,
+    onDark,
+    ...rest
+  } = props;
+  const classNames = getClassName('bpk-accordion', onDark && 'bpk-accordion--on-dark', className);
+  return /*#__PURE__*/_jsx(BpkAccordionContext.Provider, {
+    value: {
+      onDark,
+      divider
+    },
+    children: /*#__PURE__*/_jsx("dl", {
+      className: classNames,
+      ...rest,
+      children: children
+    })
+  });
 };
-
 BpkAccordion.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   onDark: PropTypes.bool,
-  divider: PropTypes.bool,
+  divider: PropTypes.bool
 };
-
 BpkAccordion.defaultProps = {
   className: null,
   onDark: false,
-  divider: true,
+  divider: true
 };
-
-export default BpkAccordion;
+export default BpkAccordion;

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -14,39 +14,24 @@
  * 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 PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } from 'react';
-
-import AnimateHeight from '../../bpk-animate-height';
-import { withButtonAlignment } from '../../bpk-component-icon';
-import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { cssModules } from '../../bpk-react-utils';
-
-import { BpkAccordionContext } from './BpkAccordion';
-import STYLES from './BpkAccordionItem.module.scss';
-
+import AnimateHeight from "../../bpk-animate-height";
+import { withButtonAlignment } from "../../bpk-component-icon";
+import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import { BpkAccordionContext } from "./BpkAccordion";
+import STYLES from "./BpkAccordionItem.module.css";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const ExpandIcon = withButtonAlignment(ChevronDownIcon);
-
-type Props = {
-  children: Node,
-  id: string,
-  title: string,
-  expanded: boolean,
-  icon: ?Element<any>,
-  onClick: () => mixed,
-  tagName: 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
-  textStyle: $Values<typeof TEXT_STYLES>,
-};
-
-const BpkAccordionItem = (props: Props) => {
-  const { divider, onDark } = useContext(BpkAccordionContext);
+const BpkAccordionItem = props => {
+  const {
+    divider,
+    onDark
+  } = useContext(BpkAccordionContext);
   const iconClassNames = [getClassName('bpk-accordion__item-expand-icon')];
   const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
   const titleClassNames = [getClassName('bpk-accordion__title')];
@@ -68,95 +53,75 @@ const BpkAccordionItem = (props: Props) => {
   // it, but the benefit of a better container api versus this was worth it
   // $FlowFixMe[prop-missing] - see above
   delete rest.initiallyExpanded;
-
   if (expanded && !onDark) {
-    iconClassNames.push(
-      getClassName('bpk-accordion__item-expand-icon--flipped'),
-    );
+    iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
     if (divider) {
-      contentClassNames.push(
-        getClassName('bpk-accordion__content-container--expanded'),
-      );
+      contentClassNames.push(getClassName('bpk-accordion__content-container--expanded'));
     }
   }
-
   if (expanded && onDark) {
-    iconClassNames.push(
-      getClassName('bpk-accordion__item-expand-icon--flipped'),
-    );
-    iconClassNames.push(
-      getClassName('bpk-accordion__item-expand-icon--on-dark'),
-    );
+    iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
+    iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--on-dark'));
     if (divider) {
-      contentClassNames.push(
-        getClassName('bpk-accordion__content-container--expanded-on-dark'),
-      );
+      contentClassNames.push(getClassName('bpk-accordion__content-container--expanded-on-dark'));
     }
-    titleTextClassNames.push(
-      getClassName('bpk-accordion__title-text--on-dark'),
-    );
+    titleTextClassNames.push(getClassName('bpk-accordion__title-text--on-dark'));
   }
-
   if (!expanded && onDark) {
-    iconClassNames.push(
-      getClassName('bpk-accordion__item-expand-icon--on-dark'),
-    );
+    iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--on-dark'));
     if (divider) {
-      titleClassNames.push(
-        getClassName('bpk-accordion__title--collapsed-on-dark'),
-      );
+      titleClassNames.push(getClassName('bpk-accordion__title--collapsed-on-dark'));
     }
-    titleTextClassNames.push(
-      getClassName('bpk-accordion__title-text--on-dark'),
-    );
+    titleTextClassNames.push(getClassName('bpk-accordion__title-text--on-dark'));
   }
-
   if (!expanded && !onDark && divider) {
     titleClassNames.push(getClassName('bpk-accordion__title--collapsed'));
   }
-
   const contentId = `${id}_content`;
-  const clonedIcon = icon
-    ? cloneElement(icon, {
-        className: getClassName('bpk-accordion__leading-icon'),
-      })
-    : null;
-
+  const clonedIcon = icon ? /*#__PURE__*/cloneElement(icon, {
+    className: getClassName('bpk-accordion__leading-icon')
+  }) : null;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <div id={id} {...rest}>
-      <dt className={titleClassNames.join(' ')}>
-        <button
-          type="button"
-          aria-expanded={expanded}
-          aria-controls={contentId}
-          onClick={onClick}
-          className={getClassName('bpk-accordion__toggle-button')}
-        >
-          <span className={getClassName('bpk-accordion__flex-container')}>
-            <BpkText
-              textStyle={textStyle}
-              tagName={tagName}
-              className={titleTextClassNames.join(' ')}
-            >
-              {clonedIcon}
-              {title}
-            </BpkText>
-            <span className={getClassName('bpk-accordion__icon-wrapper')}>
-              <ExpandIcon className={iconClassNames.join(' ')} />
-            </span>
-          </span>
-        </button>
-      </dt>
-      <dd id={contentId} className={contentClassNames.join(' ')}>
-        <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
-          {children}
-        </AnimateHeight>
-      </dd>
-    </div>
+    _jsxs("div", {
+      id: id,
+      ...rest,
+      children: [/*#__PURE__*/_jsx("dt", {
+        className: titleClassNames.join(' '),
+        children: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          onClick: onClick,
+          className: getClassName('bpk-accordion__toggle-button'),
+          children: /*#__PURE__*/_jsxs("span", {
+            className: getClassName('bpk-accordion__flex-container'),
+            children: [/*#__PURE__*/_jsxs(BpkText, {
+              textStyle: textStyle,
+              tagName: tagName,
+              className: titleTextClassNames.join(' '),
+              children: [clonedIcon, title]
+            }), /*#__PURE__*/_jsx("span", {
+              className: getClassName('bpk-accordion__icon-wrapper'),
+              children: /*#__PURE__*/_jsx(ExpandIcon, {
+                className: iconClassNames.join(' ')
+              })
+            })]
+          })
+        })
+      }), /*#__PURE__*/_jsx("dd", {
+        id: contentId,
+        className: contentClassNames.join(' '),
+        children: /*#__PURE__*/_jsx(AnimateHeight, {
+          duration: 200,
+          height: expanded ? 'auto' : 0,
+          children: children
+        })
+      })]
+    })
   );
 };
-
 BpkAccordionItem.propTypes = {
   children: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
@@ -165,15 +130,13 @@ BpkAccordionItem.propTypes = {
   icon: PropTypes.node,
   onClick: PropTypes.func,
   tagName: PropTypes.string,
-  textStyle: PropTypes.string,
+  textStyle: PropTypes.string
 };
-
 BpkAccordionItem.defaultProps = {
   expanded: false,
   icon: null,
   onClick: () => null,
   tagName: 'span',
-  textStyle: TEXT_STYLES.bodyDefault,
+  textStyle: TEXT_STYLES.bodyDefault
 };
-
-export default BpkAccordionItem;
+export default BpkAccordionItem;

package/bpk-component-accordion/src/withAccordionItemState.js

@@ -14,77 +14,52 @@
  * 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 PropTypes from 'prop-types';
 import { Component } from 'react';
-import type { ComponentType } from 'react';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-type Props = {
-  initiallyExpanded: boolean,
-  expanded: boolean,
-  onClick: ?() => mixed,
-};
-
-type State = {
-  expanded: boolean,
-};
-
-const withAccordionItemState = (ComposedComponent: ComponentType<any>) => {
-  class WithAccordionItemState extends Component<Props, State> {
+import { wrapDisplayName } from "../../bpk-react-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const withAccordionItemState = ComposedComponent => {
+  class WithAccordionItemState extends Component {
     static propTypes = {
       initiallyExpanded: PropTypes.bool,
       expanded: PropTypes.bool,
-      onClick: PropTypes.func,
+      onClick: PropTypes.func
     };
-
     static defaultProps = {
       initiallyExpanded: false,
       expanded: false,
-      onClick: null,
+      onClick: null
     };
-
-    constructor(props: Props) {
+    constructor(props) {
       super(props);
-
       this.state = {
-        expanded: props.initiallyExpanded,
+        expanded: props.initiallyExpanded
       };
     }
-
     onClick = () => {
-      this.setState(
-        (prevState) => ({
-          expanded: !prevState.expanded,
-        }),
-        this.props.onClick || (() => {}),
-      );
+      this.setState(prevState => ({
+        expanded: !prevState.expanded
+      }), this.props.onClick || (() => {}));
     };
-
     render() {
-      const { expanded, initiallyExpanded, onClick, ...rest } = this.props;
-
+      const {
+        expanded,
+        initiallyExpanded,
+        onClick,
+        ...rest
+      } = this.props;
       return (
+        /*#__PURE__*/
         // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-        <ComposedComponent
-          expanded={this.state.expanded}
-          onClick={this.onClick}
-          {...rest}
-        />
+        _jsx(ComposedComponent, {
+          expanded: this.state.expanded,
+          onClick: this.onClick,
+          ...rest
+        })
       );
     }
   }
-
-  WithAccordionItemState.displayName = wrapDisplayName(
-    ComposedComponent,
-    'withAccordionItemState',
-  );
-
+  WithAccordionItemState.displayName = wrapDisplayName(ComposedComponent, 'withAccordionItemState');
   return WithAccordionItemState;
 };
-
-export default withAccordionItemState;
+export default withAccordionItemState;