@skyscanner/backpack-web 34.7.0 → 34.7.2

package/bpk-component-card-button/src/BpkSaveButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0)}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}
+@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:.5rem;border:0;border-radius:50%;background-color:rgba(0,0,0,0);cursor:pointer}.bpk-save-button__icon{position:absolute;top:50%;left:50%;display:flex;transform:translate(-50%, -50%)}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1;composes:bpk-save-button__icon}.bpk-no-touch-support .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}:global(.bpk-no-touch-support) .bpk-save-button__heartOutlineIcon[data-show=true]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon[data-show=false]{opacity:0}.bpk-save-button__heartIcon{z-index:2;opacity:0;composes:bpk-save-button__icon}.bpk-save-button__heartIcon[data-show=true]{opacity:1}.bpk-no-touch-support .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon[data-show=false]:hover:not(:active):not(:disabled){transition:opacity 200ms ease-in-out;opacity:1}.bpk-save-button__heartIcon--clicked{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--onDark{fill:#fff}.bpk-no-touch-support .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--onDark:hover:not(:active):not(:disabled){fill:#fff}.bpk-save-button__heartIcon--default,.bpk-save-button__heartIcon--contained{fill:#0062e3}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}.bpk-no-touch-support .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],.bpk-no-touch-support .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled){fill:#161616}:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--default:hover:not(:active):not(:disabled)[data-show=true],:global(.bpk-no-touch-support) .bpk-save-button__heartIcon--contained:hover:not(:active):not(:disabled)[data-show=true]{fill:#0062e3}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,.8)}

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

@@ -93,13 +93,22 @@ const BpkPopover = ({
     getFloatingProps,
     getReferenceProps
   } = useInteractions([click, dismiss]);
+  const targetClick = target.props.onClick;
+  const referenceProps = getReferenceProps({
+    onClick: event => {
+      if (targetClick) {
+        event.stopPropagation();
+        targetClick(event);
+      }
+    }
+  });
   const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
-    ...getReferenceProps(),
+    ...referenceProps,
     // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
     ref: refs.setReference
   })) : /*#__PURE__*/_jsx("div", {
     ref: refs.setReference,
-    ...getReferenceProps(),
+    ...referenceProps,
     children: target
   });
   const classNames = getClassName('bpk-popover', className);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.7.0",
+  "version": "34.7.2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",