@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-animate-height/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-animate-height",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Animate height using CSS transitions.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,7 +20,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-button": "^7.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-button": "^7.0.5"
   }
 }

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "6.1.1",
+  "version": "6.1.4",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,18 +14,18 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-animate-height": "^5.0.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-checkbox": "^5.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-checkbox": "^5.0.5"
   }
 }

package/bpk-component-accordion/src/BpkAccordion.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-accordion {
   margin: 0;

package/bpk-component-accordion/src/BpkAccordionItem.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-aria-live/README.md

@@ -10,7 +10,7 @@ npm install bpk-component-aria-live --save-dev
 
 ## Usage
 
-```js
+```tsx
 import React from 'react';
 import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
 
@@ -37,6 +37,6 @@ export default () => (
 
 `aria-relevant` and `aria-atomic` props can also be set.
 
-`aria-relevant` determines what sort of changes should be read out. By default it is `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).
+`aria-relevant` determines what sort of changes should be read out. By default it is `text` but can be `additions`, `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant).
 
 `aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).

package/bpk-component-aria-live/index.js

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkAriaLive, {
   POLITENESS_SETTINGS as ARIA_LIVE_POLITENESS_SETTINGS,

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "3.0.2",
+  "version": "3.1.2",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,16 +13,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.5.8"
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1"
   },
   "devDependencies": {
-    "bpk-component-chip": "^6.0.2",
-    "bpk-component-code": "^4.0.2",
-    "bpk-component-fieldset": "^5.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-switch": "^3.0.2"
+    "bpk-component-chip": "^6.0.5",
+    "bpk-component-code": "^4.0.5",
+    "bpk-component-fieldset": "^5.0.5",
+    "bpk-component-select": "^6.0.5",
+    "bpk-component-switch": "^3.1.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -15,11 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkAriaLive.module.scss';
@@ -30,32 +30,33 @@ export const POLITENESS_SETTINGS = {
   off: 'off',
   polite: 'polite',
   assertive: 'assertive',
-};
+}; // as const; // Temp disabling TS types due to non TS projects compatibility.
+
+// Temp disabling TS types due to non TS projects compatibility.
+// export type PolitenessSetting =
+//   typeof POLITENESS_SETTINGS[keyof typeof POLITENESS_SETTINGS];
 
 export type Props = {
-  children: Node,
-  politenessSetting: $Keys<typeof POLITENESS_SETTINGS>,
-  visible: boolean,
-  className: ?string,
+  children: ReactElement | string,
+  politenessSetting?: $Keys<typeof POLITENESS_SETTINGS>, // PolitenessSetting,
+  visible?: boolean,
+  className?: string | null,
+  [rest: string]: any, // Inexact rest. See decisions/inexact-rest.md
 };
-const BpkAriaLive = (props: Props) => {
-  const { className, politenessSetting, visible, ...rest } = props;
+
+const BpkAriaLive = ({
+  className = null,
+  politenessSetting = POLITENESS_SETTINGS.polite,
+  visible = false,
+  ...rest
+}: Props) => {
   const classNames = getClassName(
     'bpk-aria-live',
     !visible && 'bpk-aria-live--invisible',
     className,
   );
 
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div aria-live={politenessSetting} className={classNames} {...rest} />
-  );
-};
-
-BpkAriaLive.propTypes = {
-  className: PropTypes.string,
-  politenessSetting: PropTypes.oneOf(Object.keys(POLITENESS_SETTINGS)),
-  visible: PropTypes.bool,
+  return <div aria-live={politenessSetting} className={classNames} {...rest} />;
 };
 
 BpkAriaLive.defaultProps = {

package/bpk-component-aria-live/src/BpkAriaLive.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-aria-live {
   &--invisible {

package/bpk-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^7.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-input": "^7.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3"
   },
@@ -24,6 +24,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.2"
+    "bpk-component-icon": "^10.0.5"
   }
 }

package/bpk-component-autosuggest/src/BpkAutosuggest.module.scss

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
-
 $arrow-size: bpk-spacing-sm() * 3;
 
 .bpk-autosuggest {
@@ -125,6 +124,7 @@ $arrow-size: bpk-spacing-sm() * 3;
     &-inner {
       display: flex;
       flex-direction: row;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
       flex-wrap: wrap;
       justify-content: space-between;
     }

package/bpk-component-badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "5.1.1",
+  "version": "5.1.4",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-badge/src/BpkBadge.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-badge {
   @include bpk-badge;

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-animate-height": "^5.0.2",
-    "bpk-component-close-button": "^4.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-animate-height": "^5.0.5",
+    "bpk-component-close-button": "^4.0.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-button": "^7.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-aria-live": "^3.1.2",
+    "bpk-component-button": "^7.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-animate-and-fade {
   $invisible: 0.01;

package/bpk-component-banner-alert/src/BpkBannerAlert.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -153,8 +153,8 @@ $bpk-spacing-v2: true;
     // Temporarily adding an extra 2px padding to align alert message and description until the icon size changes to 16px
     $extra-padding: 2 * $bpk-one-pixel-rem;
 
-    padding: 0 bpk-spacing-xxl() bpk-spacing-md() bpk-spacing-xl() +
-      $extra-padding;
+    padding: 0 bpk-spacing-xxl() bpk-spacing-md()
+      (bpk-spacing-xl() + $extra-padding);
     color: $bpk-banner-alert-children-color;
 
     @include bpk-text;

package/bpk-component-barchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-mobile-scroll-container": "^4.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "lodash.debounce": "^4.0.8",
@@ -27,9 +27,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-breakpoint": "^5.0.2",
-    "bpk-component-content-container": "^6.0.2",
-    "bpk-component-rtl-toggle": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-breakpoint": "^5.0.5",
+    "bpk-component-content-container": "^6.0.5",
+    "bpk-component-rtl-toggle": "^4.0.5",
+    "bpk-component-text": "^8.0.5"
   }
 }

package/bpk-component-barchart/src/BpkBarchartBar.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-barchart-bar {
   @include bpk-themeable-property(
@@ -58,6 +58,8 @@
     shape-rendering: auto;
 
     &--outlier {
+      // We expect this due as this is a dyanmically applied def in BpkBarchartDefs.js
+      /* stylelint-disable-next-line function-url-quotes */
       mask: url(#bpk-barchart__def-mask);
     }
   }

package/bpk-component-barchart/src/BpkChartAxis.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-chart {
   &__axis-tick {

package/bpk-component-barchart/src/BpkChartDataTable.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-chart-data-table {
   @include bpk-visually-hidden;

package/bpk-component-barchart/src/BpkChartGridLines.module.scss

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-chart {
   &__grid-line {
-    shape-rendering: crispEdges;
+    shape-rendering: crispedges;
     stroke: $bpk-color-sky-gray-tint-06;
   }
 }

package/bpk-component-blockquote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-blockquote",
-  "version": "4.1.1",
+  "version": "4.1.4",
   "description": "Backpack blockquote component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-blockquote/src/BpkBlockquote.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-breadcrumb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breadcrumb",
-  "version": "4.1.0",
+  "version": "4.1.3",
   "description": "Backpack breadcrumb component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-link": "^4.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-link": "^4.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-breadcrumb/src/BpkBreadcrumb.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-breadcrumb {
   display: flex;

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-breakpoint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breakpoint",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Backpack breakpoint component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2",
     "react-responsive": "^8.2.0"
   },
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0"
+    "@skyscanner/bpk-foundations-web": "^9.3.0"
   }
 }

package/bpk-component-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-button/src/BpkButtonBase.module.scss

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button {
   @include bpk-button;
@@ -45,6 +45,6 @@
   }
 
   svg {
-    fill: currentColor;
+    fill: currentcolor;
   }
 }

package/bpk-component-button/src/BpkButtonDestructive.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--destructive {
   @include bpk-button--secondary;

package/bpk-component-button/src/BpkButtonFeatured.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--featured {
   @include bpk-button--featured;

package/bpk-component-button/src/BpkButtonLink.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button {
   &--link {

package/bpk-component-button/src/BpkButtonLinkOnDark.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--link-on-dark {
   @include bpk-button--link-on-dark;

package/bpk-component-button/src/BpkButtonOutline.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--outline {
   @include bpk-button--outline;