@dnb/eufemia 9.30.0 → 9.32.0

package/es/components/help-button/HelpButton.d.ts

@@ -1,238 +1,12 @@
-import * as React from 'react';
-export type HelpButtonText = string | React.ReactNode;
-export type HelpButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type HelpButtonIconSize = string | number;
-export type HelpButtonTooltip =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type HelpButtonStatus =
-  | string
-  | boolean
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type HelpButtonStatusNoAnimation = string | boolean;
-export type HelpButtonTo = string | Object | ((...args: any[]) => any);
-export type HelpButtonWrap = string | boolean;
-export type HelpButtonBounding = string | boolean;
-export type HelpButtonStretch = string | boolean;
-export type HelpButtonSkeleton = string | boolean;
-export type HelpButtonDisabled = string | boolean;
-export type HelpButtonChildren =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-export type HelpButtonElement =
-  | ((...args: any[]) => any)
-  | Object
-  | React.ReactNode;
-export type HelpButtonSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type HelpButtonTop = string | number | boolean;
-export type HelpButtonRight = string | number | boolean;
-export type HelpButtonBottom = string | number | boolean;
-export type HelpButtonLeft = string | number | boolean;
-export type HelpButtonOnClick = string | ((...args: any[]) => any);
-export type HelpButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type HelpButtonIconPosition = 'left' | 'right';
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Web HelpButton Component
+ *
  */
-export interface HelpButtonProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * The content of the button can be a string or a React Element.
-   */
-  text?: HelpButtonText;
-
-  /**
-   * `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) .
-   */
-  type?: string;
-
-  /**
-   * Title of the button. Optional, but should always be included because of accessibility.
-   */
-  title?: React.ReactNode;
-
-  /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
-   */
-  variant?: any;
-
-  /**
-   * The size of the button. For now there is "medium", "default" and "large".
-   */
-  size?: HelpButtonSize;
-
-  /**
-   * Define icon width and height. Defaults to 16px
-   */
-  icon_size?: HelpButtonIconSize;
-
-  /**
-   * Provide a string or a React Element to be shown as the tooltip content.
-   */
-  tooltip?: HelpButtonTooltip;
-
-  /**
-   * Set it to either `status="error"` or a text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
-   */
-  status?: HelpButtonStatus;
-
-  /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
-   */
-  status_state?: string;
-
-  /**
-   * Use an object to define additional FormStatus properties.
-   */
-  status_props?: Object;
-  status_no_animation?: HelpButtonStatusNoAnimation;
-
-  /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
-   */
-  global_status_id?: string;
-  id?: string;
-
-  /**
-   * Any extra modifying class.
-   */
-  class?: string;
-
-  /**
-   * If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.
-   */
-  href?: string;
-
-  /**
-   * Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.
-   */
-  to?: HelpButtonTo;
-
-  /**
-   * If you need to inject completely custom markup (React Element) into the button component. You have then to handle alignment and styling by yourself.
-   */
-  custom_content?: React.ReactNode;
-
-  /**
-   * If set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`.
-   */
-  wrap?: HelpButtonWrap;
-
-  /**
-   * Set it to `true` in order to extend the bounding box (above the visual button background). You may also look into the HTML class `dnb-button__bounding` if it needs some CSS customization in order to get the particular button right for your use-case.
-   */
-  bounding?: HelpButtonBounding;
-
-  /**
-   * Set it to `true` in order to stretch the button to the available space. Defaults to false.
-   */
-  stretch?: HelpButtonStretch;
-
-  /**
-   * If set to `true`, an overlaying skeleton with animation will be shown.
-   */
-  skeleton?: HelpButtonSkeleton;
-  disabled?: HelpButtonDisabled;
-  inner_ref?: Object;
-  className?: string;
-  innerRef?: Object;
-
-  /**
-   * The content of the button can be a string or a React Element.
-   */
-  children?: HelpButtonChildren;
-
-  /**
-   * Only meant to be used for special use cases. Defaults to `button` or `a` depending if href is set or not.
-   */
-  element?: HelpButtonElement;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: HelpButtonSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: HelpButtonTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: HelpButtonRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: HelpButtonBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: HelpButtonLeft;
-  custom_element?: Object;
-  custom_method?: (...args: any[]) => any;
-
-  /**
-   * Will be called on a click event. Returns an object with the native event: `{ event }`.
-   */
-  on_click?: HelpButtonOnClick;
-
-  /**
-   * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
-   */
-  icon?: HelpButtonIcon;
-
-  /**
-   * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
-   */
-  icon_position?: HelpButtonIconPosition;
-
-  /**
-   * The content which will appear when triggering the modal.
-   */
-  modal_content?: React.ReactNode;
-
-  /**
-   * Accepts all <a href="/uilib/components/modal/properties">Modal properties</a> as an object, if `children` is given.
-   */
-  modal_props?: Object;
-}
-export default class HelpButton extends React.Component<
-  HelpButtonProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+import React from 'react';
+import { ButtonProps } from '../button/Button';
+import { ModalProps } from '../modal/types';
+export declare type HelpButtonProps = {
+    modal_content?: React.ReactNode;
+    modal_props?: ModalProps;
+} & ButtonProps;
+export default function HelpButton(localProps: HelpButtonProps): JSX.Element;

