@skyscanner/backpack-web 9.3.0 → 10.0.0

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

@@ -17,34 +17,56 @@
  */
 
 /* @flow strict */
-import type { ChildrenArray, Element } from 'react';
-
-import BpkDataTableColumn from './BpkDataTableColumn';
 import type {
   SortDirectionType as _SortDirectionType,
   SortProps as _SortProps,
 } from './sort-types';
 
-export type ColumnType = {
-  toColumn(column: any, key: string): any,
-};
-
-export type DataTableProps = {
+type CommonColumnProps = {
+  defaultSortDirection: _SortDirectionType,
+  flexGrow: number,
   headerClassName: ?string,
-  rowClassName: ?string,
+  headerStyle: ?{},
+  label: ?string,
+  minWidth: ?number,
+  width: number,
 };
 
 export type Props<Row> = {
-  ...$Exact<DataTableProps>,
   rows: Array<Row>,
-  children: ChildrenArray<Element<typeof BpkDataTableColumn> & ColumnType>,
+  children: Node,
+  height: number,
   width: ?number,
   headerHeight: number,
+  rowHeight: number,
   className: ?string,
   defaultColumnSortIndex: number,
+  headerClassName: ?string,
+  rowClassName: ?string,
   onRowClick: (Row) => mixed,
   ...$Exact<_SortProps>,
 };
 
+export type ColumnType = {
+  disableSortBy: boolean,
+  getHeaderProps: Function,
+  isSorted: boolean,
+  isSortedDesc: boolean,
+  render: Function,
+  sortDirection: _SortDirectionType,
+  toggleSortBy: Function,
+  ...$Exact<CommonColumnProps>,
+};
+
+export type BpkDataTableColumnProps = {
+  cellDataGetter: ?Function,
+  cellRenderer: ?Function,
+  className: ?string,
+  dataKey: string,
+  disableSort: boolean,
+  headerRenderer: ?Function,
+  ...$Exact<CommonColumnProps>,
+};
+
 export type SortDirectionType = _SortDirectionType;
 export type SortProps = _SortProps;

package/bpk-component-datatable/src/sort-types.js

@@ -20,6 +20,12 @@
 
 // This file exists to break a cycle that would otherwise happen between
 // BpkDataTableColumn.js and common-types.js
+
+export const SORT_DIRECTION_TYPES = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+};
+
 export type SortDirectionType = 'ASC' | ' DESC';
 
 export type SortProps = {

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

@@ -17,14 +17,71 @@
  */
 /* @flow strict */
 
+// TODO: Remove these functions 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
 // eslint-disable-next-line import/prefer-default-export
-export const hasClassName = (node: ?Element, className: ?string): boolean => {
-  if (node == null) {
-    return false;
-  }
+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);
 
-  const nodeClassName = node.getAttribute('class');
-  return (
-    nodeClassName != null && nodeClassName.split(' ').indexOf(className) !== -1
-  );
-};
+      return cellRenderer({
+        cellData,
+        columnIndex,
+        dataKey,
+        rowData,
+        rowIndex,
+      });
+    };
+
+    const columnCellDataGetter = ({
+      column: { id: dataKey },
+      row: { values: rowData },
+    }) => cellDataGetter({ dataKey, rowData });
+
+    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,
+      defaultSortDirection,
+      flexGrow,
+      headerClassName,
+      headerStyle,
+      label,
+      minWidth,
+      style,
+      width,
+    };
+  });

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "18.0.2",
+  "version": "18.0.3",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-breakpoint": "^5.0.2",
-    "bpk-component-calendar": "^12.0.2",
-    "bpk-component-input": "^7.0.2",
-    "bpk-component-modal": "^6.0.2",
-    "bpk-component-popover": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-breakpoint": "^5.0.3",
+    "bpk-component-calendar": "^13.0.0",
+    "bpk-component-input": "^7.0.3",
+    "bpk-component-modal": "^6.0.3",
+    "bpk-component-popover": "^8.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -27,7 +27,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-description-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-description-list",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Backpack description list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^4.0.2",
-    "bpk-component-flare": "^3.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-close-button": "^4.0.3",
+    "bpk-component-flare": "^3.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.2",
+    "bpk-scrim-utils": "^6.0.3",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-close-button": "^4.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-link": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-close-button": "^4.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-link": "^4.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.2",
+    "bpk-scrim-utils": "^6.0.3",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -28,7 +28,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^5.0.2",
-    "bpk-component-label": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-form-validation": "^5.0.3",
+    "bpk-component-label": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -24,13 +24,13 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^7.0.2",
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-calendar": "^12.0.2",
-    "bpk-component-checkbox": "^5.0.2",
-    "bpk-component-datepicker": "^18.0.2",
-    "bpk-component-input": "^7.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-textarea": "^5.0.2"
+    "bpk-component-autosuggest": "^7.0.3",
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-calendar": "^13.0.0",
+    "bpk-component-checkbox": "^5.0.3",
+    "bpk-component-datepicker": "^18.0.3",
+    "bpk-component-input": "^7.0.3",
+    "bpk-component-select": "^6.0.3",
+    "bpk-component-textarea": "^5.0.3"
   }
 }

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,9 +17,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^6.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-label": "^6.0.3",
+    "bpk-component-text": "^8.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-floating-notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-aria-live": "^3.1.0",
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-text": "^8.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-animate-height": "^5.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,12 +23,12 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-checkbox": "^5.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-input": "^7.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-textarea": "^5.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-checkbox": "^5.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-input": "^7.0.3",
+    "bpk-component-select": "^6.0.3",
+    "bpk-component-textarea": "^5.0.3"
   }
 }

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-text": "^8.0.3",
+    "bpk-mixins": "^31.6.1",
+    "bpk-react-utils": "^7.0.0",
+    "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-grid-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-link": "^4.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-mobile-scroll-container": "^4.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-text": "^8.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "@skyscanner/bpk-svgs": "^14.3.8",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "@skyscanner/bpk-svgs": "^14.4.1",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-list": "^5.1.0",
+    "bpk-component-text": "^8.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -25,7 +25,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-mobile-scroll-container": "^4.0.3",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-component-infinite-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
@@ -23,9 +23,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-list": "^5.1.0",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^7.0.2",
-    "bpk-component-label": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-banner-alert": "^7.0.3",
+    "bpk-component-label": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },