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

package/bpk-component-rating/src/BpkRating.js

@@ -14,28 +14,21 @@
  * 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 type { Node } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkRating.module.scss';
-import { RATING_SIZES, RATING_SCALES } from './common-types';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import STYLES from "./BpkRating.module.css";
+import { RATING_SIZES, RATING_SCALES } from "./common-types";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const getMinValue = () =>
-  // Currently the min value is zero no matter what scale is used.
-  // If this ever changes, this function should be changed to return
-  // different values based on the rating scale.
-  0;
-
-const getMaxValue = (ratingScale) => {
+// Currently the min value is zero no matter what scale is used.
+// If this ever changes, this function should be changed to return
+// different values based on the rating scale.
+0;
+const getMaxValue = ratingScale => {
   switch (ratingScale) {
     case RATING_SCALES.zeroToFive:
       return 5;
@@ -43,19 +36,7 @@ const getMaxValue = (ratingScale) => {
       return 10;
   }
 };
-
-type Props = {
-  ariaLabel: string,
-  className: ?string,
-  ratingScale: $Values<typeof RATING_SCALES>,
-  showScale: ?boolean,
-  size: $Values<typeof RATING_SIZES>,
-  subtitle: ?string,
-  title: ?string | Node,
-  value: string | number,
-};
-
-const BpkRating = (props: Props) => {
+const BpkRating = props => {
   const {
     ariaLabel,
     className,
@@ -67,98 +48,67 @@ const BpkRating = (props: Props) => {
     value,
     ...rest
   } = props;
-
-  const classNames = getClassName(
-    'bpk-rating',
-    className,
-    size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large',
-  );
+  const classNames = getClassName('bpk-rating', className, size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large');
   const valueStyles = getClassName('bpk-rating__value');
   const scaleStyles = getClassName('bpk-rating__scale');
-  const textWrapperStyles = getClassName(
-    'bpk-rating__text-wrapper',
-    size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large',
-  );
-  const titleStyles = getClassName(
-    subtitle && 'bpk-rating__title--with-subtitle',
-    size === RATING_SIZES.large && 'bpk-rating__title--large',
-  );
-  const subtitleStyles = getClassName(
-    'bpk-rating__subtitle',
-    size === RATING_SIZES.large && 'bpk-rating__subtitle--large',
-  );
-
+  const textWrapperStyles = getClassName('bpk-rating__text-wrapper', size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large');
+  const titleStyles = getClassName(subtitle && 'bpk-rating__title--with-subtitle', size === RATING_SIZES.large && 'bpk-rating__title--large');
+  const subtitleStyles = getClassName('bpk-rating__subtitle', size === RATING_SIZES.large && 'bpk-rating__subtitle--large');
   let valueTextSize = TEXT_STYLES.label1;
   let scaleTextSize = TEXT_STYLES.caption;
   let titleTextSize = TEXT_STYLES.label1;
   let subtitleTextSize = TEXT_STYLES.caption;
-
   if (size === RATING_SIZES.large) {
     valueTextSize = TEXT_STYLES.hero5;
     scaleTextSize = TEXT_STYLES.bodyDefault;
     titleTextSize = TEXT_STYLES.heading5;
     subtitleTextSize = TEXT_STYLES.bodyDefault;
   }
-
   const minValue = getMinValue();
   const maxValue = getMaxValue(ratingScale);
-
   let adjustedValue = value;
-
   if (adjustedValue >= maxValue || adjustedValue <= minValue) {
     adjustedValue = clamp(adjustedValue, minValue, maxValue);
   }
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div className={classNames} aria-label={ariaLabel} role="figure" {...rest}>
-      <BpkText
-        textStyle={valueTextSize}
-        tagName="span"
-        className={valueStyles}
-        aria-hidden="true"
-      >
-        {adjustedValue}
-
-        {showScale && (
-          <BpkText
-            textStyle={scaleTextSize}
-            className={scaleStyles}
-            tagName="span"
-            aria-hidden="true"
-          >
-            /{maxValue}
-          </BpkText>
-        )}
-      </BpkText>
-
-      <div className={textWrapperStyles}>
-        {title && (
-          <BpkText
-            textStyle={titleTextSize}
-            className={titleStyles}
-            tagName="span"
-            aria-hidden="true"
-          >
-            {title}
-          </BpkText>
-        )}
-
-        {subtitle && (
-          <BpkText
-            className={subtitleStyles}
-            textStyle={subtitleTextSize}
-            tagName="span"
-            aria-hidden="true"
-          >
-            {subtitle}
-          </BpkText>
-        )}
-      </div>
-    </div>
+    _jsxs("div", {
+      className: classNames,
+      "aria-label": ariaLabel,
+      role: "figure",
+      ...rest,
+      children: [/*#__PURE__*/_jsxs(BpkText, {
+        textStyle: valueTextSize,
+        tagName: "span",
+        className: valueStyles,
+        "aria-hidden": "true",
+        children: [adjustedValue, showScale && /*#__PURE__*/_jsxs(BpkText, {
+          textStyle: scaleTextSize,
+          className: scaleStyles,
+          tagName: "span",
+          "aria-hidden": "true",
+          children: ["/", maxValue]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: textWrapperStyles,
+        children: [title && /*#__PURE__*/_jsx(BpkText, {
+          textStyle: titleTextSize,
+          className: titleStyles,
+          tagName: "span",
+          "aria-hidden": "true",
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+          className: subtitleStyles,
+          textStyle: subtitleTextSize,
+          tagName: "span",
+          "aria-hidden": "true",
+          children: subtitle
+        })]
+      })]
+    })
   );
 };
-
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -167,16 +117,14 @@ BpkRating.propTypes = {
   size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
   subtitle: PropTypes.string,
   showScale: PropTypes.bool,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
-
 BpkRating.defaultProps = {
   className: null,
   ratingScale: RATING_SCALES.zeroToFive,
   size: RATING_SIZES.base,
   subtitle: null,
   showScale: true,
-  title: null,
+  title: null
 };
-
-export default BpkRating;
+export default BpkRating;

package/bpk-component-rating/src/common-types.js

@@ -14,13 +14,11 @@
  * 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 */
-
-export const RATING_SIZES = { base: 'base', large: 'large' };
-
+ */export const RATING_SIZES = {
+  base: 'base',
+  large: 'large'
+};
 export const RATING_SCALES = {
   zeroToFive: 'zeroToFive',
-  zeroToTen: 'zeroToTen',
-};
+  zeroToTen: 'zeroToTen'
+};

package/bpk-component-rtl-toggle/{index.ts → index.js}

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkRtlToggle from './src/BpkRtlToggle';
-import updateOnDirectionChange from './src/updateOnDirectionChange';
-
+import BpkRtlToggle from "./src/BpkRtlToggle";
+import updateOnDirectionChange from "./src/updateOnDirectionChange";
 export default BpkRtlToggle;
-export { updateOnDirectionChange };
+export { updateOnDirectionChange };

package/bpk-component-rtl-toggle/src/{BpkRtlToggle.tsx → BpkRtlToggle.js}

@@ -19,82 +19,57 @@
 import { Component } from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkButtonLink } from '../../bpk-component-link';
-
-import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from './utils';
-
+import { BpkButtonLink } from "../../bpk-component-link";
+import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from "./utils";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getDirection = () => {
   const htmlElement = getHtmlElement();
   return htmlElement instanceof HTMLElement ? htmlElement.dir : DIRECTIONS.LTR;
 };
-
-const setDirection = (direction: string) => {
+const setDirection = direction => {
   const htmlElement = getHtmlElement();
-
   if (htmlElement instanceof HTMLElement) {
     htmlElement.dir = direction;
     htmlElement.dispatchEvent(new Event(DIRECTION_CHANGE_EVENT));
   }
 };
-
-type State = {
-  direction: string;
-};
-
-type Props = {
-  className?: string | null;
-};
-
-type InteractionEvents = KeyboardEvent | MouseEvent | TouchEvent;
-
-class BpkRtlToggle extends Component<Props, State> {
-  constructor(props: Props) {
+class BpkRtlToggle extends Component {
+  constructor(props) {
     super(props);
-
     this.state = {
-      direction: getDirection(),
+      direction: getDirection()
     };
   }
-
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
-
-  handleKeyDown = (e: KeyboardEvent) => {
+  handleKeyDown = e => {
     if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 'r') {
       this.toggleRtl(e);
     }
   };
-
-  toggleRtl = (e: InteractionEvents) => {
+  toggleRtl = e => {
     e.preventDefault();
-
-    const direction =
-      getDirection() === DIRECTIONS.RTL ? DIRECTIONS.LTR : DIRECTIONS.RTL;
-
+    const direction = getDirection() === DIRECTIONS.RTL ? DIRECTIONS.LTR : DIRECTIONS.RTL;
     setDirection(direction);
-
-    this.setState({ direction });
+    this.setState({
+      direction
+    });
   };
-
   render() {
-    const { className } = this.props;
+    const {
+      className
+    } = this.props;
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
-
-    return (
-      <BpkButtonLink
-        title="Keyboard Shortcut: ctrl + cmd + r"
-        onClick={this.toggleRtl}
-        className={className}
-      >
-        RTL {onOrOff}
-      </BpkButtonLink>
-    );
+    return /*#__PURE__*/_jsxs(BpkButtonLink, {
+      title: "Keyboard Shortcut: ctrl + cmd + r",
+      onClick: this.toggleRtl,
+      className: className,
+      children: ["RTL ", onOrOff]
+    });
   }
 }
-
-export default BpkRtlToggle;
+export default BpkRtlToggle;

package/bpk-component-rtl-toggle/src/{updateOnDirectionChange.tsx → updateOnDirectionChange.js}

@@ -16,56 +16,34 @@
  * limitations under the License.
  */
 
-import type { ComponentType } from 'react';
 import { Component } from 'react';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
-
-const updateOnDirectionChange = (
-  EnhancedComponent: ComponentType<any> | string,
-) => {
+import { wrapDisplayName } from "../../bpk-react-utils";
+import { getHtmlElement, DIRECTION_CHANGE_EVENT } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+const updateOnDirectionChange = EnhancedComponent => {
   class UpdateOnDirectionChange extends Component {
-    public static displayName: string;
-
     componentDidMount() {
       const htmlElement = getHtmlElement();
       if (htmlElement instanceof HTMLElement) {
-        htmlElement.addEventListener(
-          DIRECTION_CHANGE_EVENT,
-          this.onDirectionChange,
-          false,
-        );
+        htmlElement.addEventListener(DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
       }
     }
-
     componentWillUnmount() {
       const htmlElement = getHtmlElement();
       if (htmlElement instanceof HTMLElement) {
-        htmlElement.removeEventListener(
-          DIRECTION_CHANGE_EVENT,
-          this.onDirectionChange,
-          false,
-        );
+        htmlElement.removeEventListener(DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
       }
     }
-
     onDirectionChange = () => {
       this.forceUpdate();
     };
-
     render() {
-      return <EnhancedComponent {...this.props} />;
+      return /*#__PURE__*/_jsx(EnhancedComponent, {
+        ...this.props
+      });
     }
   }
-
-  UpdateOnDirectionChange.displayName = wrapDisplayName(
-    EnhancedComponent,
-    'updateOnDirectionChange',
-  );
-
+  UpdateOnDirectionChange.displayName = wrapDisplayName(EnhancedComponent, 'updateOnDirectionChange');
   return UpdateOnDirectionChange;
 };
-
-export default updateOnDirectionChange;
+export default updateOnDirectionChange;

package/bpk-component-rtl-toggle/src/{utils.ts → utils.js}

@@ -18,12 +18,8 @@
 
 const DIRECTIONS = {
   LTR: 'ltr',
-  RTL: 'rtl',
-} as const;
-
+  RTL: 'rtl'
+};
 const DIRECTION_CHANGE_EVENT = 'bpkchangedirection';
-
-const getHtmlElement = (): HTMLElement | null | {} =>
-  typeof document !== 'undefined' ? document.querySelector('html') : {};
-
-export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };
+const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
+export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };

package/bpk-component-scrollable-calendar/{index.ts → index.js}

@@ -16,18 +16,10 @@
  * limitations under the License.
  */
 
-import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
-
-import BpkScrollableCalendar from './src/BpkScrollableCalendar';
-import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';
-import BpkScrollableCalendarGrid from './src/BpkScrollableCalendarGrid';
-import BpkScrollableCalendarGridList from './src/BpkScrollableCalendarGridList';
-
+import { CALENDAR_SELECTION_TYPE } from "../bpk-component-calendar";
+import BpkScrollableCalendar from "./src/BpkScrollableCalendar";
+import BpkScrollableCalendarDate from "./src/BpkScrollableCalendarDate";
+import BpkScrollableCalendarGrid from "./src/BpkScrollableCalendarGrid";
+import BpkScrollableCalendarGridList from "./src/BpkScrollableCalendarGridList";
 export default BpkScrollableCalendar;
-
-export {
-  CALENDAR_SELECTION_TYPE,
-  BpkScrollableCalendarDate,
-  BpkScrollableCalendarGrid,
-  BpkScrollableCalendarGridList,
-};
+export { CALENDAR_SELECTION_TYPE, BpkScrollableCalendarDate, BpkScrollableCalendarGrid, BpkScrollableCalendarGridList };

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.js

@@ -0,0 +1,22 @@
+/*
+ * 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 { BpkCalendarGridHeader, withCalendarState, composeCalendar } from "../../bpk-component-calendar";
+import BpkscrollableCalendarDate from "./BpkScrollableCalendarDate";
+import BpkScrollableCalendarGridList from "./BpkScrollableCalendarGridList";
+export default withCalendarState(composeCalendar(null, BpkCalendarGridHeader, BpkScrollableCalendarGridList, BpkscrollableCalendarDate));

package/bpk-component-scrollable-calendar/src/{BpkScrollableCalendarDate.tsx → BpkScrollableCalendarDate.js}

@@ -17,25 +17,21 @@
  */
 
 import { PureComponent } from 'react';
-
-import { BpkCalendarDate } from '../../bpk-component-calendar';
-import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
-
-type Props = Partial<BpkCalendarDateProps> & {
-  date: Date;
-  isOutside?: boolean;
-  [rest: string]: any;
-};
-class BpkScrollableCalendarDate extends PureComponent<Props> {
+import { BpkCalendarDate } from "../../bpk-component-calendar";
+import { jsx as _jsx } from "react/jsx-runtime";
+class BpkScrollableCalendarDate extends PureComponent {
   static defaultProps = {
-    isOutside: false,
+    isOutside: false
   };
-
   render() {
-    const { isOutside, ...rest } = this.props;
+    const {
+      isOutside,
+      ...rest
+    } = this.props;
     // Returning null when isOutside is true ensures only focused month displays in grid
-    return !isOutside ? <BpkCalendarDate {...rest} /> : null;
+    return !isOutside ? /*#__PURE__*/_jsx(BpkCalendarDate, {
+      ...rest
+    }) : null;
   }
 }
-
-export default BpkScrollableCalendarDate;
+export default BpkScrollableCalendarDate;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -0,0 +1,48 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { BpkCalendarGrid } from "../../bpk-component-calendar";
+import STYLES from "./BpkScrollableCalendarGrid.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkScrollableCalendarGrid = ({
+  className,
+  formatMonth,
+  ignoreOutsideDate,
+  month,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-scrollable-calendar-grid', className);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    children: [/*#__PURE__*/_jsx(BpkText, {
+      className: getClassName('bpk-scrollable-calendar-grid__title'),
+      tagName: "h1",
+      textStyle: TEXT_STYLES.heading4,
+      children: formatMonth(month)
+    }), /*#__PURE__*/_jsx(BpkCalendarGrid, {
+      month: month,
+      ignoreOutsideDate: true,
+      ...rest
+    })]
+  });
+};
+export default BpkScrollableCalendarGrid;