@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-datatable/src/BpkDataTable.module.scss

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $bpk-border-size-datatable: $bpk-border-size-xl * 2;
 
 @mixin bpk-datatable-border-left() {
@@ -41,19 +40,8 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
 .bpk-data-table {
   width: 100%;
 
-  &__header-column {
-    display: flex;
-    height: 100%;
-    margin: bpk-spacing-base();
-    flex-direction: row;
-    align-items: center;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-
-    @include bpk-label-2;
-
-    &:hover {
-      cursor: pointer;
-    }
+  &__header-row {
+    overflow: hidden;
   }
 
   &__row {
@@ -67,7 +55,7 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
 
     @include bpk-footnote;
 
-    &:last-child {
+    &:last-child:not(.bpk-data-table__header-row) {
       border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
     }
 
@@ -92,4 +80,11 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
       }
     }
   }
+
+  &__cell {
+    margin: bpk-spacing-base();
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }

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

@@ -17,48 +17,45 @@
  */
 /* @flow strict */
 
-import React, { type Element } from 'react';
-import { Column } from 'react-virtualized';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import bpkHeaderRenderer from './bpkHeaderRenderer';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType } from './sort-types';
-
-export type BpkDataTableColumnProps = {
-  className: ?string,
-  dataKey: string,
-  disableSort: boolean,
-  defaultSortDirection: SortDirectionType,
-};
-
-const getClassName = cssModules(STYLES);
-
-// BpkDataTableColumn is just a props wrapper since Table only accepts Column children
-// BpkDataTable uses BpkDataTableColumn.toColumn to convert BpkDataTableColumn to Columns
-// eslint-disable-next-line no-unused-vars
-const BpkDataTableColumn = (props: BpkDataTableColumnProps) => null;
-
-BpkDataTableColumn.toColumn = (
-  bpkDataTableColumn: Element<typeof BpkDataTableColumn>,
-  key,
-) => {
-  const { className, ...rest } = bpkDataTableColumn.props;
-  const classNames = [getClassName('bpk-data-table-column')];
-
-  if (className) {
-    classNames.push(className);
-  }
-
-  // $FlowFixMe[cannot-spread-inexact]
-  return <Column className={classNames.join(' ')} key={key} {...rest} />;
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import { type BpkDataTableColumnProps } from './common-types';
+
+// BpkDataTableColumn is just a props wrapper
+// 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
+
+const BpkDataTableColumn = (props: BpkDataTableColumnProps) => (
+  <div {...props} />
+);
+
+BpkDataTableColumn.propTypes = {
+  dataKey: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  disableSort: PropTypes.bool,
+  defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
+  flexGrow: PropTypes.number,
+  label: PropTypes.string,
+  headerRenderer: PropTypes.func,
+  headerClassName: PropTypes.string,
+  headerStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  cellRenderer: PropTypes.func,
+  cellDataGetter: PropTypes.func,
 };
-
-BpkDataTableColumn.propTypes = { ...Column.propTypes };
 BpkDataTableColumn.defaultProps = {
-  ...Column.defaultProps,
-  headerRenderer: bpkHeaderRenderer,
+  className: null,
+  disableSort: false,
+  defaultSortDirection: SORT_DIRECTION_TYPES.ASC,
+  flexGrow: 0,
+  label: null,
+  headerRenderer: null,
+  headerClassName: null,
+  headerStyle: null,
+  cellRenderer: null,
+  cellDataGetter: null,
 };
 
 export default BpkDataTableColumn;

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

@@ -0,0 +1,143 @@
+/*
+ * 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.
+ */
+/* @flow strict */
+
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
+import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
+import { withRtlSupport } from '../../bpk-component-icon';
+
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import STYLES from './BpkDataTableHeader.module.scss';
+import { type ColumnType } from './common-types';
+
+const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
+const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
+
+const getClassName = cssModules(STYLES);
+
+const KEYCODES = {
+  ENTER: 13,
+  SPACEBAR: 32,
+};
+
+const BpkDataTableHeader = ({ column }: { column: ColumnType }) => {
+  const {
+    defaultSortDirection,
+    disableSortBy,
+    flexGrow,
+    headerClassName,
+    headerStyle,
+    isSorted,
+    isSortedDesc,
+    label,
+    minWidth,
+    sortDirection,
+    width,
+  } = column;
+
+  const onHeaderClick = () => {
+    if (disableSortBy === true) {
+      return;
+    }
+    let isDescending;
+
+    if (isSorted) {
+      isDescending = isSortedDesc === false;
+    } else if (sortDirection) {
+      isDescending = sortDirection === SORT_DIRECTION_TYPES.DESC;
+    } else if (defaultSortDirection) {
+      isDescending = defaultSortDirection === SORT_DIRECTION_TYPES.DESC;
+    } else {
+      isDescending = false;
+    }
+
+    column.toggleSortBy(isDescending);
+  };
+
+  const handleKeyboardEvent = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (
+      event.keyCode === KEYCODES.ENTER ||
+      event.keyCode === KEYCODES.SPACEBAR
+    ) {
+      event.preventDefault();
+      onHeaderClick();
+    }
+  };
+
+  const headerClassNames = getClassName(
+    'bpk-data-table-column__header',
+    headerClassName,
+  );
+  const upIconClassNames = getClassName(
+    'bpk-data-table-column__sort-icon--up',
+    'bpk-data-table-column__sort-icon',
+    isSorted && !isSortedDesc && 'bpk-data-table-column__sort-icon--selected',
+  );
+
+  const downIconClassNames = getClassName(
+    'bpk-data-table-column__sort-icon--down',
+    'bpk-data-table-column__sort-icon',
+    isSorted && isSortedDesc && 'bpk-data-table-column__sort-icon--selected',
+  );
+
+  return (
+    <div
+      {...column.getHeaderProps({
+        style: {
+          width,
+          minWidth,
+          flexGrow,
+          ...headerStyle,
+        },
+        className: headerClassNames,
+      })}
+    >
+      <span
+        onClick={onHeaderClick}
+        onKeyDown={handleKeyboardEvent}
+        aria-label={label}
+        aria-pressed={isSorted}
+        role="button"
+        tabIndex={0}
+      >
+        {column.render('Header')}
+      </span>
+      {!disableSortBy && (
+        <div
+          className={getClassName('bpk-data-table-column__sort-icons')}
+          key="sort"
+          aria-hidden
+        >
+          <UpIcon
+            onClick={() => column.toggleSortBy(false)}
+            className={upIconClassNames}
+          />
+          <DownIcon
+            onClick={() => column.toggleSortBy(true)}
+            className={downIconClassNames}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BpkDataTableHeader;

package/bpk-component-datatable/src/{BpkDataTableColumn.module.scss → BpkDataTableHeader.module.scss}

@@ -16,24 +16,24 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
 
-.bpk-data-table-column {
+.bpk-data-table-column__header {
+  display: flex;
+  height: 100%;
   margin: bpk-spacing-base();
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+  flex-direction: row;
+  align-items: center;
+  outline-offset: -(bpk-spacing-sm());
 
-.bpk-data-table-column__header {
-  display: inline-block;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  @include bpk-label-2;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .bpk-data-table-column__sort-icons {

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.5",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "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-react-utils": "^7.0.0",
+    "bpk-component-breakpoint": "^5.0.5",
+    "bpk-component-calendar": "^13.0.2",
+    "bpk-component-input": "^7.0.5",
+    "bpk-component-modal": "^6.0.5",
+    "bpk-component-popover": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-datepicker/src/BpkDatepicker.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-datepicker {
   &__calendar {

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

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

package/bpk-component-description-list/src/BpkDescriptionList.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-description-list {
   margin: 0;

package/bpk-component-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "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-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.2",
+    "bpk-component-close-button": "^4.0.5",
+    "bpk-component-flare": "^3.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
+    "bpk-scrim-utils": "^6.0.5",
     "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.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-text": "^8.0.5"
   }
 }

package/bpk-component-dialog/src/BpkDialog.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-dialog/src/BpkDialogInner.module.scss

@@ -16,7 +16,7 @@
 * limitations under the License.
 */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -31,6 +31,7 @@ $bpk-spacing-v2: true;
   outline: 0;
   background-color: $bpk-modal-background-color;
   opacity: $bpk-modal-opacity;
+
   // FIX: Prevents ugly flickering when tapping inside the dialog in Mobile Safari
   -webkit-tap-highlight-color: transparent;
 
@@ -55,6 +56,7 @@ $bpk-spacing-v2: true;
 
   &__flare {
     height: bpk-spacing-lg() * 10;
+
     // We inherit radius from the outer modal so they match and align correctly to the container.
     border-radius: inherit;
     background-color: $bpk-color-sky-blue;

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "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",
-    "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.2",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-close-button": "^4.0.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-link": "^4.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
+    "bpk-scrim-utils": "^6.0.5",
     "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.5",
+    "bpk-component-text": "^8.0.5"
   }
 }