package/es/components/help-button/HelpButton.js

@@ -1,77 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 const _excluded = ["modal_content", "children", "modal_props"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
-import PropTypes from 'prop-types';
-import { registerElement } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import Modal from '../modal/Modal';
 import HelpButtonInstance from './HelpButtonInstance';
-import Button from '../button/Button';
-export default class HelpButton extends React.PureComponent {
-  static enableWebComponent() {
-    registerElement(HelpButton === null || HelpButton === void 0 ? void 0 : HelpButton.tagName, HelpButton, HelpButton.defaultProps);
-  }
-
-  static getContent(props) {
+import { extendPropsWithContext } from '../../shared/component-helper';
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left'
+};
+export default function HelpButton(localProps) {
+  const getContent = props => {
     if (props.modal_content) {
       return props.modal_content;
     }
 
     return typeof props.children === 'function' ? props.children(props) : props.children;
-  }
+  };
 
-  render() {
-    const _this$props = this.props,
-          {
-      modal_content,
-      children,
-      modal_props
-    } = _this$props,
-          params = _objectWithoutProperties(_this$props, _excluded);
+  const context = React.useContext(Context);
+  const props = extendPropsWithContext(localProps, defaultProps);
+  const content = getContent(props);
 
-    const content = HelpButton.getContent(this.props);
+  const {
+    modal_content,
+    children,
+    modal_props
+  } = props,
+        params = _objectWithoutProperties(props, _excluded);
 
-    if (params.icon === null) {
-      params.icon = 'question';
-    }
-
-    if (content) {
-      if (!params.title) {
-        params.title = this.context.getTranslation(this.props).HelpButton.title;
-      }
+  if (params.icon === null) {
+    params.icon = 'question';
+  }
 
-      return React.createElement(Modal, _extends({
-        trigger_attributes: params
-      }, modal_props), content);
+  if (content) {
+    if (!params.title) {
+      params.title = context.getTranslation(props).HelpButton.title;
     }
 
-    return React.createElement(HelpButtonInstance, params);
+    return React.createElement(Modal, _extends({
+      trigger_attributes: params
+    }, modal_props), content);
   }
 
-}
-
-_defineProperty(HelpButton, "contextType", Context);
-
-_defineProperty(HelpButton, "tagName", 'dnb-help-button');
-
-_defineProperty(HelpButton, "defaultProps", {
-  variant: 'secondary',
-  icon: null,
-  icon_position: 'left',
-  modal_content: null,
-  modal_props: null
-});
-
-process.env.NODE_ENV !== "production" ? HelpButton.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  icon_position: PropTypes.oneOf(['left', 'right']),
-  modal_content: PropTypes.node,
-  modal_props: PropTypes.object
-}) : void 0;
+  return React.createElement(HelpButtonInstance, params);
+}

