@skyscanner/backpack-web 30.3.0 → 31.1.0

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

@@ -108,6 +108,9 @@ export const BpkModalV2 = props => {
       }
     };
     if (isOpen) {
+      // There is a bug on older versions of browser using chromium (chrome, firefox, edge >114) where the dialog got an open attribute even before it is opened.
+      // Therefore, when trying to open it, it crashes and log an error mentioning the dialog has already an open attribute.
+      ref.current?.removeAttribute('open');
       ref.current?.showModal?.();
       if (dialogWithPolyfill) {
         handleBackdropClick(dialogWithPolyfill);

package/bpk-mixins/src/mixins/_svgs.scss

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-@import '~@skyscanner/bpk-svgs/index.scss';
 @import '../bonds.scss';
 @import './utils.scss';
 
@@ -30,34 +29,6 @@
 /// @group svgs
 ////
 
-/// Icon factory.
-///
-/// @param {variable} $spacing
-/// @param {key} $icon
-///
-/// @access private
-
-@mixin _bpk-icon-factory($map, $size, $icon) {
-  @if map_has_key($map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to ' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  content: '';
-  display: inline-block;
-  width: $size;
-  height: $size;
-  background: url(map-get($map, $icon)) no-repeat;
-  background-size: cover;
-}
-
 /// Button alignment utility.
 ///
 /// @access private
@@ -75,70 +46,6 @@
   vertical-align: top;
 }
 
-/// Icon.
-///
-/// > **Note:** You will need to pass the sassFunction `encodebase64` to your node-sass process to use this mixin:
-/// >
-/// > ```js
-/// > var sass = require('node-sass');
-/// > var sassFunctions = require('bpk-mixins/sass-functions');
-/// > ...
-/// > sass.render({
-/// >   file: 'mysassfile.scss',
-/// >   functions: sassFunctions,
-/// > });
-/// > ```
-///
-/// @param {key} $icon
-/// @param {variable} $color
-/// @param {key} $size
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large);
-///   }
-
-@mixin bpk-icon($icon, $color, $size: small) {
-  @if function-exists(encodebase64) != true {
-    $err: (
-      'Could not find encodebase64 function. Refer to ' +
-        'https://backpack.github.io/sassdoc/#svgs-mixin-bpk-icon' +
-        ' on how to provide it to node-sass.'
-    );
-
-    @error $err;
-  }
-
-  $icon-map: if($size == large, $bpk-icons-no-color-lg, $bpk-icons-no-color-sm);
-
-  @if map_has_key($icon-map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  $icon-size: if($size == large, $bpk-icon-size-lg, $bpk-icon-size-sm);
-
-  /* Disabling rule here as this method is for newer sass versions that we don't yet support */
-  /* stylelint-disable-next-line scss/no-global-function-names */
-  $raw-svg: map-get($icon-map, $icon);
-  $svg-string: str-replace($raw-svg, '$$COLOR$$', $color);
-  $datauri: 'data:image/svg+xml;base64,' + encodebase64($svg-string);
-
-  content: '';
-  display: inline-block;
-  width: $icon-size;
-  height: $icon-size;
-  background: url($datauri) no-repeat;
-  background-size: cover;
-}
-
 /// Align to button. Modifies the bpk-icon-sm mixin.
 ///
 /// @require {mixin} bpk-icon-sm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "30.3.0",
+  "version": "31.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^17.4.0",
-    "@skyscanner/bpk-svgs": "^18.1.2",
+    "@skyscanner/bpk-svgs": "^19.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",

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

@@ -1,6 +0,0 @@
-/// <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

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