@skyscanner/backpack-web 32.0.0 → 33.0.0-beta.1

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -17,10 +17,10 @@
  */import PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } from 'react';
 import AnimateHeight from "../../bpk-animate-height";
-import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
+import { withButtonAlignment } from "../../bpk-component-icon";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -18,9 +18,10 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

package/bpk-component-barchart/src/BpkBarchart.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
+import debounce from 'lodash.debounce';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

package/bpk-component-barchart/src/BpkBarchartBars.js

@@ -14,8 +14,8 @@
  * 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.
- */import { scaleBand, scaleLinear } from 'd3-scale';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { scaleBand, scaleLinear } from 'd3-scale';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkBarchartBar from "./BpkBarchartBar";
 import { remToPx } from "./utils";

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -18,8 +18,8 @@
 import { useState } from "react";
 import { Portal, cssModules } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
-import STYLES from "./BpkBottomSheet.module.css";
 import BpkBottomSheetInner from "./BpkBottomSheetInner";
+import STYLES from "./BpkBottomSheet.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -18,6 +18,7 @@
 
 import { useState, useEffect } from 'react';
 import MediaQuery from "react-responsive/dist/react-responsive";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -21,8 +21,9 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import Week from "./Week";
 import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import STYLES from "./BpkCalendarGrid.module.css";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
+import STYLES from "./BpkCalendarGrid.module.css";
+
 // This should be imported after `./BpkCalendarGrid.module.css`.
 // Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined
 // after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.css) so it can override width and display of the calendar

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

@@ -20,11 +20,11 @@ import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
+import { SELECTION_TYPES } from "./BpkCalendarDate";
 // TODO: Move this to `Week.scss`
 // This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.css`
 // and the order of css imports can break the component.
 import STYLES from "./BpkCalendarGrid.module.css";
-import { SELECTION_TYPES } from "./BpkCalendarDate";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const shallowEqualProps = (props1, props2, propList) => {

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

@@ -18,8 +18,8 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkSelectableChip.module.css";
 import { CHIP_TYPES } from "./commonTypes";
+import STYLES from "./BpkSelectableChip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -17,13 +17,14 @@
  */
 
 import { useMemo, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDataTable.module.css";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
 import { createColumnsSchema } from "./utils";
+import STYLES from "./BpkDataTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -22,8 +22,8 @@ import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
 import { withRtlSupport } from "../../bpk-component-icon";
-import STYLES from "./BpkDataTableHeader.module.css";
 import { SORT_DIRECTION_TYPES } from "./common-types";
+import STYLES from "./BpkDataTableHeader.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);

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

@@ -18,9 +18,9 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./bpk-flare-bar.module.css";
 import Pointer from "./__generated__/js/pointer";
 import CornerRadius from "./__generated__/js/corner-radius";
+import STYLES from "./bpk-flare-bar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-flare/src/corner-radius.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: ({ styles, ...props }: {
+    [x: string]: any;
+    styles?: {} | undefined;
+}) => JSX.Element;
+export default _default;

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

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useEffect, useState } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";

package/bpk-component-icon/src/withRtlSupport.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkIcon.module.css";
 import classNameModifierHOCFactory from "./classNameModifierHOCFactory";
+import STYLES from "./BpkIcon.module.css";
 const getClassName = cssModules(STYLES);
 export default classNameModifierHOCFactory('withRtlSupport', [getClassName('bpk-icon--rtl-support')]);

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,6 +19,7 @@
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

package/bpk-component-image/src/BpkImage.js

@@ -17,15 +17,17 @@
  */
 
 import { Component } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkSpinner } from "../../bpk-component-spinner";
-import STYLES from "./BpkImage.module.css";
 import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
+import STYLES from "./BpkImage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-info-banner/src/AnimateAndFade.js

@@ -18,9 +18,10 @@
 
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

package/bpk-component-input/src/BpkInput.js

@@ -19,8 +19,8 @@
 import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import BpkClearButton from "./BpkClearButton";
-import STYLES from "./BpkInput.module.css";
 import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
+import STYLES from "./BpkInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { Component } from 'react';
+import debounce from 'lodash.debounce';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkMobileScrollContainer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-modal/src/BpkModal.js

@@ -18,8 +18,8 @@
 
 import { withScrim } from "../../bpk-scrim-utils";
 import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
-import STYLES from "./BpkModal.module.css";
 import BpkModalInner from "./BpkModalInner";
+import STYLES from "./BpkModal.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkModalInner = withScrim(BpkModalInner);

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarButtonLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { BAR_STYLES } from "./BpkNavigationBar";
+import STYLES from "./BpkNavigationBarIconButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({

package/bpk-component-popover/src/BpkPopover.js

@@ -19,8 +19,8 @@ import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkPopover.module.css";
 import { ARROW_ID } from "./constants";
+import STYLES from "./BpkPopover.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -14,14 +14,14 @@
  * 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.
- */import { createPopper } from '@popperjs/core';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
 import { Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import keyboardFocusScope from "./keyboardFocusScope";
-import STYLES from "./BpkPopover.module.css";
 import BpkPopover from "./BpkPopover";
+import STYLES from "./BpkPopover.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-component-price/src/BpkPrice.js

@@ -17,8 +17,8 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkPrice.module.css";
 import { SIZES, ALIGNS } from "./common-types";
+import STYLES from "./BpkPrice.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-rating/src/BpkRating.js

@@ -18,8 +18,8 @@
 import clamp from 'lodash.clamp';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkRating.module.css";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
+import STYLES from "./BpkRating.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -22,9 +22,9 @@ import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
-import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
+import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 

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

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
+import PropTypes from 'prop-types';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
-import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -75,8 +75,8 @@ XlSpinner.defaultProps = {
   viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -75,8 +75,8 @@ LgSpinner.defaultProps = {
   viewBox: "0 0 24 24"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -62,8 +62,8 @@ SmSpinner.defaultProps = {
   viewBox: "0 0 16 16"
 };
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkSpinner.module.css";
 import SPINNER_TYPES from "./spinnerTypes";
+import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -20,9 +20,9 @@ import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkThemeToggle.module.css";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
+import STYLES from "./BpkThemeToggle.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const inputId = 'theme-select';

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

@@ -23,8 +23,8 @@ The actual component that developers create (i.e. the default export from this p
 */
 
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkTooltip.module.css";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
+import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { createPopper } from '@popperjs/core';
 import { cloneElement, Component } from 'react';
+import { createPopper } from '@popperjs/core';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import BpkTooltip from "./BpkTooltip";
-import STYLES from "./BpkTooltip.module.css";
 import { TOOLTIP_TYPES } from "./constants";
+import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-react-utils/src/Portal.js

@@ -18,6 +18,7 @@
 
 import { Component } from 'react';
 import { createPortal } from 'react-dom';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { Component } from 'react';
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusScope from 'a11y-focus-scope';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import focusStore from 'a11y-focus-store';
-import { Component } from 'react';
 import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../../bpk-react-utils";
 import BpkScrim from "./BpkScrim";
 import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "32.0.0",
+  "version": "33.0.0-beta.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",