package/es/components/help-button/HelpButtonInstance.d.ts

@@ -1,102 +1,7 @@
-import * as React from 'react';
-export type HelpButtonInstanceVariant =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'signal'
-  | 'unstyled';
-export type HelpButtonInstanceIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export type HelpButtonInstanceIconPosition = 'left' | 'right';
-export type HelpButtonInstanceSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type HelpButtonInstanceTop = string | number | boolean;
-export type HelpButtonInstanceRight = string | number | boolean;
-export type HelpButtonInstanceBottom = string | number | boolean;
-export type HelpButtonInstanceLeft = string | number | boolean;
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Web HelpButton Component
+ *
  */
-export interface HelpButtonInstanceProps
-  extends React.HTMLProps<HTMLElement> {
-  id?: string;
-
-  /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
-   */
-  variant?: HelpButtonInstanceVariant;
-
-  /**
-   * To be included in the button. <a href="/icons/primary">Primary Icons</a> can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements.
-   */
-  icon?: HelpButtonInstanceIcon;
-
-  /**
-   * Position of icon inside the button. Set to `left` or `right`. Tertiary button variant also supports `top`. Defaults to `right` if not set.
-   */
-  icon_position?: HelpButtonInstanceIconPosition;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: HelpButtonInstanceSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: HelpButtonInstanceTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: HelpButtonInstanceRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: HelpButtonInstanceBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: HelpButtonInstanceLeft;
-  className?: string;
-
-  /**
-   * Any extra modifying class.
-   */
-  class?: string;
-}
-export default class HelpButtonInstance extends React.Component<
-  HelpButtonInstanceProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+/// <reference types="react" />
+import { ButtonProps } from '../button/Button';
+export default function HelpButtonInstance(localProps: ButtonProps): JSX.Element;

