@skyscanner/backpack-web 36.18.0 → 37.0.0

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

@@ -22,42 +22,119 @@ This is the component for the tooltip that is displayed to users.
 The actual component that developers create (i.e. the default export from this package) is BpkTooltipPortal.
 */
 
+import { cloneElement, useRef, useState, useEffect } from 'react';
+import { arrow, FloatingArrow, FloatingPortal, offset, shift, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+// The stroke width is used to set the border width of the arrow.
+const strokeWidth = 1;
+// This function is to ensure the arrow alignment when used on the top and bottom
+// doesn't look clipped away from the tooltip. This is due to our use of box-shadows that makes it look floating away,
+// so we need to compensate slightly to make it look as one.
+const getArrowAlignment = placement => {
+  if (placement.includes('bottom')) {
+    return {
+      bottom: '98%'
+    };
+  }
+  if (placement.includes('top')) {
+    return {
+      top: '98%'
+    };
+  }
+  return undefined;
+};
+const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
 const BpkTooltip = ({
+  ariaLabel,
   children,
-  className = null,
+  hideOnTouchDevices = true,
   id,
+  isOpen = false,
   padded = true,
+  placement = 'bottom',
+  target,
   type = TOOLTIP_TYPES.light,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-tooltip', className);
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const arrowRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) {
+      setIsOpenState(false);
+    }
+  }, [isOpen]);
+  const {
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    open: isOpenState,
+    onOpenChange: setIsOpenState,
+    placement,
+    middleware: [offset(8), shift(), arrow({
+      element: arrowRef
+    })]
+  });
+  const hover = useHover(context, {
+    mouseOnly: !hasTouchSupport() || !hideOnTouchDevices
+  });
+  const role = useRole(context, {
+    role: 'tooltip'
+  });
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([hover, role]);
+  const targetWithAccessibilityProps = /*#__PURE__*/cloneElement(target, {
+    tabIndex: '0',
+    'aria-label': ariaLabel,
+    role: 'tooltip',
+    ref: refs.setReference,
+    ...getReferenceProps()
+  });
+  const classNames = getClassName('bpk-tooltip');
   const innerClassNames = getClassName('bpk-tooltip__inner', type === TOOLTIP_TYPES.dark && 'bpk-tooltip__inner--dark', padded && 'bpk-tooltip__inner--padded');
   const arrowClassNames = getClassName('bpk-tooltip__arrow', type === TOOLTIP_TYPES.dark && 'bpk-tooltip__arrow--dark');
-  return /*#__PURE__*/_jsx(TransitionInitialMount, {
-    appearClassName: getClassName('bpk-tooltip--appear'),
-    appearActiveClassName: getClassName('bpk-tooltip--appear-active'),
-    transitionTimeout: 200,
-    children: /*#__PURE__*/_jsxs("section", {
-      id: id,
-      tabIndex: -1,
-      role: "dialog",
-      className: classNames,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        id: ARROW_ID,
-        "data-popper-arrow": true,
-        className: arrowClassNames,
-        role: "presentation"
-      }), /*#__PURE__*/_jsx("div", {
-        className: innerClassNames,
-        children: children
-      })]
-    })
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetWithAccessibilityProps, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-tooltip--container'),
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-tooltip--appear'),
+          appearActiveClassName: getClassName('bpk-tooltip--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: -1,
+            role: "dialog",
+            className: classNames,
+            ...rest,
+            children: [/*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: context,
+              id: ARROW_ID,
+              className: arrowClassNames,
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: strokeWidth,
+              style: getArrowAlignment(context.placement)
+            }), /*#__PURE__*/_jsx("div", {
+              className: innerClassNames,
+              children: children
+            })]
+          })
+        })
+      })
+    })]
   });
 };
 export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-tooltip-portal{z-index:900}.bpk-tooltip-portal--target{display:inline-block}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:absolute;width:.5rem;height:.5rem;transform:rotate(45deg);border:.0625rem solid rgba(0,0,0,0);background:inherit;background-color:#fff}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip__arrow{bottom:-0.1875rem;border-right-color:#c1c7cf;border-bottom-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip__arrow{left:-0.1875rem;border-bottom-color:#c1c7cf;border-left-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip__arrow{top:-0.1875rem;border-top-color:#c1c7cf;border-left-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip__arrow{right:-0.1875rem;border-top-color:#c1c7cf;border-right-color:#c1c7cf}.bpk-tooltip__arrow--dark{background-color:#05203c}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip__arrow--dark{border-right-color:#05203c;border-bottom-color:#05203c}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip__arrow--dark{border-bottom-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-right-color:#05203c}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-tooltip__inner--padded{padding:.5rem 1rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}
