@skyscanner/backpack-web 29.2.0 → 29.3.1

package/bpk-component-card/src/BpkCard.js

@@ -45,18 +45,14 @@ const BpkCard = ({
       atomicProps.tabIndex = -1;
       atomicProps.role = 'group';
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("a", {
-        href: href,
-        className: classNames,
-        ...atomicProps,
-        ...blankProps,
-        ...rest,
-        children: children
-      })
-    );
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
+      className: classNames,
+      ...atomicProps,
+      ...blankProps,
+      ...rest,
+      children: children
+    });
   }
   if (atomic) {
     return /*#__PURE__*/_jsx("button", {
@@ -66,14 +62,10 @@ const BpkCard = ({
       children: children
     });
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("div", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkCard;

package/bpk-component-card/src/BpkDividedCard.js

@@ -37,22 +37,18 @@ const BpkDividedCard = ({
 }) => {
   const isVertical = orientation === ORIENTATION.vertical;
   const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', !isElevated && 'bpk-divided-card--no-elevation', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs(BpkCard, {
-      className: classNames,
-      href: href,
-      padded: false,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
-        children: primaryContent
-      }), /*#__PURE__*/_jsx("div", {
-        className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
-        children: secondaryContent
-      })]
-    })
-  );
+  return /*#__PURE__*/_jsxs(BpkCard, {
+    className: classNames,
+    href: href,
+    padded: false,
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
+      children: primaryContent
+    }), /*#__PURE__*/_jsx("div", {
+      className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
+      children: secondaryContent
+    })]
+  });
 };
 export default BpkDividedCard;

package/bpk-component-datatable/src/BpkDataTable.js

@@ -21,7 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDataTable.module.css";
 import { SORT_DIRECTION_TYPES } from "./sort-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
