npm - @skyscanner/backpack-web - Versions diffs - 18.2.0 → 19.0.0 - Mend

@skyscanner/backpack-web 18.2.0 → 19.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/bpk-component-calendar/src/BpkCalendarGrid.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';

package/bpk-component-calendar/src/BpkCalendarGridHeader.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import { cssModules, deprecated } from '../../bpk-react-utils';

package/bpk-component-calendar/src/BpkCalendarGridTransition.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules, isRTL } from '../../bpk-react-utils';

package/bpk-component-calendar/src/BpkCalendarNav.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
 import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';

package/bpk-component-calendar/src/Week.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules, deprecated } from '../../bpk-react-utils';

package/bpk-component-calendar/src/composeCalendar.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules, deprecated } from '../../bpk-react-utils';

package/bpk-component-card/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### BpkCard
 ```js
-import React from 'react';
 import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
 export default () => (
@@ -26,7 +25,6 @@ export default () => (
 ### BpkDividedCard
 ```js
-import React from 'react';
 import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-card';
 export default () => (

package/bpk-component-card/src/BpkCard.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-card/src/BpkDividedCard.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-checkbox/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
 export default () => (

package/bpk-component-checkbox/src/BpkCheckbox.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-chip/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkSelectableChip, { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
 import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';

package/bpk-component-chip/src/BpkDismissibleChip.js CHANGED Viewed

@@ -24,8 +24,6 @@ been hard coded to have disabled={false}, selected and a trailing
 accessory view of a close icon.
 */
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';

package/bpk-component-chip/src/BpkDropdownChip.js CHANGED Viewed

@@ -23,8 +23,6 @@ The dropdown chip component is just a selectable chip component
 with a trailing accessory view of a chevron down icon.
 */
-import React from 'react';
 import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
 import BpkSelectableChip from './BpkSelectableChip';

package/bpk-component-chip/src/BpkSelectableChip.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';

package/bpk-component-close-button/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
 export default () => (

package/bpk-component-close-button/src/BpkCloseButton.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type StatelessFunctionalComponent } from 'react';
+import type { StatelessFunctionalComponent } from 'react';
 import CloseIcon from '../../bpk-component-icon/sm/close';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-code/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkCode, BpkCodeBlock } from '@skyscanner/backpack-web/bpk-component-code';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';

package/bpk-component-code/src/BpkCode.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-code/src/BpkCodeBlock.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-content-cards/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```tsx
-import React from 'react';
 import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';
 <BpkContentCards

package/bpk-component-content-cards/src/BpkContentCard.js CHANGED Viewed

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-content-cards/src/BpkContentCards.js CHANGED Viewed

@@ -17,8 +17,6 @@
  */
 /* eslint react/no-array-index-key: 0 */
-import React from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-datatable/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 const rows = [
@@ -39,7 +38,7 @@ 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`.
 ```js
-import React from 'react';
+import { Fragment } from 'react';
 import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 const complexRows = [
@@ -97,9 +96,9 @@ export default () => (
       width={100}
       flexGrow={1}
       cellRenderer={({ cellData }) => (
-        <React.Fragment>
+        <Fragment>
           {cellData.office} - {cellData.desk}
-        </React.Fragment>
+        </Fragment>
       )}
     />
   </BpkDataTable>

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

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { useMemo, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from '../../bpk-react-utils';
@@ -123,7 +124,7 @@ const BpkDataTable = (props: Props) => {
   };
   const handleKeyboardEvent = (
-    event: React.KeyboardEvent<HTMLElement>,
+    event: KeyboardEvent<HTMLElement>,
     i: number,
   ) => {
     if (

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

@@ -17,7 +17,6 @@
  */
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { SORT_DIRECTION_TYPES } from './sort-types';

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

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React from 'react';
+import type { KeyboardEvent } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
@@ -72,7 +72,7 @@ const BpkDataTableHeader = ({ column }: { column: ColumnType }) => {
     column.toggleSortBy(isDescending);
   };
-  const handleKeyboardEvent = (event: React.KeyboardEvent<HTMLElement>) => {
+  const handleKeyboardEvent = (event: KeyboardEvent<HTMLElement>) => {
     if (
       event.keyCode === KEYCODES.ENTER ||
       event.keyCode === KEYCODES.SPACEBAR

package/bpk-component-datepicker/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-datepicker';
 import format from 'date-fns/format';
@@ -71,7 +71,7 @@ export default class App extends Component {
 By default `BpkCalendar` is used but the calendar component is fully configurable through the `calendarComponent` prop.
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDatepicker from '@skyscanner/backpack-web/bpk-component-datepicker';
 import {
   BpkCalendarNav,

package/bpk-component-datepicker/src/BpkDatepicker.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import BpkInput, { withOpenEvents } from '../../bpk-component-input';
 import BpkModal from '../../bpk-component-modal';
@@ -58,7 +58,7 @@ class BpkDatepicker extends Component {
     this.state = {
       isOpen: props.isOpen,
     };
-    this.inputRef = React.createRef();
+    this.inputRef = createRef();
   }
   componentDidUpdate(prevProps, prevState) {

package/bpk-component-description-list/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from '@skyscanner/backpack-web/bpk-component-description-list';
 export default () => (

package/bpk-component-description-list/src/ComponentFactory.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-dialog/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDialog from '@skyscanner/backpack-web/bpk-component-dialog';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

package/bpk-component-dialog/src/BpkDialog.js CHANGED Viewed

@@ -18,8 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import { cssModules, Portal } from '../../bpk-react-utils';
 import BpkCloseButton from '../../bpk-component-close-button';

package/bpk-component-dialog/src/BpkDialogInner.js CHANGED Viewed

@@ -18,8 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 import { withScrim } from '../../bpk-scrim-utils';
 import { BpkContentBubble } from '../../bpk-component-flare';

package/bpk-component-drawer/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

package/bpk-component-drawer/src/BpkDrawer.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { Portal, cssModules } from '../../bpk-react-utils';
 import { withScrim } from '../../bpk-scrim-utils';

package/bpk-component-drawer/src/BpkDrawerContent.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

package/bpk-component-fieldset/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkFieldset from '@skyscanner/backpack-web/bpk-component-fieldset';
 import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';

package/bpk-component-fieldset/src/BpkFieldset.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { cloneElement, type Element } from 'react';
+import type { Element } from 'react';
+import { cloneElement } from 'react';
 import BpkLabel from '../../bpk-component-label';
 import BpkFormValidation from '../../bpk-component-form-validation';

package/bpk-component-flare/README.md CHANGED Viewed

@@ -13,7 +13,6 @@ Note that the default background color is white. You will need to apply a custom
 ### React components
 ```js
-import React from 'react';
 import { BpkContentBubble } from '@skyscanner/backpack-web/bpk-component-flare';
 export default MyComponent = () => (

package/bpk-component-flare/src/BpkContentBubble.js CHANGED Viewed

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-flare/src/BpkFlareBar.js CHANGED Viewed

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-floating-notification/README.md CHANGED Viewed

@@ -7,7 +7,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
 import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';

package/bpk-component-floating-notification/src/BpkFloatingNotification.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, ReactElement } from 'react';
+import { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from '../../bpk-component-aria-live';

package/bpk-component-form-validation/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkFormValidation from '@skyscanner/backpack-web/bpk-component-form-validation';
 export default () => (

package/bpk-component-form-validation/src/BpkFormValidation.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import {
   lineHeightSm,
   iconSizeSm,

package/bpk-component-graphic-promotion/README.md CHANGED Viewed

@@ -7,7 +7,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```tsx
-import React from 'react';
 import BpkGraphicPromo from '@skyscanner/backpack-web/bpk-component-graphic-promotion';
 export default () => (

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js CHANGED Viewed

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
-import React from 'react';
+import type { KeyboardEvent, MouseEvent } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from '../../bpk-react-utils';
@@ -34,7 +34,7 @@ const ACCESSIBILITY_KEYS = {
   Space: 32 /* Space */,
 };
-const isAccessibilityClick = (event: React.KeyboardEvent<HTMLElement>) =>
+const isAccessibilityClick = (event: KeyboardEvent<HTMLElement>) =>
   Object.keys(ACCESSIBILITY_KEYS).includes(event.key) ||
   Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
@@ -103,11 +103,11 @@ const BpkGraphicPromo = ({
   textAlign,
 }: Props) => {
   // FIXME: Use useCallback() here when React is updated.
-  const onClickWrapper = (event: React.MouseEvent<HTMLElement>) => {
+  const onClickWrapper = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     onClick();
   };
-  const onKeyWrapper = (event: React.KeyboardEvent<HTMLElement>) =>
+  const onKeyWrapper = (event: KeyboardEvent<HTMLElement>) =>
     isAccessibilityClick(event) && onClick();
   const cardClasses = getClassName('bpk-card', 'bpk-graphic-promo', className);

package/bpk-component-grid/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkGridContainer, BpkGridRow, BpkGridColumn } from '@skyscanner/backpack-web/bpk-component-grid';
 export default () => (

package/bpk-component-grid/src/BpkGridColumn.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-grid/src/BpkGridContainer.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-grid/src/BpkGridRow.js CHANGED Viewed

@@ -17,7 +17,6 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-grid-toggle/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
 export default () => (

package/bpk-component-grid-toggle/src/BpkGridToggle.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Component } from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
@@ -28,7 +28,7 @@ const getClassName = cssModules(STYLES);
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
-class BpkGridToggle extends React.Component {
+class BpkGridToggle extends Component {
   constructor(props) {
     super(props);

package/bpk-component-horizontal-nav/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
 export default class App extends Component {