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-select/src/BpkSelect.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Element } from 'react';
+import type { Element } from 'react';
+import { cloneElement } from 'react';
 import { cssModules } from '../../bpk-react-utils';
@@ -85,7 +86,7 @@ const BpkSelect = (props: Props) => {
   if (image) {
     return (
       <div className={getClassName('bpk-select-wrapper', wrapperClassName)}>
-        {React.cloneElement(image, {
+        {cloneElement(image, {
           'aria-hidden': true,
           className: getClassName(
             'bpk-select-wrapper__image',

package/bpk-component-skip-link/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 BpkSkipLink from '@skyscanner/backpack-web/bpk-component-skip-link';
 export default () => <BpkSkipLink href="#main" label="Skip to main content" />;

package/bpk-component-skip-link/src/BpkSkipLink.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-slider/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 BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';
 const Slider = () => (

package/bpk-component-slider/src/BpkSlider.js CHANGED Viewed

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
-import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';

package/bpk-component-spinner/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 { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
 export default () => (

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';

package/bpk-component-spinner/src/BpkLargeSpinner.js CHANGED Viewed

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-spinner/src/BpkSpinner.js CHANGED Viewed

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-split-input/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 BpkSplitInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-split-input';
 export default () => (

package/bpk-component-split-input/src/BpkInputField.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import BpkInput from '../../bpk-component-input';

package/bpk-component-split-input/src/BpkSplitInput.js CHANGED Viewed

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

package/bpk-component-star-rating/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 BpkStarRating, {
   BpkStar,
   STAR_TYPES,

package/bpk-component-star-rating/src/BpkInteractiveStar.js CHANGED Viewed

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

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js CHANGED Viewed

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

package/bpk-component-star-rating/src/BpkStar.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import SmallIcon from '../../bpk-component-icon/sm/star';

package/bpk-component-star-rating/src/BpkStarRating.js CHANGED Viewed

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

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js CHANGED Viewed

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

package/bpk-component-switch/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 BpkSwitch from '@skyscanner/backpack-web/bpk-component-switch';
 export default () => (

package/bpk-component-switch/src/BpkSwitch.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, deprecated } from '../../bpk-react-utils';

package/bpk-component-table/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 {
   BpkTable,
   BpkTableHead,

package/bpk-component-table/src/BpkTable.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, deprecated } from '../../bpk-react-utils';

package/bpk-component-table/src/BpkTableBody.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';
 type Props = { children: Node };

package/bpk-component-table/src/BpkTableCell.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-table/src/BpkTableHead.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';
 type Props = { children: Node };

package/bpk-component-table/src/BpkTableHeadCell.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, deprecated } from '../../bpk-react-utils';

package/bpk-component-table/src/BpkTableRow.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';
 type Props = { children: Node };

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

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```javascript
-import React from 'react';
 import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 export default () => (
@@ -22,7 +21,6 @@ export default () => (
 When using the same style in many places repeating the `textStyle` and `tagName` props can become tedious in this case you can use `withDefaultProps` from `bpk-react-utils`.
 ```javascript
-import React from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import { withDefaultProps } from '@skyscanner/backpack-web/bpk-react-utils';
@@ -53,7 +51,6 @@ export default () => (
 Heading `textStyle` should not be confused with heading `tagName` that provide structure for SEO and Accessibility. The weight which is normally applied using `tagName` will be overwritten by the weight defined in the `textStyle`.
 ```javascript
-import React from 'react';
 import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 export default () => (

package/bpk-component-text/src/BpkText.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, deprecated } from '../../bpk-react-utils';

package/bpk-component-textarea/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 BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
 export default () => (

package/bpk-component-textarea/src/BpkTextarea.js CHANGED Viewed

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

package/bpk-component-theme-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 BpkThemeToggle from '@skyscanner/backpack-web/bpk-component-theme-toggle';
 export default () => (
@@ -20,7 +19,6 @@ export default () => (
 ## HOC usage
 ```js
-import React from 'react';
 import { updateOnThemeChange } from '@skyscanner/backpack-web/bpk-component-theme-toggle';
 import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';

package/bpk-component-theme-toggle/src/BpkThemeToggle.js CHANGED Viewed

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
-import React from 'react';
+import { Component } from 'react';
 import BpkLabel from '../../bpk-component-label';
 import BpkSelect from '../../bpk-component-select';
@@ -37,7 +37,7 @@ const setTheme = (theme) => {
   );
 };
-class BpkThemeToggle extends React.Component {
+class BpkThemeToggle extends Component {
   constructor(props) {
     super(props);
     this.state = {

package/bpk-component-theme-toggle/src/updateOnThemeChange.js CHANGED Viewed

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

package/bpk-component-ticket/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 BpkTicket from '@skyscanner/backpack-web/bpk-component-ticket';
 export default () => (

package/bpk-component-ticket/src/BpkTicket.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-tooltip/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, { useRef } from 'react';
+import { useRef } from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';

package/bpk-component-tooltip/src/BpkTooltip.js CHANGED Viewed

@@ -25,7 +25,7 @@ The actual component that developers create (i.e. the default export from this p
 */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';

package/bpk-component-tooltip/src/BpkTooltipPortal.js CHANGED Viewed

@@ -20,7 +20,8 @@
 import { createPopper } from '@popperjs/core';
 import PropTypes from 'prop-types';
-import React, { Component, type Node, type Element } from 'react';
+import { cloneElement, Component } from 'react';
+import type { Node, Element } from 'react';
 import { Portal, cssModules } from '../../bpk-react-utils';
@@ -50,7 +51,7 @@ export type Props = {
   portalStyle: ?Object,
   portalClassName: ?string,
   renderTarget: ?() => HTMLElement,
-  popperModifiers: ?Object,
+  popperModifiers: ?Array<Object>,
 };
 type State = {
@@ -72,7 +73,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     portalClassName: PropTypes.string,
     renderTarget: PropTypes.func,
-    popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    popperModifiers: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   };
   static defaultProps = {
@@ -186,7 +187,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     const classNames = [getClassName('bpk-tooltip-portal')];
     const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
-    const targetWithAccessibilityProps = React.cloneElement(target, {
+    const targetWithAccessibilityProps = cloneElement(target, {
       tabIndex: '0',
       'aria-label': ariaLabel,
     });

package/bpk-react-utils/README.md CHANGED Viewed

@@ -17,7 +17,7 @@ it's necessary in overcoming z-index issues when absolutely positioning elements
 import { Portal } from '@skyscanner/backpack-web/bpk-react-utils';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import { BpkCode } from '@skyscanner/backpack-web/bpk-component-code';
-import React, { Component } from 'react';
+import { Component } from 'react';
 class MyComponent extends Component {
   constructor() {
@@ -78,7 +78,6 @@ A helpful utility which permits backwards compatibility with hard coded classes
 ### Usage
 ```js
-import React from 'react';
 import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
 import STYLES from './MyComponent.scss';
@@ -140,7 +139,6 @@ components initial mount. All you need to provide is two class names and a timeo
 ### Usage
 ```js
-import React from 'react';
 import { TransitionInitialMount } from '@skyscanner/backpack-web/bpk-react-utils';
 const MyComponent = (props) => (
@@ -187,7 +185,6 @@ Returns true if the browser is showing content right-to-left.
 ### Usage
 ```js
-import React from 'react';
 import { isRTL } from '@skyscanner/backpack-web/bpk-react-utils';
 if (isRTL()) {
@@ -204,7 +201,6 @@ Returns true if the device is an iPhone.
 ### Usage
 ```js
-import React from 'react';
 import { isDeviceIphone } from '@skyscanner/backpack-web/bpk-react-utils';
 if (isDeviceIphone()) {
@@ -221,7 +217,6 @@ Returns true if the device is an iPad.
 ### Usage
 ```js
-import React from 'react';
 import { isDeviceIpad } from '@skyscanner/backpack-web/bpk-react-utils';
 if (isDeviceIpad()) {
@@ -238,7 +233,6 @@ Returns true if the platform is iOS (iPhone/iPad).
 ### Usage
 ```js
-import React from 'react';
 import { isDeviceIos } from '@skyscanner/backpack-web/bpk-react-utils';
 if (isDeviceIos()) {

package/bpk-react-utils/src/TransitionInitialMount.js CHANGED Viewed

@@ -20,7 +20,7 @@
 import assign from 'object-assign';
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 // Object.assign() is used unpolyfilled in react-transition-group.

package/bpk-react-utils/src/withDefaultProps.js CHANGED Viewed

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

package/bpk-scrim-utils/src/BpkScrim.js CHANGED Viewed

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

package/bpk-scrim-utils/src/withScrim.js CHANGED Viewed

@@ -19,7 +19,7 @@
 import focusScope from 'a11y-focus-scope';
 import focusStore from 'a11y-focus-store';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import {
   cssModules,

package/bpk-theming/src/BpkThemeProvider.js CHANGED Viewed

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 const uniq = (arr = []) => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "18.2.0",
+  "version": "19.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@skyscanner/bpk-svgs": "^16.2.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^39.1.0",
+    "bpk-mixins": "^39.1.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",