@skyscanner/backpack-web 36.1.4 → 36.3.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 (8) hide show
  1. package/bpk-component-icon/lg/speaker-mute.js +16 -0
  2. package/bpk-component-icon/lg/speaker.js +2 -2
  3. package/bpk-component-icon/sm/speaker-mute.js +16 -0
  4. package/bpk-component-icon/sm/speaker.js +7 -5
  5. package/bpk-component-popover/src/BpkPopover.d.ts +2 -1
  6. package/bpk-component-popover/src/BpkPopover.js +10 -2
  7. package/bpk-mixins/_tokens.scss +1 -1
  8. package/package.json +2 -2
package/bpk-component-icon/lg/speaker-mute.js ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ const SpeakerMuteIcon = props => /*#__PURE__*/_jsxs("svg", {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ viewBox: "0 0 24 24",
6
+ "aria-hidden": "true",
7
+ width: "1.5rem",
8
+ height: "1.5rem",
9
+ ...props,
10
+ children: [/*#__PURE__*/_jsx("path", {
11
+ d: "M5.587 16.998h-1.99C2.161 16.998 1 15.88 1 14.498V9.502C1 8.12 2.162 7 3.596 7h4.246a.9.9 0 0 0 .575-.21l5.182-4.437C14.53 1.557 16 2.194 16 3.392v3.194l4.293-4.293a1 1 0 1 1 1.414 1.414l-18 18a1 1 0 0 1-1.414-1.414zM9.764 18.362a.5.5 0 0 1-.029-.733l5.411-5.412a.5.5 0 0 1 .854.354v8.037c0 1.199-1.47 1.835-2.4 1.038zM18.017 9.347a.26.26 0 0 0-.048.293c.34.714.531 1.514.531 2.36 0 .948-.239 1.837-.66 2.614a.75.75 0 1 0 1.32.714c.536-.99.84-2.125.84-3.328s-.102-1.852-.508-2.701c-.12-.22-.293-.521-.419-.71-.068-.102-.195-.103-.282-.016z"
12
+ }), /*#__PURE__*/_jsx("path", {
13
+ d: "M20.188 7.46a.255.255 0 0 1 .033-.317l.724-.724a.244.244 0 0 1 .377.034A9.96 9.96 0 0 1 23 12a9.96 9.96 0 0 1-1.96 5.946.75.75 0 1 1-1.205-.892A8.46 8.46 0 0 0 21.5 12c0-1.67-.481-3.227-1.312-4.54"
14
+ })]
15
+ });
16
+ export default SpeakerMuteIcon;
package/bpk-component-icon/lg/speaker.js CHANGED
@@ -8,9 +8,9 @@ const SpeakerIcon = props => /*#__PURE__*/_jsxs("svg", {
8
8
  height: "1.5rem",
9
9
  ...props,
10
10
  children: [/*#__PURE__*/_jsx("path", {
11
- d: "M13.6 2.354A1.448 1.448 0 0 1 16 3.392v17.216a1.448 1.448 0 0 1-2.4 1.038L8.416 17.21a.88.88 0 0 0-.575-.21H3.596A2.55 2.55 0 0 1 1 14.5v-5A2.55 2.55 0 0 1 3.596 7h4.246a.9.9 0 0 0 .575-.21l5.182-4.437zm7.44 3.7a.75.75 0 0 0-1.205.892 8.5 8.5 0 0 1 0 10.108.75.75 0 0 0 1.206.892 10 10 0 0 0-.001-11.892"
11
+ d: "M13.6 2.354c.93-.797 2.4-.16 2.4 1.038v17.216c0 1.199-1.47 1.835-2.4 1.038L8.416 17.21a.88.88 0 0 0-.575-.21H3.596c-1.434 0-2.596-1.12-2.596-2.5V9.5C1 8.12 2.162 7 3.596 7h4.246a.9.9 0 0 0 .575-.21zM21.04 6.054a.75.75 0 0 0-1.205.892A8.46 8.46 0 0 1 21.5 12a8.46 8.46 0 0 1-1.665 5.054.75.75 0 0 0 1.206.892A9.96 9.96 0 0 0 23 12a9.96 9.96 0 0 0-1.96-5.946"
12
12
  }), /*#__PURE__*/_jsx("path", {
13
- d: "M19.16 8.672a.75.75 0 0 0-1.32.714 5.5 5.5 0 0 1 0 5.228.75.75 0 0 0 1.32.714 7.01 7.01 0 0 0 0-6.656"
13
+ d: "M19.16 8.672a.75.75 0 0 0-1.32.714c.421.777.66 1.666.66 2.614s-.239 1.837-.66 2.614a.75.75 0 1 0 1.32.714c.536-.99.84-2.125.84-3.328a7 7 0 0 0-.84-3.328"
14
14
  })]
15
15
  });