+.bpk-tooltip--container{z-index:900}.bpk-tooltip{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-tooltip--appear{opacity:0}.bpk-tooltip--appear-active{opacity:1}.bpk-tooltip__arrow{width:.5rem;height:.5rem;fill:#fff}.bpk-tooltip__arrow--dark{fill:#05203c}.bpk-tooltip__inner--padded{padding:.5rem 1rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}

package/bpk-mixins/_buttons.scss

@@ -395,7 +395,11 @@
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 
-  @include bpk-link;
+  @include bpk-link--implicit;
+
+  &::after {
+    bottom: auto;
+  }
 
   padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */
   color: $bpk-private-button-link-normal-foreground-day;

package/bpk-mixins/_forms.scss

@@ -627,34 +627,13 @@
 ///     @include bpk-checkbox__checkmark();
 ///   }
 @mixin bpk-checkbox__checkmark {
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    transform: rotate(45deg);
-    border-radius: $bpk-border-size-lg;
-    background-color: $bpk-text-primary-inverse-day;
-  }
-
-  &::before {
-    top: bpk-spacing-md() - $bpk-one-pixel-rem;
-    left: 0;
-    width: bpk-spacing-lg() / 3;
-    height: bpk-spacing-sm() - $bpk-one-pixel-rem;
-  }
-
-  &::after {
-    top: bpk-spacing-sm() / 2;
-    left: bpk-spacing-md() - $bpk-one-pixel-rem;
-    width: bpk-spacing-sm() - $bpk-one-pixel-rem;
-    height: bpk-spacing-md() + ($bpk-one-pixel-rem * 3);
-  }
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position: $bpk-one-pixel-rem center;
+  background-size: calc(100% - $bpk-one-pixel-rem * 2.5) auto;
 
   &:disabled {
-    &::before,
-    &::after {
-      background-color: $bpk-text-disabled-day;
-    }
+    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
   }
 }
 

package/bpk-mixins/_typography.scss

@@ -782,6 +782,8 @@
 ///   }
 
 @mixin bpk-link {
+  position: relative;
+  display: inline-block;
   padding: 0;
   border: 0;
   background-color: transparent;
@@ -789,34 +791,117 @@
   cursor: pointer;
   appearance: none;
 
-  @include bpk-themeable-property(color, --bpk-link-color, $bpk-text-link-day);
+  @include bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    $bpk-text-primary-day
+  );
 
   @include bpk-hover {
-    text-decoration: underline;
+    text-decoration: none;
 
     @include bpk-themeable-property(
       color,
       --bpk-link-hover-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
+
+    &::after {
+      width: 0%;
+    }
   }
 
   &:visited {
     @include bpk-themeable-property(
       color,
       --bpk-link-visited-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
   }
 
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-link-active-color,
+      $bpk-text-primary-day
+    );
+
+    &::after {
+      width: 0%;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: tokens.$bpk-border-size-sm;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+
+    @include bpk-themeable-property(
+      background,
+      --bpk-link-color,
+      $bpk-text-primary-day
+    );
+
+    @media (prefers-reduced-motion) {
+      transition:
+        width 0s ease 0s,
+        left 0s ease 0s;
+    }
+  }
+}
+
+/// Implicit inline link.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-link();
+///     @include bpk-link--implicit();
+///   }
+
+@mixin bpk-link--implicit {
+  @include bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    $bpk-text-primary-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-link-hover-color,
+      $bpk-text-primary-day
+    );
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  &::after {
+    width: 0;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+  }
+
   &:active {
     text-decoration: underline;
 
     @include bpk-themeable-property(
       color,
       --bpk-link-active-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
+
+    &::after {
+      width: 100%;
+    }
   }
 }
 
@@ -845,6 +930,14 @@
     );
   }
 
