@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

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

@@ -1,3 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _reactTable = require("react-table");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkDataTableModule = _interopRequireDefault(require("./BpkDataTable.module.css"));
+var _sortTypes = require("./sort-types");
+var _BpkDataTableHeader = _interopRequireDefault(require("./BpkDataTableHeader"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "defaultColumnSortIndex", "headerClassName", "headerHeight", "height", "onRowClick", "rowClassName", "rowHeight", "rowStyle", "rows", "sort", "sortBy", "sortDirection", "width"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,104 +31,65 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { KeyboardEvent } from 'react';
-import { useMemo, useState } from 'react';
-import { useTable, useSortBy } from 'react-table';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkDataTable.module.scss';
-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);
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDataTableModule.default);
 const KEYCODES = {
   ENTER: 13,
-  SPACEBAR: 32,
+  SPACEBAR: 32
 };
-
-const BpkDataTable = (props: Props) => {
+const BpkDataTable = props => {
   const {
-    children,
-    className,
-    defaultColumnSortIndex,
-    headerClassName,
-    headerHeight,
-    height,
-    onRowClick,
-    rowClassName,
-    rowHeight,
-    rowStyle,
-    rows: data,
-    sort,
-    sortBy,
-    sortDirection,
-    width,
-    ...restOfProps
-  } = props;
-
-  const [rowSelected, updateRowSelected] = useState(undefined);
-
+      children,
+      className,
+      defaultColumnSortIndex,
+      headerClassName,
+      headerHeight,
+      height,
+      onRowClick,
+      rowClassName,
+      rowHeight,
+      rowStyle,
+      rows: data,
+      sort,
+      sortBy,
+      sortDirection,
+      width
+    } = props,
+    restOfProps = _objectWithoutProperties(props, _excluded);
+  const [rowSelected, updateRowSelected] = (0, _react.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',
-      onRowClick !== undefined && 'bpk-data-table__row--clickable',
-      index === -1 && 'bpk-data-table__header-row',
-      consumerClassName &&
-        (typeof consumerClassName === 'function'
-          ? consumerClassName({ index })
-          : consumerClassName),
-    );
+  const getRowClassNames = (consumerClassName, index) => {
+    const rowClassNames = getClassName('bpk-data-table__row', rowSelected === index && 'bpk-data-table__row--selected', onRowClick !== undefined && 'bpk-data-table__row--clickable', index === -1 && 'bpk-data-table__header-row', consumerClassName && (typeof consumerClassName === 'function' ? consumerClassName({
+      index
+    }) : consumerClassName));
     return rowClassNames;
   };
-
-  const headerClassNames = getClassName(
-    'bpk-data-table__row',
-    'bpk-data-table__header-row',
-    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,
-    );
-
-  const onRowClicked = (index: number) => {
+  const headerClassNames = getClassName('bpk-data-table__row', 'bpk-data-table__header-row', headerClassName);
+  const columns = (0, _react.useMemo)(() => (0, _utils.getColumns)(children), [children]);
+  const {
+    getTableBodyProps,
+    getTableProps,
+    headerGroups,
+    prepareRow,
+    rows
+  } = (0, _reactTable.useTable)({
+    columns,
+    data,
+    initialState: {
+      sortBy: (0, _react.useMemo)(() => [...(sort ? [] : [{
+        id: columns[defaultColumnSortIndex].accessor,
+        desc: columns[defaultColumnSortIndex].defaultSortDirection === 'DESC' || false
+      }])], [defaultColumnSortIndex, columns, sort])
+    }
+  }, _reactTable.useSortBy);
+  const onRowClicked = index => {
     if (rowSelected === index) {
       updateRowSelected(undefined);
     } else {
@@ -122,107 +99,87 @@ const BpkDataTable = (props: Props) => {
       onRowClick(rows[index].original);
     }
   };
-
-  const handleKeyboardEvent = (
-    event: KeyboardEvent<HTMLElement>,
-    i: number,
-  ) => {
-    if (
-      event.keyCode === KEYCODES.ENTER ||
-      event.keyCode === KEYCODES.SPACEBAR
-    ) {
+  const handleKeyboardEvent = (event, i) => {
+    if (event.keyCode === KEYCODES.ENTER || event.keyCode === KEYCODES.SPACEBAR) {
       event.preventDefault();
       onRowClicked(i);
     }
   };
-
-  return (
-    <div
-      {...getTableProps({
-        style: { width, height },
-        className: classNames,
-      })}
-      {...restOfProps}
-    >
-      <div>
-        {headerGroups.map((headerGroup) => (
-          <div
-            {...headerGroup.getHeaderGroupProps({
-              style: { height: 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: {
-                  ...rowStyle,
-                  height: rowHeight,
-                },
-                className: getRowClassNames(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>
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread(_objectSpread({}, getTableProps({
+    style: {
+      width,
+      height
+    },
+    className: classNames
+  })), restOfProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: headerGroups.map(headerGroup => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps({
+        style: {
+          height: headerHeight
+        },
+        className: headerClassNames
+      })), {}, {
+        children: 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkDataTableHeader.default, {
+            column: column
+          }, column.id);
+        })
+      })))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getTableBodyProps()), {}, {
+      children: rows.map((row, i) => {
+        prepareRow(row);
+        const cellClassNames = [getClassName('bpk-data-table__cell')];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+          onClick: () => onRowClicked(i),
+          role: "button",
+          onKeyDown: event => handleKeyboardEvent(event, i),
+          tabIndex: 0
+        }, row.getRowProps({
+          style: _objectSpread(_objectSpread({}, rowStyle), {}, {
+            height: rowHeight
+          }),
+          className: getRowClassNames(rowClassName, i)
+        })), {}, {
+          children: row.cells.map(cell => {
+            if (cell.column.className) {
+              cellClassNames.push(cell.column.className);
+            }
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, cell.getCellProps({
+              style: {
+                width: cell.column.width,
+                minWidth: cell.column.minWidth,
+                flexGrow: cell.column.flexGrow
+              },
+              className: cellClassNames.join(' ')
+            })), {}, {
+              children: cell.render('Cell')
+            }));
+          })
+        }));
+      })
+    }))]
+  }));
 };
