@skyscanner/backpack-web 9.2.0-beta.3 → 10.0.0

package/bpk-component-table/package.json

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

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^6.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-label": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-label": "^6.0.1",
-    "bpk-component-select": "^6.0.1",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-label": "^6.0.3",
+    "bpk-component-select": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-icon": "^10.0.1"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-icon": "^10.0.3"
   }
 }

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-text": "^8.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-scrim-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-scrim-utils",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Higher order component that adds an overlay behind components and manages scroll states.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0"
   },
   "peerDependencies": {

package/bpk-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-theming",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Backpack theming utlities.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "9.2.0-beta.3",
+  "version": "10.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "@skyscanner/bpk-svgs": "^14.3.6",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "@skyscanner/bpk-svgs": "^14.4.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",
@@ -42,7 +42,8 @@
     "react-responsive": "^6.1.2",
     "react-slider": "^1.3.1",
     "react-transition-group": "^2.5.3",
-    "react-virtualized": "^9.22.3"
+    "react-virtualized": "^9.22.3",
+    "react-window": "^1.8.7"
   },
   "peerDependencies": {
     "react": "^17.0.2"

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

@@ -1,110 +0,0 @@
-/*
- * 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 { SortDirection } from 'react-virtualized';
-
-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 { hasClassName } from './utils';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType, type SortProps } from './sort-types';
-
-const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
-const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
-
-const getClassName = cssModules(STYLES);
-const upIconClassName = getClassName('bpk-data-table-column__sort-icon--up');
-const downIconClassName = getClassName(
-  'bpk-data-table-column__sort-icon--down',
-);
-
-export const getSortIconDirection = (element: Element): ?SortDirectionType => {
-  if (
-    hasClassName(element, upIconClassName) ||
-    hasClassName(element.parentElement, upIconClassName)
-  ) {
-    return SortDirection.ASC;
-  }
-  if (
-    hasClassName(element, downIconClassName) ||
-    hasClassName(element.parentElement, downIconClassName)
-  ) {
-    return SortDirection.DESC;
-  }
-  return null;
-};
-
-type Props = {
-  dataKey: string,
-  label: string,
-  disableSort: boolean,
-  ...$Exact<SortProps>,
-};
-export default ({
-  dataKey,
-  disableSort,
-  label,
-  sortBy,
-  sortDirection,
-}: Props) => {
-  const children = [
-    <span
-      className={getClassName('bpk-data-table-column__header')}
-      key="label"
-      title={label}
-    >
-      {label}
-    </span>,
-  ];
-
-  if (!disableSort) {
-    const upIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      upIconClassName,
-    ];
-
-    const downIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      downIconClassName,
-    ];
-
-    if (sortBy === dataKey) {
-      (sortDirection === SortDirection.ASC
-        ? upIconClassNames
-        : downIconClassNames
-      ).push(getClassName('bpk-data-table-column__sort-icon--selected'));
-    }
-
-    children.push(
-      <div
-        className={getClassName('bpk-data-table-column__sort-icons')}
-        key="sort"
-      >
-        <UpIcon className={upIconClassNames.join(' ')} />
-        <DownIcon className={downIconClassNames.join(' ')} />
-      </div>,
-    );
-  }
-
-  return children;
-};

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

@@ -1,166 +0,0 @@
-/*
- * 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 _sortBy from 'lodash/sortBy';
-import { SortDirection } from 'react-virtualized';
-
-import { getSortIconDirection } from './bpkHeaderRenderer';
-import type { Props, SortProps, SortDirectionType } from './common-types';
-
-export type Sorter<Row> = {
-  rowCount: number,
-  getRow(indext: number): Row,
-  propsChange(props: Props<Row>): void,
-  onHeaderClick(sortBy: string, eventTarget: Element, column: any): Sorter<Row>,
-  sortProps: SortProps,
-};
-
-const getSortDirection = (
-  sortProps: SortProps,
-  newSortBy: ?string,
-  newSortDirection: ?SortDirectionType,
-  defaultSortDirection: SortDirectionType,
-): SortDirectionType => {
-  const { sortBy, sortDirection } = sortProps;
-  if (newSortDirection != null) {
-    return newSortDirection;
-  }
-  if (sortBy === newSortBy) {
-    return sortDirection === SortDirection.ASC
-      ? SortDirection.DESC
-      : SortDirection.ASC;
-  }
-  return defaultSortDirection;
-};
-
-class NaiveSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  sortedList: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    const children = React.Children.toArray(props.children);
-
-    const sortBy =
-      React.Children.count(props.children) > 0
-        ? children[props.defaultColumnSortIndex].props.dataKey
-        : undefined;
-    const sortDirection =
-      children[props.defaultColumnSortIndex].props.defaultSortDirection ||
-      SortDirection.ASC;
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-    this.list = props.rows;
-    this.sort();
-  }
-
-  getRow(index: number): Row {
-    return this.sortedList[index];
-  }
-
-  sort() {
-    const sorted = _sortBy(this.list, this.sortProps.sortBy);
-    if (this.sortProps.sortDirection === 'DESC') {
-      sorted.reverse();
-    }
-    this.sortedList = sorted;
-    this.rowCount = this.sortedList.length;
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.list = nextProps.rows;
-    this.sort();
-  }
-
-  onHeaderClick(sortBy: string, eventTarget: Element, column): Sorter<Row> {
-    const sortDirection = getSortDirection(
-      this.sortProps,
-      sortBy,
-      getSortIconDirection(eventTarget),
-      column.props.defaultSortDirection || SortDirection.ASC,
-    );
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-
-    this.sort();
-    return this;
-  }
-}
-
-class PropSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    this.sortProps = {
-      sortBy: props.sortBy,
-      sortDirection: props.sortDirection,
-      sort: props.sort,
-    };
-    this.list = props.rows;
-    this.rowCount = props.rows.length;
-  }
-
-  getRow(index: number): Row {
-    return this.list[index];
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.sortProps = {
-      sortBy: nextProps.sortBy,
-      sortDirection: nextProps.sortDirection,
-      sort: nextProps.sort,
-    };
-    this.list = nextProps.rows;
-    this.rowCount = nextProps.rows.length;
-  }
-
-  onHeaderClick(): Sorter<Row> {
-    return this;
-  }
-}
-
-const makeSorter = <Row>(props: Props<Row>): Sorter<Row> => {
-  if (
-    props.sort !== null &&
-    props.sortBy !== null &&
-    props.sortDirection !== null
-  ) {
-    return new PropSorter(props);
-  }
-  return new NaiveSorter(props);
-};
-
-export default makeSorter;