16
16
  export default SpeakerIcon;
package/bpk-component-icon/sm/speaker-mute.js ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ const SpeakerMuteIcon = props => /*#__PURE__*/_jsxs("svg", {
4
+ xmlns: "http://www.w3.org/2000/svg",
5
+ viewBox: "0 0 24 24",
6
+ "aria-hidden": "true",
7
+ width: "1rem",
8
+ height: "1rem",
9
+ ...props,
10
+ children: [/*#__PURE__*/_jsx("path", {
11
+ d: "M5.893 17.248H3.14C1.406 17.248 0 16.073 0 14.623V9.376c0-1.45 1.406-2.625 3.141-2.625H6.63c.256 0 .504-.079.695-.221l6.271-4.659c1.126-.836 2.905-.168 2.905 1.09v3.68l4.171-4.171a.75.75 0 1 1 1.06 1.06l-18.2 18.202a.75.75 0 0 1-1.061-1.06zM9.767 19.285a.375.375 0 0 1-.041-.567l6.134-6.134a.375.375 0 0 1 .64.266v8.189c0 1.258-1.78 1.926-2.905 1.09zM20.983 7.915a.39.39 0 0 1 .04-.494l.628-.628a.363.363 0 0 1 .547.03C23.338 8.318 24 10.096 24 12c0 2.137-.832 4.113-2.24 5.709-.28.319-.818.386-1.198.15s-.46-.688-.179-1.008c1.196-1.356 1.903-3.033 1.903-4.851 0-1.489-.474-2.884-1.303-4.085"
12
+ }), /*#__PURE__*/_jsx("path", {
13
+ d: "M18.596 9.848a.4.4 0 0 0-.08.43c.221.54.341 1.118.341 1.722 0 .91-.273 1.764-.753 2.51-.226.35-.071.786.345.975.416.19.937.06 1.162-.29.613-.951.96-2.04.96-3.195 0-.989-.254-1.93-.712-2.776a.355.355 0 0 0-.567-.072z"
14
+ })]
15
+ });
16
+ export default SpeakerMuteIcon;
package/bpk-component-icon/sm/speaker.js CHANGED
@@ -1,14 +1,16 @@
1
1
  import React from 'react';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- const SpeakerIcon = props => /*#__PURE__*/_jsx("svg", {
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ const SpeakerIcon = props => /*#__PURE__*/_jsxs("svg", {
4
4
  xmlns: "http://www.w3.org/2000/svg",
5
5
  viewBox: "0 0 24 24",
6
6
  "aria-hidden": "true",
7
7
  width: "1rem",
8
8
  height: "1rem",
9
9
  ...props,
10
- children: /*#__PURE__*/_jsx("path", {
11
- d: "M14.831.424C16.06-.53 18 .232 18 1.67v20.66c0 1.438-1.941 2.2-3.169 1.246l-6.84-5.325a1.24 1.24 0 0 0-.76-.253H3.427a3.235 3.235 0 0 1-3.427-3V9a3.235 3.235 0 0 1 3.427-3H7.23a1.25 1.25 0 0 0 .76-.252zM19.5 8.25a.75.75 0 0 1 1.5 0v7.5a.75.75 0 0 1-1.5 0zm3.75-3.75a.75.75 0 0 0-.75.75v13.5a.75.75 0 0 0 1.5 0V5.25a.75.75 0 0 0-.75-.75"
12
- })
10
+ children: [/*#__PURE__*/_jsx("path", {
11
+ d: "M13.595 1.871c1.126-.836 2.905-.168 2.905 1.09V21.04c0 1.258-1.78 1.926-2.905 1.09l-6.27-4.66a1.17 1.17 0 0 0-.696-.22H3.14C1.406 17.248 0 16.072 0 14.622V9.376c0-1.45 1.406-2.625 3.141-2.625H6.63c.256 0 .504-.079.695-.221zM21.76 6.292c-.28-.32-.818-.387-1.198-.15-.38.236-.46.687-.179 1.007 1.196 1.356 1.903 3.033 1.903 4.851s-.707 3.495-1.903 4.851c-.281.32-.201.77.179 1.008.38.236.917.169 1.199-.15C23.168 16.113 24 14.137 24 12s-.832-4.113-2.24-5.708"
12
+ }), /*#__PURE__*/_jsx("path", {
13
+ d: "M19.611 8.805c-.225-.35-.745-.48-1.162-.29-.416.189-.57.626-.346.976.481.745.754 1.6.754 2.509 0 .91-.273 1.764-.753 2.51-.226.35-.071.786.345.975.416.19.937.06 1.162-.29.613-.951.96-2.04.96-3.195a5.87 5.87 0 0 0-.96-3.195"
14
+ })]
13
15
  });
14
16
  export default SpeakerIcon;
package/bpk-component-popover/src/BpkPopover.d.ts CHANGED
@@ -22,6 +22,7 @@ export type Props = CloseButtonProps & {
22
22
  className?: string | null;
23
23
  closeButtonIcon?: boolean;
24
24
  closeButtonProps?: Object;
25
+ hoverable?: boolean;
25
26
  isOpen?: boolean;
26
27
  labelAsTitle?: boolean;
27
28
  padded?: boolean;
@@ -33,5 +34,5 @@ export type Props = CloseButtonProps & {
33
34
  onAction?: () => void;
34
35
  renderTarget?: () => HTMLElement | HTMLElement | null;
35
36
  };
36
- declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
37
+ declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, hoverable, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
37
38
  export default BpkPopover;
package/bpk-component-popover/src/BpkPopover.js CHANGED
@@ -17,7 +17,7 @@
17
17
  */
18
18
 
19
19
  import { useState, useEffect, useRef, cloneElement, isValidElement } from 'react';
20
- import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingPortal, arrow, FloatingArrow, shift } from '@floating-ui/react';
20
+ import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingPortal, arrow, FloatingArrow, shift, useHover, safePolygon } from '@floating-ui/react';
21
21
  import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
22
22
 
23
23
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -53,6 +53,7 @@ const BpkPopover = ({
53
53
  closeButtonLabel,
54
54
  closeButtonProps = {},
55
55
  closeButtonText,
56
+ hoverable = false,
56
57
  id,
57
58
  isOpen = false,
58
59
  label,
@@ -88,12 +89,19 @@ const BpkPopover = ({
88
89
  });
89
90
  const click = useClick(context);
90
91
  const dismiss = useDismiss(context);
92
+ const hover = useHover(context, {
93
+ enabled: hoverable,
94
+ mouseOnly: true,
95
+ handleClose: safePolygon({
96
+ requireIntent: false
97
+ })
98
+ });
91
99
 
92
100
  // Merge all the interactions into prop getters
93
101
  const {
94
102
  getFloatingProps,
95
103
  getReferenceProps
96
- } = useInteractions([click, dismiss]);
104
+ } = useInteractions([click, dismiss, hover]);
97
105
  const targetClick = target?.props?.onClick;
98
106
  const referenceProps = targetClick ? getReferenceProps({
99
107
  onClick: event => {
package/bpk-mixins/_tokens.scss CHANGED
@@ -18,4 +18,4 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import '~@skyscanner/bpk-foundations-web/tokens/base.default';
21
+ @import '@skyscanner/bpk-foundations-web/tokens/base.default';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "36.1.4",
3
+ "version": "36.3.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "@radix-ui/react-slider": "^1.1.2",
29
29
  "@react-google-maps/api": "^2.19.3",
30
30
  "@skyscanner/bpk-foundations-web": "^18.1.0",
31
- "@skyscanner/bpk-svgs": "^19.3.0",
31
+ "@skyscanner/bpk-svgs": "^20.0.0",
32
32
  "a11y-focus-scope": "^1.1.3",
33
33
  "a11y-focus-store": "^1.0.0",
34
34
  "d3-path": "^2.0.0",