-import { pxToRem, getColumns } from "./utils";
+import { pxToRem, getColumns, createColumnsSchema } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -33,6 +33,7 @@ const BpkDataTable = props => {
   const {
     children,
     className,
+    columns: columnsData,
     defaultColumnSortIndex,
     headerClassName,
     headerHeight,
@@ -41,7 +42,7 @@ const BpkDataTable = props => {
     rowClassName,
     rowHeight,
     rowStyle,
-    rows: data,
+    rows: rowsData,
     sort,
     sortBy,
     sortDirection,
@@ -57,7 +58,13 @@ const BpkDataTable = props => {
     return rowClassNames;
   };
   const headerClassNames = getClassName('bpk-data-table__row', 'bpk-data-table__header-row', headerClassName);
-  const columns = useMemo(() => getColumns(children), [children]);
+  const columns = useMemo(() => {
+    if (columnsData) {
+      return createColumnsSchema(columnsData);
+    }
+    return getColumns(children);
+  }, [children, columnsData]);
+  const data = useMemo(() => rowsData, [rowsData]);
   const {
     getTableBodyProps,
     getTableProps,

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -25,7 +25,7 @@ const BpkDataTableColumn = props => /*#__PURE__*/_jsx("div", {
 });
 BpkDataTableColumn.propTypes = {
   dataKey: PropTypes.string.isRequired,
-  width: PropTypes.number.isRequired,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   className: PropTypes.string,
   disableSort: PropTypes.bool,
   defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),

package/bpk-component-datatable/src/utils.js

@@ -15,6 +15,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */const ROOT_FONT_SIZE_PX = 16;
+
+/**
+ * 
+ * @param {String|Number} value width or height of data table or its columns, or rows
+ * @returns {String} the value in rem
+ */
 export const pxToRem = value => {
   let parsed = value;
   if (typeof value === 'number' || typeof value === 'string' && value.includes('px')) {
@@ -23,90 +29,179 @@ export const pxToRem = value => {
   }
   return parsed;
 };
-// TODO: Remove this function once we want to change the API to match the react-table library API
-// To maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
-// The `react-table` library however expects columns as an array of objects
 
-export const getColumns = columns => columns.map(column => {
-  const {
-    cellDataGetter,
-    cellRenderer,
-    headerRenderer
-  } = column.props;
-  // To maintain backwards compatibility with the old API of BpkDataTable we rename the parameters
-  // And create an interface so that the function signature doesn't depend on the underlying library
-  const columnCellRenderer = ({
-    column: {
-      id: dataKey
-    },
-    columns: columnsData,
-    row: {
-      id: rowID,
-      values: rowData
-    },
-    sortedRows,
-    value: cellData
-  }) => {
-    const columnIndex = columnsData.map(col => col.id).indexOf(dataKey);
-    const rowIndex = sortedRows.map(row => row.id).indexOf(rowID);
-    return cellRenderer({
-      cellData,
-      columnIndex,
+/**
+ * TODO: Remove this function once BpkDataTableColumns is removed
+ * This function takes the children of BpkDataTableColumns and converts them to an array of objects
+ * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+ * 
+ * @param {Array} columns the BpkDataTableColumns children
+ * @returns {Array} An array of column objects that can be passed to the react-table library
+ */
+export const getColumns = columns => {
+  console.warn('BpkDataTableColumns is deprecated. Please pass an array of objects to the columns prop instead.');
+  let columnsArray = [];
+  if (!columns) return columnsArray;
+  columnsArray = columns.map(column => {
+    const {
+      cellDataGetter,
+      cellRenderer,
+      headerRenderer
+    } = column.props;
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column and row data and returns the cell data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column and row data 
+     * @returns {Node} JSX to render in the cell
+     */
+    const columnCellRenderer = ({
+      column: {
+        id: dataKey
+      },
+      columns: columnsData,
+      row: {
+        id: rowID,
+        values: rowData
+      },
+      sortedRows,
+      value: cellData
+    }) => {
+      const columnIndex = columnsData.map(col => col.id).indexOf(dataKey);
+      const rowIndex = sortedRows.map(row => row.id).indexOf(rowID);
+      return cellRenderer({
+        cellData,
+        columnIndex,
+        dataKey,
+        rowData,
+        rowIndex
+      });
+    };
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column and row data and returns the cell data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column and row data 
+     * @returns {Node} JSX to render in the cell
+     */
+    const columnCellDataGetter = ({
+      column: {
+        id: dataKey
+      },
+      row: {
+        values: rowData
+      }
+    }) => cellDataGetter({
       dataKey,
-      rowData,
-      rowIndex
+      rowData
     });
-  };
-  const columnCellDataGetter = ({
-    column: {
-      id: dataKey
-    },
-    row: {
-      values: rowData
-    }
-  }) => cellDataGetter({
-    dataKey,
-    rowData
-  });
-  const columnHeaderRenderer = ({
-    column: {
+
+    /**
+     * TODO: Remove this function once BpkDataTableColumns is removed
+     * This function takes the react-table column data and returns the header data
+     * to temporarily maintain backwards compatibility with the old API of BpkDataTable
+     * and create an interface so that the function signature doesn't depend on the underlying library
+     * 
+     * @param {Object} Object containing the react-table column data 
+     * @returns {Node} JSX to render in the header
+     */
+    const columnHeaderRenderer = ({
+      column: {
+        disableSortBy: disableSort,
+        id: dataKey,
+        label
+      }
+    }) => headerRenderer({
+      dataKey,
+      label,
+      disableSort
+    });
+    const {
+      className,
+      dataKey,
+      defaultSortDirection,
+      disableSort,
+      flexGrow,
+      headerClassName,
+      headerStyle,
+      label,
+      minWidth,
+      style,
+      width
+    } = column.props;
+    return {
+      Header: headerRenderer ? columnHeaderRenderer : label,
+      accessor: dataKey,
+      ...((cellRenderer || cellDataGetter) && {
+        Cell: columnCellRenderer || columnCellDataGetter
+      }),
+      className,
       disableSortBy: disableSort,
-      id: dataKey,
-      label
-    }
-  }) => headerRenderer({
-    dataKey,
-    label,
-    disableSort
+      defaultSortDirection,
+      flexGrow,
+      headerClassName,
+      headerStyle,
+      label,
+      minWidth: pxToRem(minWidth),
+      style,
+      width: pxToRem(width)
+    };
+  });
+  return columnsArray;
+};
+
+/**
+ * 
+ * @param {Array} columns Array of column objects
+ * @returns {Array} An array of column objects that can be passed to the react-table library
+ * This function abstract the Cell and Header of the react-table API 
+ */
+export const createColumnsSchema = columns => {
+  let columnsArray = [];
+  if (!columns) return columnsArray;
+  columnsArray = columns.map(column => {
+    const Cell = ({
+      column: {
+        id: accessor
+      },
+      columns: columnsData,
+      row: {
+        id: rowID,
+        values: rowData
+      },
+      sortedRows,
+      value: cellData
+    }) => column.Cell({
+      rowData,
+      rowIndex: sortedRows.map(row => row.id).indexOf(rowID),
+      accessor,
+      columnIndex: columnsData.map(col => col.id).indexOf(accessor),
+      cellData
+    });
+    const Header = ({
+      column: {
+        disableSortBy: disableSort,
+        id: accessor,
+        label
+      }
+    }) => column.Header({
+      label,
+      disableSort,
+      accessor
+    });
+    return {
+      ...column,
+      ...(column.Cell && {
+        Cell
+      }),
+      Header: column.Header && typeof column.Header === 'function' ? Header : column.label
+    };
   });
-  const {
-    className,
-    dataKey,
-    defaultSortDirection,
-    disableSort,
-    flexGrow,
-    headerClassName,
-    headerStyle,
-    label,
-    minWidth,
-    style,
-    width
-  } = column.props;
-  return {
-    Header: headerRenderer ? columnHeaderRenderer : label,
-    accessor: dataKey,
-    ...((cellRenderer || cellDataGetter) && {
-      Cell: columnCellRenderer || columnCellDataGetter
-    }),
-    className,
-    disableSortBy: disableSort,
-    defaultSortDirection,
-    flexGrow,
-    headerClassName,
-    headerStyle,
-    label,
-    minWidth: pxToRem(minWidth),
-    style,
-    width: pxToRem(width)
-  };
-});
+  return columnsArray;
+};

package/bpk-component-input/src/BpkClearButton.js

@@ -34,22 +34,18 @@ const BpkClearButton = ({
   if (className) {
     classNames.push(className);
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: "button",
-      title: label,
-      onClick: onClick,
-      "aria-label": label,
-      className: classNames.join(' '),
-      ...rest,
-      children: /*#__PURE__*/_jsx(ClearButtonIcon, {
-        focusable: "false" // prevents focus on IE11
-        ,
-        className: getClassName('bpk-clear-button__icon')
-      })
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    title: label,
+    onClick: onClick,
+    "aria-label": label,
+    className: classNames.join(' '),
+    ...rest,
+    children: /*#__PURE__*/_jsx(ClearButtonIcon, {
+      focusable: "false" // prevents focus on IE11
+      ,
+      className: getClassName('bpk-clear-button__icon')
     })
-  );
+  });
 };
 export default BpkClearButton;

package/bpk-component-input/src/BpkInput.js

@@ -95,10 +95,7 @@ class BpkInput extends Component {
         classNames.push(className);
       }
     }
-    const renderedInput =
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("input", {
+    const renderedInput = /*#__PURE__*/_jsx("input", {
       className: classNames.join(' '),
       ref: input => {
         ref = input;

package/bpk-component-map/index.js

@@ -17,8 +17,9 @@
  */import BpkMap from "./src/BpkMap";
 import BpkIconMarker from "./src/BpkIconMarker";
 import BpkPriceMarker, { PRICE_MARKER_STATUSES } from "./src/BpkPriceMarker";
+import BpkPriceMarkerV2, { MARKER_STATUSES } from "./src/BpkPriceMarkerV2/BpkPriceMarker";
 import BpkOverlayView from "./src/BpkOverlayView";
 import withGoogleMapsScript from "./src/withGoogleMapsScript";
 import { defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes } from "./src/themeAttributes";
 export default BpkMap;
-export { BpkIconMarker, BpkPriceMarker, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES };
+export { BpkIconMarker, BpkPriceMarker, BpkPriceMarkerV2, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES, MARKER_STATUSES };

package/bpk-component-map/src/BpkBasicMapMarker.d.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 type { Node } from 'react';
+import { type LatLong } from './common-types';
+
+export type Props = {
+  children: Node;
+  position: LatLong;
+};
+
+declare const BpkBasicMapMarker: ({ children, position }: Props) => JSX.Element;
+
+export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.d.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 type { Node } from 'react';
+import { MouseEvent, ReactNode } from 'react';
+
+export const MARKER_STATUSES = {
+  unselected: 'unselected',
+  selected: 'selected',
+  previous_selected: 'previous_selected',
+} as const;
+
+export type Status = (typeof MARKER_STATUSES)[keyof typeof MARKER_STATUSES];
+
+type Props = {
+  label: string;
+  icon?: ReactNode;
+  accessibilityLabel: string;
+  position: {
+    latitude: number;
+    longitude: number;
+  };
+  className?: string;
+  onClick?: (event: MouseEvent) => void;
+  buttonProps?: { [key: string]: string };
+  status?: Status;
+};
+
+declare const BpkPriceMarkerV2: ({
+  label,
+  position,
+  className,
+  onClick,
+  buttonProps,
+  status,
+  style,
+}: Props) => JSX.Element;
+
+export default BpkPriceMarkerV2;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js

@@ -0,0 +1,64 @@
+/*
+ * 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 BpkBasicMapMarker from "../BpkBasicMapMarker";
+import STYLES from "./BpkPriceMarker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const MARKER_STATUSES = {
+  unselected: 'unselected',
+  selected: 'selected',
+  previous_selected: 'previous_selected'
+};
+const BpkPriceMarkerV2 = props => {
+  const {
+    accessibilityLabel,
+    buttonProps,
+    className,
+    icon,
+    label,
+    onClick,
+    position,
+    status = MARKER_STATUSES.unselected,
+    ...rest
+  } = props;
+  const markerWrapperClassNames = getClassName('bpk-price-marker__wrapper');
+  const classNames = getClassName('bpk-price-marker', onClick && 'bpk-price-marker--dynamic', `bpk-price-marker-${status}`, icon && `bpk-price-marker-${status}--icon`, className);
+  return /*#__PURE__*/_jsx(BpkBasicMapMarker, {
+    position: position,
+    "aria-label": accessibilityLabel,
+    ...rest,
+    children: /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: markerWrapperClassNames,
+      onClick: onClick,
+      ...buttonProps,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames,
+        children: [icon, /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.label2,
+          children: label
+        })]
+      })
+    })
+  });
+};
+export default BpkPriceMarkerV2;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}

package/bpk-component-overlay/index.d.ts

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkOverlay, {
   OVERLAY_TYPES,

package/bpk-component-overlay/index.js

@@ -14,6 +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 BpkOverlay, { OVERLAY_TYPES } from "./src/BpkOverlay";
+ */
+
+import BpkOverlay, { OVERLAY_TYPES } from "./src/BpkOverlay";
 export default BpkOverlay;
 export { OVERLAY_TYPES };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.2.0",
+  "version": "29.3.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.1.0",
-    "@skyscanner/bpk-svgs": "^18.1.1",
+    "@skyscanner/bpk-foundations-web": "^17.2.0",
+    "@skyscanner/bpk-svgs": "^18.1.2",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",
@@ -40,7 +40,7 @@
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
     "react-responsive": "^9.0.2",
-    "react-slider": "^1.3.1",
+    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^2.5.3",
     "react-virtualized-auto-sizer": "^1.0.20",