package/es/components/help-button/HelpButtonInstance.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["size", "icon", "on_click", "className", "class"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -8,91 +8,72 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { convertJsxToString, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
-import Button, { buttonVariantPropType } from '../button/Button';
-export default class HelpButtonInstance extends React.PureComponent {
-  render() {
-    const props = extendPropsWithContext(this.props, HelpButtonInstance.defaultProps, this.context.FormRow, this.context.HelpButton);
-
-    const {
-      size,
-      icon,
-      on_click,
-      className,
-      class: _className
-    } = props,
-          rest = _objectWithoutProperties(props, _excluded);
-
-    const params = _objectSpread({
-      className: classnames('dnb-help-button', createSpacingClasses(props), className, _className),
-      size,
-      icon
-    }, rest);
-
-    const isPotensialHelpButton = !params.text || params.variant === 'tertiary';
-
-    if (isPotensialHelpButton && !params.icon && params.icon !== false) {
-      params.icon = 'question';
-    }
-
-    const isHelpButton = isPotensialHelpButton && ['question', 'information'].includes(String(params.icon));
-
-    if (isHelpButton) {
-      if (!params['aria-roledescription']) {
-        params['aria-roledescription'] = this.context.getTranslation(this.props).HelpButton.aria_role;
-      }
-    }
-
-    if (!params.text && !params['aria-label']) {
-      let ariaLabel = convertJsxToString(props.title || props.children);
+import { includeValidProps } from '../form-row/FormRowHelpers';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Button from '../button/Button';
+const defaultProps = {
+  variant: 'secondary',
+  icon_position: 'left'
+};
+export default function HelpButtonInstance(localProps) {
+  const context = React.useContext(Context);
+  const props = extendPropsWithContext(localProps, defaultProps, includeValidProps(context.FormRow), context.HelpButton);
+
+  const {
+    size,
+    icon,
+    on_click,
+    className,
+    class: _className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const params = _objectSpread({
+    className: classnames('dnb-help-button', createSpacingClasses(props), className, _className),
+    size,
+    icon
+  }, rest);
+
+  const isPotentialHelpButton = !params.text || params.variant === 'tertiary';
+
+  if (isPotentialHelpButton && !params.icon && params.icon !== false) {
+    params.icon = 'question';
+  }
 
-      if (!ariaLabel) {
-        ariaLabel = this.context.getTranslation(this.props).HelpButton.title;
-      }
+  const isHelpButton = isPotentialHelpButton && ['question', 'information'].includes(String(params.icon));
 
-      params['aria-label'] = ariaLabel;
+  if (isHelpButton) {
+    if (!params['aria-roledescription']) {
+      params['aria-roledescription'] = context.getTranslation(props).HelpButton.aria_role;
     }
+  }
 
-    if (icon === 'information' && !size) {
-      params.icon_size = 'medium';
-    }
+  if (!params.text && !params['aria-label']) {
+    let ariaLabel = convertJsxToString(props.title || props.children);
 
-    if (params.title && !params.tooltip && params.tooltip !== false) {
-      params.tooltip = params.title;
+    if (!ariaLabel) {
+      ariaLabel = context.getTranslation(props).HelpButton.title;
     }
 
-    if (params.tooltip) {
-      params.title = null;
-    }
+    params['aria-label'] = ariaLabel;
+  }
 
-    return React.createElement(Button, _extends({
-      on_click: on_click
-    }, params));
+  if (icon === 'information' && !size) {
+    params.icon_size = 'medium';
   }
 
-}
+  if (params.title && !params.tooltip && params.tooltip !== false) {
+    params.tooltip = params.title;
+  }
 
-_defineProperty(HelpButtonInstance, "contextType", Context);
+  if (params.tooltip) {
+    params.title = null;
+  }
 
-_defineProperty(HelpButtonInstance, "defaultProps", {
-  id: null,
-  variant: 'secondary',
-  icon: null,
-  icon_position: 'left',
-  className: null,
-  class: null
-});
-
-process.env.NODE_ENV !== "production" ? HelpButtonInstance.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  id: PropTypes.string
-}, buttonVariantPropType), {}, {
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  icon_position: PropTypes.oneOf(['left', 'right'])
-}, spacingPropTypes), {}, {
-  className: PropTypes.string,
-  class: PropTypes.string
-}) : void 0;
+  return React.createElement(Button, _extends({
+    on_click: on_click
+  }, params));
+}

package/es/components/help-button/style/dnb-help-button.css

@@ -223,36 +223,36 @@
   padding: 0 1rem;
   opacity: 0;
   visibility: hidden;
-  -webkit-transition: opacity 200ms ease-out;
-  transition: opacity 200ms ease-out; }
+  -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
-    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
-    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
       because of the first "show" we also use animation
       also, use forwards because of the usage of visibility
     */
-    -webkit-animation: show-tooltip 200ms ease-out forwards;
-            animation: show-tooltip 200ms ease-out forwards; }
+    -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
-    -webkit-animation: show-tooltip 1ms ease-out forwards;
-            animation: show-tooltip 1ms ease-out forwards; }
+    -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
-    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
-            animation: hide-tooltip 200ms ease-in-out forwards; }
+    -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
-    -webkit-animation: hide-tooltip 1ms ease-out forwards;
-            animation: hide-tooltip 1ms ease-out forwards; }
+    -webkit-animation: hide-tooltip 1ms linear forwards;
+            animation: hide-tooltip 1ms linear forwards; }
   .dnb-tooltip--fixed {
     position: fixed; }
   html[data-visual-test] .dnb-tooltip--hide {
-    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
-            animation: hide-tooltip 1ms ease-out 1s forwards; }
+    -webkit-animation: hide-tooltip 1ms linear 1s forwards;
+            animation: hide-tooltip 1ms linear 1s forwards; }
   .dnb-tooltip__portal {
     position: absolute;
     top: 0;