@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard.tsx → BpkContentCard.js}

@@ -19,9 +19,9 @@
 import React from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from '../../../bpk-component-text';
+import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { cssModules } from '../../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkContentCard.module.scss';
 
@@ -32,14 +32,14 @@ type CardLayout = 'HORIZONTAL' | 'VERTICAL';
 type Props = {
   card: {
     image: {
-      url: string;
-      alt?: string;
-    };
-    headline: string;
-    description: string;
-    href: string;
-  };
-  layout: CardLayout;
+      url: string,
+      alt?: string,
+    },
+    headline: string,
+    description: string,
+    href: string,
+  },
+  layout: CardLayout,
 };
 
 const BpkContentCard = ({ card, layout }: Props) => (
@@ -55,7 +55,6 @@ const BpkContentCard = ({ card, layout }: Props) => (
     rel="noreferrer"
   >
     <div className={getClassName('bpk-content-card--image-container')}>
-      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
       <img
         className={getClassName('bpk-content-card--image')}
         alt={card.image.alt || ''}

package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard.module.scss → BpkContentCard.module.scss}

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-content-cards/src/{BpkContentCards.tsx → BpkContentCards.js}

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* eslint react/no-array-index-key: 0 */
 
 import React from 'react';
 
@@ -29,16 +30,16 @@ import STYLES from './BpkContentCards.module.scss';
 const getClassName = cssModules(STYLES);
 
 type Props = {
-  heading: string;
+  heading: string,
   cards: Array<{
     image: {
-      url: string;
-      alt?: string;
-    };
-    headline: string;
-    description: string;
-    href: string;
-  }>;
+      url: string,
+      alt?: string,
+    },
+    headline: string,
+    description: string,
+    href: string,
+  }>,
 };
 
 const BpkContentCards = ({ cards, heading }: Props) => {
@@ -55,10 +56,9 @@ const BpkContentCards = ({ cards, heading }: Props) => {
         {heading}
       </BpkText>
       <div role="list" className={getClassName('bpk-content-cards--layout')}>
-        {cards.map((card) => (
-          <div role="listitem">
+        {cards.map((card, index) => (
+          <div role="listitem" key={index}>
             <BpkContentCard
-              key={card.image.url}
               card={card}
               layout={cards.length === 1 ? 'HORIZONTAL' : 'VERTICAL'}
             />

package/bpk-component-content-cards/src/BpkContentCards.module.scss

@@ -18,7 +18,7 @@
 
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable selector-max-compound-selectors */
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-content-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-content-container",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Backpack content container 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-content-container/src/BpkContentContainer.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-content-container {
   > {

package/bpk-component-datatable/README.md

@@ -38,12 +38,11 @@ export default () => (
 );
 ```
 
-By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection` and they will be handled as explained in react-virtualized's [docs] (https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md#prop-types)
+By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection`.
 
 ```js
 import React from 'react';
 import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
-import _sortBy from 'lodash/sortBy';
 
 const complexRows = [
     {
@@ -65,21 +64,16 @@ const complexRows = [
 
 let sortByValue = 'seat';
 let sortDirectionValue = 'DESC';
-const sortFunction = ({ sortBy, sortDirection }) => {
-  if (sortBy === 'seat') {
-    complexRows = _sortBy(complexRows, [
-      row => row.seat.office,
-      row => row.seat.desk,
-    ]);
+const sortFunction = (rowA, rowB, id, desc) => {
+  const deskA = rowA.values.seat.desk;
+  const deskB = rowB.values.seat.desk;
+
+  if (deskA === deskB) {
+      return 0;
   } else {
-    complexRows = _sortBy(complexRows, sortBy);
-  }
-  if (sortDirection === 'DESC') {
-    complexRows.reverse();
+      return deskA > deskB ? 1 : -1;
   }
-  sortByValue = sortBy;
-  sortDirectionValue = sortDirection;
-};
+}
 
 export default () => (
   <BpkDataTable
@@ -118,10 +112,6 @@ export default () => (
 
 ### BpkDataTable
 
-Supports all properties defined in [`Table`](https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md) (from `react-virtualized`),
-in addition to the following:
-
-
 | Property               | PropType                    | Required | Default Value        |
 | ---------------------- | --------------------------- | -------- | -------------------- |
 | rows                   | arrayOf(Object)             | true     | -                    |
@@ -130,12 +120,79 @@ in addition to the following:
 | width                  | number                      | false    | full width of parent |
 | headerHeight           | number                      | false    | 60                   |
 | rowHeight              | number                      | false    | 60                   |
+| rowStyle               | object                      | false    | {}                   |
+| onRowClick             | func                        | false    | null                 |
+| className              | string                      | false    | null                 |
 | defaultColumnSortIndex | number                      | false    | 0                    |
 | sort                   | func                        | false    | null                 |
 | sortBy                 | string                      | false    | null                 |
-| sortDirection          | oneOf('ASC', 'DESC')        | false    | null                 |
+| sortDirection          | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
 
 
 ### BpkDataTableColumn
 
-Supports all properties defined in [`Column`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md) (from `react-virtualized`)
+| Property               | PropType                    | Required | Default Value        |
+| ---------------------- | --------------------------- | -------- | -------------------- |
+| dataKey                | string                      | true     | -                    |
+| width                  | number                      | true     | -                    |
+| flexGrow               | number                      | false    | 0                    |
+| label                  | string                      | false    | null                 |
+| headerRenderer         | func                        | false    | null                 |
+| headerClassName        | string                      | false    | null                 |
+| headerStyle            | object                      | false    | {}                   |
+| cellRenderer           | func                        | false    | null                 |
+| cellDataGetter         | func                        | false    | null                 |
+| disableSort            | bool                        | false    | false                |
+| defaultSortDirection   | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
+| className              | string                      | false    | null                 |
+
+### Prop Details
+
+
+#### sort, sortBy, sortDirection
+
+For custom sorting, pass a `sort` function.
+Use `sortBy` to specify which column the custom sorting will be applied to.
+Use `sortDirection` to set the direction of sorting. By default, it will be ascending.
+
+#### defaultColumnSortIndex
+
+The data will be sorted by default based on this column.
+
+#### headerRenderer
+
+To handle more complex header data that needs any custom processing, pass a function or component to `headerRenderer` prop. This will only be formatting the header value - all styling will be handled by the component.
+It should implement the following signature:
+
+```
+  function ({
+  dataKey: string, disableSort: boolean, label: string
+  }): element
+```
+
+#### cellDataGetter
+
+To handle more complex cell data that needs any custom processing, pass a function or component to `cellDataGetter` prop. This will only be formatting the cell value - all styling will be handled by the component.
+It should implement the following signature:
+
+```
+function ({
+  dataKey: string,
+  rowData: any
+}): any
+```
+
+#### cellRenderer
+
+To handle more complex cell data that needs any custom processing, pass a function or component to `cellRenderer` prop. This will only be formatting the cell value - all styling will be handled by the component. To maintain backward compatibility, both `cellRenderer` and `cellDataGetter` will be supported, however, they are interchangeable as they both can only format the cell value.
+It should implement the following signature:
+
+```
+function ({
+  cellData: any,
+  columnIndex: number,
+  dataKey: string,
+  rowData: any,
+  rowIndex: any,
+}): node
+```

package/bpk-component-datatable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datatable",
-  "version": "5.0.2",
+  "version": "6.0.2",
   "description": "Backpack datatable component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
-    "lodash": "^4.17.20",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2",
-    "react-virtualized": "^9.22.3"
+    "react-table": "^7.8.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0"
+    "@skyscanner/bpk-foundations-web": "^9.3.0"
   }
 }

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

@@ -18,180 +18,213 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Table, AutoSizer } from 'react-virtualized';
-import _omit from 'lodash/omit';
+import React, { useMemo, useState } from 'react';
+import { useTable, useSortBy } from 'react-table';
 
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkDataTable.module.scss';
-import BpkDataTableColumn from './BpkDataTableColumn';
-import hasChildrenOfType from './hasChildrenOfType';
-import makeSorter, { type Sorter } from './sorter';
 import type { Props } from './common-types';
+import { SORT_DIRECTION_TYPES } from './sort-types';
+import BpkDataTableHeader from './BpkDataTableHeader';
+import { getColumns } from './utils';
 
 const getClassName = cssModules(STYLES);
-const omittedTableProps = ['rowGetter', 'rowCount', 'onHeaderClick'];
 
-type State<Row> = {
-  sorter: Sorter<Row>,
-  rowSelected: ?number,
+const KEYCODES = {
+  ENTER: 13,
+  SPACEBAR: 32,
 };
 
-class BpkDataTable<Row> extends Component<Props<Row>, State<Row>> {
-  static defaultProps = {
-    ...Table.defaultProps,
-    width: null,
-    headerHeight: 60,
-    rowHeight: 60,
-    gridStyle: { direction: undefined }, // This is required for rows to automatically respect rtl
-    defaultColumnSortIndex: 0,
-    sort: null,
-    sortBy: null,
-    sortDirection: null,
-  };
-
-  constructor(props: Props<Row>) {
-    super();
-
-    this.state = {
-      sorter: makeSorter(props),
-      rowSelected: undefined,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props<Row>) {
-    if (nextProps.rows !== this.props.rows) {
-      this.state.sorter.propsChange(nextProps);
-    }
-  }
-
-  onRowClicked = ({ index }: { index: number }) => {
-    if (this.state.rowSelected === index) {
-      this.setState({ rowSelected: undefined });
-    } else {
-      this.setState({ rowSelected: index });
-    }
-    if (this.props.onRowClick !== undefined) {
-      this.props.onRowClick(this.state.sorter.getRow(index));
-    }
+const BpkDataTable = (props: Props) => {
+  const {
+    children,
+    className,
+    defaultColumnSortIndex,
+    height,
+    rows: data,
+    sort,
+    sortBy,
+    sortDirection,
+    width,
+    ...restOfProps
+  } = props;
+
+  const [rowSelected, updateRowSelected] = useState(undefined);
+
+  const classNames = getClassName('bpk-data-table', className);
+
+  const getRowClassNames = (
+    consumerClassName: ?string | ?(({ index: number }) => string),
+    index: number,
+  ) => {
+    const rowClassNames = getClassName(
+      'bpk-data-table__row',
+      rowSelected === index && 'bpk-data-table__row--selected',
+      props.onRowClick !== undefined && 'bpk-data-table__row--clickable',
+      index === -1 && 'bpk-data-table__header-row',
+      consumerClassName &&
+        (typeof consumerClassName === 'function'
+          ? consumerClassName({ index })
+          : consumerClassName),
+    );
+    return rowClassNames;
   };
 
-  onHeaderClick = ({
-    dataKey: sortBy,
-    event,
-  }: {
-    dataKey: string,
-    event: SyntheticEvent<HTMLDivElement>,
-  }) => {
-    const column = React.Children.toArray(this.props.children).find(
-      (child) => child.props.dataKey === sortBy,
+  const headerClassNames = getClassName(
+    'bpk-data-table__row',
+    'bpk-data-table__header-row',
+    props.headerClassName,
+  );
+
+  const columns = useMemo(() => getColumns(children), [children]);
+
+  const { getTableBodyProps, getTableProps, headerGroups, prepareRow, rows } =
+    useTable(
+      {
+        columns,
+        data,
+        initialState: {
+          sortBy: useMemo(
+            () => [
+              ...(sort
+                ? []
+                : [
+                    {
+                      id: columns[defaultColumnSortIndex].accessor,
+                      desc:
+                        columns[defaultColumnSortIndex].defaultSortDirection ===
+                          'DESC' || false,
+                    },
+                  ]),
+            ],
+            [defaultColumnSortIndex, columns, sort],
+          ),
+        },
+      },
+      useSortBy,
     );
 
-    if (!column) {
-      return;
-    }
-
-    if (column.props.disableSort === true) {
-      return;
+  const onRowClicked = (index: number) => {
+    if (rowSelected === index) {
+      updateRowSelected(undefined);
+    } else {
+      updateRowSelected(index);
     }
-
-    // See: https://reactjs.org/docs/legacy-event-pooling.html
-    const eventTarget = event.target;
-    if (eventTarget instanceof Element) {
-      this.setState((prevState) => ({
-        sorter: prevState.sorter.onHeaderClick(sortBy, eventTarget, column),
-      }));
+    if (props.onRowClick !== undefined) {
+      props.onRowClick(rows[index].original);
     }
   };
 
-  rowClassName = (
-    consumerClassName: ?string | ?(({ index: number }) => string),
-    { index }: { index: number },
+  const handleKeyboardEvent = (
+    event: React.KeyboardEvent<HTMLElement>,
+    i: number,
   ) => {
-    const classNames = [getClassName('bpk-data-table__row')];
-    if (this.state.rowSelected === index) {
-      classNames.push(getClassName('bpk-data-table__row--selected'));
-    }
-    if (this.props.onRowClick !== undefined) {
-      classNames.push(getClassName('bpk-data-table__row--clickable'));
-    }
-    if (index === -1) {
-      classNames.push(getClassName('bpk-data-table__header-row'));
-    }
-    if (consumerClassName) {
-      if (typeof consumerClassName === 'function') {
-        classNames.push(consumerClassName({ index }));
-      } else {
-        classNames.push(consumerClassName);
-      }
+    if (
+      event.keyCode === KEYCODES.ENTER ||
+      event.keyCode === KEYCODES.SPACEBAR
+    ) {
+      event.preventDefault();
+      onRowClicked(i);
     }
-    return classNames;
   };
 
-  renderTable(width: ?number) {
-    const {
-      children,
-      className,
-      headerClassName,
-      rowClassName,
-      sort,
-      ...restOfProps
-    } = this.props;
-
-    const classNames = [getClassName('bpk-data-table')];
-    if (className) {
-      classNames.push(className);
-    }
-
-    const headerClassNames = [getClassName('bpk-data-table__header-column')];
-    if (headerClassName) {
-      headerClassNames.push(headerClassName);
-    }
-
-    return (
-      // $FlowFixMe[cannot-spread-inexact]
-      <Table
-        {...restOfProps}
-        className={classNames.join(' ')}
-        width={width}
-        rowCount={this.state.sorter.rowCount}
-        rowGetter={({ index }) => this.state.sorter.getRow(index)}
-        headerClassName={headerClassNames.join(' ')}
-        rowClassName={(row) => this.rowClassName(rowClassName, row)}
-        onRowClick={this.onRowClicked}
-        onHeaderClick={this.onHeaderClick}
-        {...this.state.sorter.sortProps}
-      >
-        {React.Children.map(children, BpkDataTableColumn.toColumn)}
-      </Table>
-    );
-  }
-
-  render() {
-    if (this.props.width !== null) {
-      return this.renderTable(this.props.width);
-    }
-
-    return (
-      <AutoSizer disableHeight>
-        {({ width }) => this.renderTable(width)}
-      </AutoSizer>
-    );
-  }
-}
+  return (
+    <div
+      {...getTableProps({
+        style: { width, height },
+        className: classNames,
+      })}
+      {...restOfProps}
+    >
+      <div>
+        {headerGroups.map((headerGroup) => (
+          <div
+            {...headerGroup.getHeaderGroupProps({
+              style: { height: props.headerHeight },
+              className: headerClassNames,
+            })}
+          >
+            {headerGroup.headers.map((column) => {
+              if (sort && sortBy) {
+                if (column.id === sortBy) {
+                  column.sortType = sort; // eslint-disable-line no-param-reassign
+                  column.sortDirection = sortDirection; // eslint-disable-line no-param-reassign
+                }
+              }
+              return <BpkDataTableHeader key={column.id} column={column} />;
+            })}
+          </div>
+        ))}
+      </div>
+      <div {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          const cellClassNames = [getClassName('bpk-data-table__cell')];
+          return (
+            <div
+              onClick={() => onRowClicked(i)}
+              role="button"
+              onKeyDown={(event) => handleKeyboardEvent(event, i)}
+              tabIndex={0}
+              {...row.getRowProps({
+                style: {
+                  ...props.rowStyle,
+                  height: props.rowHeight,
+                },
+                className: getRowClassNames(props.rowClassName, i),
+              })}
+            >
+              {row.cells.map((cell) => {
+                if (cell.column.className) {
+                  cellClassNames.push(cell.column.className);
+                }
+                return (
+                  <div
+                    {...cell.getCellProps({
+                      style: {
+                        width: cell.column.width,
+                        minWidth: cell.column.minWidth,
+                        flexGrow: cell.column.flexGrow,
+                      },
+                      className: cellClassNames.join(' '),
+                    })}
+                  >
+                    {cell.render('Cell')}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 BpkDataTable.propTypes = {
-  ..._omit(Table.propTypes, omittedTableProps),
   rows: PropTypes.arrayOf(Object).isRequired,
-  children: hasChildrenOfType(BpkDataTableColumn),
+  children: PropTypes.node.isRequired,
+  height: PropTypes.number.isRequired,
   width: PropTypes.number,
   headerHeight: PropTypes.number,
+  rowHeight: PropTypes.number,
   className: PropTypes.string,
   defaultColumnSortIndex: PropTypes.number,
   sort: PropTypes.func,
   sortBy: PropTypes.string,
-  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
+  sortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
+};
+
+BpkDataTable.defaultProps = {
+  width: null,
+  headerHeight: 60,
+  rowHeight: 60,
+  className: null,
+  defaultColumnSortIndex: 0,
+  sort: null,
+  sortBy: null,
+  sortDirection: SORT_DIRECTION_TYPES.ASC,
 };
 
 export default BpkDataTable;