-
 BpkDataTable.propTypes = {
-  rows: PropTypes.arrayOf(Object).isRequired,
-  children: PropTypes.node.isRequired,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  headerHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  defaultColumnSortIndex: PropTypes.number,
-  sort: PropTypes.func,
-  sortBy: PropTypes.string,
-  sortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
+  rows: _propTypes.default.arrayOf(Object).isRequired,
+  children: _propTypes.default.node.isRequired,
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  headerHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  rowHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  className: _propTypes.default.string,
+  defaultColumnSortIndex: _propTypes.default.number,
+  sort: _propTypes.default.func,
+  sortBy: _propTypes.default.string,
+  sortDirection: _propTypes.default.oneOf(Object.keys(_sortTypes.SORT_DIRECTION_TYPES))
 };
-
 BpkDataTable.defaultProps = {
   width: null,
   headerHeight: 60,
@@ -231,7 +188,7 @@ BpkDataTable.defaultProps = {
   defaultColumnSortIndex: 0,
   sort: null,
   sortBy: null,
-  sortDirection: SORT_DIRECTION_TYPES.ASC,
+  sortDirection: _sortTypes.SORT_DIRECTION_TYPES.ASC
 };
-
-export default BpkDataTable;
+var _default = BpkDataTable;
+exports.default = _default;

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

@@ -1,60 +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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { SORT_DIRECTION_TYPES } from './sort-types';
-import { type BpkDataTableColumnProps } from './common-types';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _sortTypes = require("./sort-types");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
+                                                                                                                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                                                                                                                           */
 // 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} />
-);
-
+const BpkDataTableColumn = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, 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,
+  dataKey: _propTypes.default.string.isRequired,
+  width: _propTypes.default.number.isRequired,
+  className: _propTypes.default.string,
+  disableSort: _propTypes.default.bool,
+  defaultSortDirection: _propTypes.default.oneOf(Object.keys(_sortTypes.SORT_DIRECTION_TYPES)),
+  flexGrow: _propTypes.default.number,
+  label: _propTypes.default.string,
+  headerRenderer: _propTypes.default.func,
+  headerClassName: _propTypes.default.string,
+  headerStyle: _propTypes.default.object,
+  // eslint-disable-line react/forbid-prop-types
+  cellRenderer: _propTypes.default.func,
+  cellDataGetter: _propTypes.default.func
 };
 BpkDataTableColumn.defaultProps = {
   className: null,
   disableSort: false,
-  defaultSortDirection: SORT_DIRECTION_TYPES.ASC,
+  defaultSortDirection: _sortTypes.SORT_DIRECTION_TYPES.ASC,
   flexGrow: 0,
   label: null,
   headerRenderer: null,
   headerClassName: null,
   headerStyle: null,
   cellRenderer: null,
-  cellDataGetter: null,
+  cellDataGetter: null
 };
-
-export default BpkDataTableColumn;
+var _default = BpkDataTableColumn;
+exports.default = _default;