+  &::after {
+    @include bpk-themeable-property(
+      background,
+      --bpk-link-alternate-color,
+      $bpk-text-on-dark-day
+    );
+  }
+
   &:visited {
     @include bpk-themeable-property(
       color,
@@ -877,14 +970,14 @@
 ///   }
 
 @mixin bpk-link--active {
-  color: $bpk-text-link-day;
+  color: $bpk-text-primary-day;
 
   &:visited {
-    color: $bpk-text-link-day;
+    color: $bpk-text-primary-day;
   }
 
   &:active {
-    color: $bpk-text-link-day;
+    color: $bpk-text-primary-day;
   }
 }
 

package/package.json

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

package/unstable__bpk-mixins/_buttons.scss

@@ -395,7 +395,11 @@
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 
-  @include typography.bpk-link;
+  @include typography.bpk-link--implicit;
+
+  &::after {
+    bottom: auto;
+  }
 
   padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */
   color: tokens.$bpk-private-button-link-normal-foreground-day;

package/unstable__bpk-mixins/_forms.scss

@@ -18,8 +18,6 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@use "sass:math";
-
 @use 'tokens.scss';
 @use 'typography.scss';
 @use 'utils.scss';
@@ -629,34 +627,13 @@
 ///     @include bpk-checkbox__checkmark();
 ///   }
 @mixin bpk-checkbox__checkmark {
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    transform: rotate(45deg);
-    border-radius: tokens.$bpk-border-size-lg;
-    background-color: tokens.$bpk-text-primary-inverse-day;
-  }
-
-  &::before {
-    top: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
-    left: 0;
-    width: math.div(tokens.bpk-spacing-lg(), 3);
-    height: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
-  }
-
-  &::after {
-    top: tokens.bpk-spacing-sm() * 0.5;
-    left: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
-    width: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
-    height: tokens.bpk-spacing-md() + (tokens.$bpk-one-pixel-rem * 3);
-  }
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position: tokens.$bpk-one-pixel-rem center;
+  background-size: calc(100% - tokens.$bpk-one-pixel-rem * 2.5) auto;
 
   &:disabled {
-    &::before,
-    &::after {
-      background-color: tokens.$bpk-text-disabled-day;
-    }
+    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
   }
 }
 

package/unstable__bpk-mixins/_typography.scss

@@ -782,6 +782,8 @@
 ///   }
 
 @mixin bpk-link {
+  position: relative;
+  display: inline-block;
   padding: 0;
   border: 0;
   background-color: transparent;
@@ -789,34 +791,117 @@
   cursor: pointer;
   appearance: none;
 
-  @include utils.bpk-themeable-property(color, --bpk-link-color, tokens.$bpk-text-link-day);
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    tokens.$bpk-text-primary-day
+  );
 
   @include utils.bpk-hover {
-    text-decoration: underline;
+    text-decoration: none;
 
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-hover-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
+
+    &::after {
+      width: 0%;
+    }
   }
 
   &:visited {
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-visited-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
   }
 
+  &:active {
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-link-active-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    &::after {
+      width: 0%;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: tokens.$bpk-border-size-sm;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+
+    @include utils.bpk-themeable-property(
+      background,
+      --bpk-link-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    @media (prefers-reduced-motion) {
+      transition:
+        width 0s ease 0s,
+        left 0s ease 0s;
+    }
+  }
+}
+
+/// Implicit inline link.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-link();
+///     @include bpk-link--implicit();
+///   }
+
+@mixin bpk-link--implicit {
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    tokens.$bpk-text-primary-day
+  );
+
+  @include utils.bpk-hover {
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-link-hover-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  &::after {
+    width: 0;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+  }
+
   &:active {
     text-decoration: underline;
 
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-active-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
+
+    &::after {
+      width: 100%;
+    }
   }
 }
 
@@ -845,6 +930,14 @@
     );
   }
 
+  &::after {
+    @include utils.bpk-themeable-property(
+      background,
+      --bpk-link-alternate-color,
+      tokens.$bpk-text-on-dark-day
+    );
+  }
+
   &:visited {
     @include utils.bpk-themeable-property(
       color,
@@ -877,14 +970,14 @@
 ///   }
 
 @mixin bpk-link--active {
-  color: tokens.$bpk-text-link-day;
+  color: tokens.$bpk-text-primary-day;
 
   &:visited {
-    color: tokens.$bpk-text-link-day;
+    color: tokens.$bpk-text-primary-day;
   }
 
   &:active {
-    color: tokens.$bpk-text-link-day;
+    color: tokens.$bpk-text-primary-day;
   }
 }
 

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -1,54 +0,0 @@
-import { Component } from 'react';
-import type { ReactNode, ReactElement } from 'react';
-import { createPopper } from '@popperjs/core';
-import type { TooltipProps } from './BpkTooltip';
-export type Props = TooltipProps & {
-    /**
-     * Tooltips are invisible to assistive technologies such as screen readers.
-     * To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
-     * The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
-     */
-    ariaLabel: string;
-    /**
-     * "target" should be a DOM element with a "ref" attached to it.
-     */
-    target: ReactElement<any>;
-    children: ReactNode | string;
-    placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
-    hideOnTouchDevices?: boolean;
-    portalStyle?: object;
-    portalClassName?: string;
-    renderTarget: null | (() => null | HTMLElement);
-    /**
-     * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
-     * You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
-     */
-    popperModifiers?: object[];
-};
-type State = {
-    isOpen: boolean;
-};
-declare class BpkTooltipPortal extends Component<Props, State> {
-    popper?: ReturnType<typeof createPopper> | null;
-    targetRef?: Element | null;
-    static defaultProps: {
-        className: null;
-        padded: boolean;
-        type: "light";
-        placement: string;
-        hideOnTouchDevices: boolean;
-        portalStyle: null;
-        portalClassName: null;
-        renderTarget: null;
-        popperModifiers: null;
-    };
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onOpen: (tooltipElement: HTMLElement, targetElement?: HTMLElement | null | undefined) => void;
-    beforeClose: (done: () => void | null) => void;
-    openTooltip: () => void;
-    closeTooltip: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default BpkTooltipPortal;